Einzelnen Beitrag anzeigen
  #11 (permalink)  
Alt 11.01.2005, 17:39
ulle ulle ist offline
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