[css] 3px Text-Jog-Bug (IE bis v6)

[Thies]

Im IE bis zur Version 6 kann es zu Problemen kommen, wenn man neben einem Container links und / oder rechts per float weitere Container setzt. Der IE verschiebt dann die Container in sich um genau 3 px.

http://positioniseverything.net/explore ... xtest.html
http://www.sitepoint.com/forums/showpos ... stcount=15

Dies sieht u.U. etwas komisch aus, wie die beiden angehängten Bilder zeigen.

So sahen meine CSS-Styles für die drei Container aus, die bis auf der IE alle anderen Browser verstanden haben:

Code: Alles auswählen

div#nav_left 
	{
	width: 150px;
	float:left;
	background:url(images/back_nav.gif) top center repeat;
	}

div#nav_right
	{
	width:150px;
	float:right;
	background:url(images/back_nav.gif) top center repeat;
	}

div#main
	{
	margin-top: 10px; 
	margin-left: 160px; 
 	margin-right: 160px;
	margin-bottom: 25px; 
	padding: 5px;
	}

Um den Bug zu beheben, muss man in einer separate css-Datei speziell für die IE-Browser bis version 6 folgenden Code einbauen:

Code: Alles auswählen

div#main 
	{ 
  	zoom:1;  /* haslayout = true*/ 
  	margin-left: 157px; /* minus 3px */ 
  	margin-right: 157px; 
 	} 

div#nav_left 
	{ 
	margin-right: -3px; /* minus 3px */ 
	}
	
div#nav_right 
	{
	margin-left: -3px;
	} 

Ich reduziere also die margins der container um 3px und schon sieht das Layout wieder einwandfrei aus.

Und die Browserweiche sieht folgendermassen aus:

Code: Alles auswählen

<link rel='stylesheet' href='style.css' type='text/css' media='screen' />
<!--[if lte IE 6]>
<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />
<![endif]-->

CU

Frank-Andre