zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden variabler Bezugspunkt [position: relative] / Rundungsfehler

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 11.01.2005, 17:39
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@andir - Danke

Rundungsfehler nach mehreren Prüfungen habe ich Folgendes festgestellt:

Wird ein Element nicht explizit mit fester Breite/Höhe angegeben,
also mit der Einheit Pixel definiert wird es sowohl beim Firefox,
als auch beim IE evtl. zu Rundungsfehlern kommen,
sofern ein Startpunkt für die absolute Positionierung errechnet werden muß.

D.h. ein errechneter Startpunkt wäre sobald [right] oder [bottom] benutzt werden.
Diese Problem tritt auch auf wenn das Element in dem absolute positioniert wird der BODY ist.
Einzig der Opera scheint diese Probleme nicht zu kennen.

Nun habe ich aber zumindest dem IE den Rundungsfehler mit einem Trick abgewöhnt,
nur der Firefox (Gecko) läßt sich davon nicht überzeugen.

Genannt habe ich das "GHOST"-Container
Code:
#rb-port  
		{ /* Ghost-Container */
		position: relative; /* variabler Port  fuer #rb [absolute] Layer; 
							neuer Port vermeidet IE/FF Rundungsfehler in der Hoehe, 
							sonst waere #side-Port verwendbar */

		height: 0;	/* ohne Auswirkung in der Hoehe */		
		width:  0;	/* ohne Auswirkung in der Breite */
		
		margin: 0 0 0 auto; /* [auto] setzt Ghost-Container an den rechten Rand;
							somit wird  Rundungsfehler des IE in der Breite verhindert */
		}
Was wird bewirkt: Ich setze einen neuen Bezugspunkt,
somit muß für die Höhe von #side nichts errechnet werden da der neue Bezugspunkt ja ganz unten ist.
Des weiteren wird dieser nicht sichtbare Bezugspunkt durch [margin-left: auto] direkt rechts an den inneren Container-Rand von #side gesetzt.
Dadurch muß der rechte Startpunkt nicht errechnet werden.

Das ganze funktioniert im IE und im Opera, im Firefox habe ich nur noch einen Rundungsfehler beim rechten Startpunkt.

Hat jemand einen Safari bzw. andere Testmöglichkeiten

Hier nochmal der gesamte vereinfachte Code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/


html,body   {
		margin: 0;
		padding: 3px;
		
		background-color: #DDDDDD;
		color: #000000;
		
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 100.01%;
		}

		
p		{
		margin: 7em 0 0 2em;
		}

		
#site	{
		position: relative; /* variabler Port fuer  #lt [absolute] Layer*/

		width: 40%;

		margin: 0 auto;
		border: 1px solid #000000;
		padding: 5px 0 0 0;
		
		background-color: #FFFFFF;
		}

#rb-port  
		{ /* Ghost-Container */
		position: relative; /* variabler Port  fuer #rb [absolute] Layer; 
							neuer Port vermeidet IE/FF Rundungsfehler in der Hoehe, 
							sonst waere #side-Port verwendbar */

		height: 0;	/* ohne Auswirkung in der Hoehe */		
		width:  0;	/* ohne Auswirkung in der Breite */
		
		margin: 0 0 0 auto; /* [auto] setzt Ghost-Container an den rechten Rand;
							somit wird  Rundungsfehler des IE in der Breite verhindert */
		}
		
		
#lt, #rb   { /* links-oben / rechts-unten */
		position: absolute;
		
		width: 3em;
		height: 3em;
		
		background-color: #FF9900;
		}

#lt		{		
		top: 0px;
		left: 0px;
		}
		
#rb		{
		right: 0px;
		bottom: 0px;
		}
   
/*]]>*/
</style>

</head>
<body>

<div id="site">
	
	<h1>nur so zum Test</h1>
		
	

Test text - Test text - Test text - Test text</p>      
	
	
	
	<div id="lt"></div>
	
	<div id="rb-port">
		<div id="rb"></div>
	</div>

</div>

</body></html>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 11.01.2005, 17:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Mit dem IE 5 gehts gar nicht - da sitzt das orangene Kästchen dann ganz links und das Ganze ist nicht zentriert.

Betrifft sowohl IE 5 als auch IE5.5 - kannst Du auch mit dem IE6 nachahmen, wenn Du ihn in den Quirksmode schickst.
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 11.01.2005, 20:56
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
.... - da sitzt das orangene Kästchen dann ganz links und das Ganze ist nicht zentriert.
Stimmt , das mit dem zentrieren ist mir aber bewußt, und egal

Zitat:
Mit dem IE 5 gehts gar nicht........
Nun, da habe ich noch was, einfach ins CSS einfügen, somit ist der IE auch im Quirksmode bzw. in Version 5/5.5 bedient. Diese Idee mit dem [float: right] hatte ich ja schon im 3 Versuch, nur dachte ich dasses ohne HACK ginge und habe dabei natürlich den alten IE-Trottel vergessen.
Code:
* html #rb-port  
		{ /* fuer IE Win \*/
		float: right;
		/* */ /* for Mac IE */
		}
__________________
</ulle>
Mit Zitat antworten
  #14 (permalink)  
Alt 12.01.2005, 11:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2004
Beiträge: 990
psycho_dmr befindet sich auf einem aufstrebenden Ast
Standard

Der Safari zeigt bei deinem letzten bsp (da wo du den ganzen code gepostet hast) alles richtig an.
Mit Zitat antworten
  #15 (permalink)  
Alt 12.01.2005, 12:00
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@psycho_dmr, Danke Dir

Super - damit kann man nun zumindest dem IE den Rundungsfehler beim positionieren mit RIGHT, innerhalb eines relativ breiten Containers (% oder em), abgewöhnen.
__________________
</ulle>
Mit Zitat antworten
  #16 (permalink)  
Alt 13.01.2005, 18:59
Benutzer
neuer user
 
Registriert seit: 06.11.2004
Beiträge: 34
manithu befindet sich auf einem aufstrebenden Ast
Standard

Opera 7.6 Preview 3 zeigt nur das links obere Kästchen an.
Mit Zitat antworten
  #17 (permalink)  
Alt 13.01.2005, 19:47
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Opera 7.52 Kein Problem
Code:
Opera

Version	7.52 	
Build	3834 	
Platform	Win32 	
System	Windows XP 	
  	
Java	Sun Java Runtime Environment version 1.4
@manithu Opera 7.6 Preview 3, da habe die wohl verschlimmbessert
__________________
</ulle>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 21:47 Uhr.