Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?

Die Ausgangssituation: Eine Box ist mit der float:left-Eigenschaft ausgezeichnet, und wird von der nachfolgenden Box mit einem der Boxenbreite entsprechenden linken Außenabstand rechts umflossen.

Markup:

Code :
1
2
3
4

<div id="wrapper">
     <div id="leftBox">leftBox</div>
     <div id="rightBox">rightBox</div>
</div>
Stylesheet:

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#wrapper {
width:500px;
margin:0 auto;
border:1px solid #000;
}
 
#leftBox {
width:250px;
height:250px;
float:left;
background:#dfdfdf;
}
 
#rightBox {
height:250px;
margin-left:250px;
background:#cfcfcf;
}
Das Ergebnis in den Browsern:

[CSS] Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?-float-container_modern-browser.jpg (Firefox, IE7, Netscape, Opera, Safari, usw.)

[CSS] Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?-float-container_ie6.jpg (IE6)

Wie auf dem IE6-Screenshot zu erkennen ist, klafft zwischen den beiden Boxen eine Lücke, die drei Pixel beträgt. Daher wurde dieser Bug in der Vergangenheit "IE Three Pixel Gap" oder "IE Three Pixel Text-Jog" getauft.

Dieser Darstellungsfehler tritt meistens dann in Erscheinung, wenn die umfliessende Box (hier #rightBox) mit einer Höhenangabe ausgestattet ist.

Lösung:

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#leftBox {
width:250px;
height:250px;
float:left;
background:#dfdfdf;
[b]margin-right:0 !important;[/b] /* Gilt für die modernen Browser */
[b]margin-right:-3px;[/b] /* Gilt für den IE6 und älter */
}
 
#rightBox {
height:250px;
[b]margin-left:250px !important;[/b] /* Gilt für die modernen Browser */
[b]margin-left:247px;[/b]  /* Gilt für den IE6 und älter */
background:#cfcfcf;
}
Die erste margin-Deklaration mit der !important-Regel ist für die modernen Browser bestimmt. Mit der angehängten !important-Regel wird dafür gesorgt, dass die Browser die nachfolgend gleichlautende CSS-Eigenschaft übergehen und sie ignorieren.

Wer den "Conditional Comment" bevorzugt, um den IE mit seinem spezifischen Stylesheet zu bedienen, kann die Korrektur selbstverständlich auch darin vornehmen, was dann die !important-Regel überflüssig macht.

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<style type="text/css">
#wrapper {
width:500px;
margin:0 auto;
border:1px solid #000;
}
 
#leftBox {
width:250px;
height:250px;
float:left;
background:#dfdfdf;
}
 
#rightBox {
height:250px;
margin-left:250px;
background:#cfcfcf;
}
</style>[b]
<!--[if lt IE 7]>
<style type="text/css">
#leftBox {
margin-right:-3px;
}
#rightBox {
margin-left:247px;
}
</style>
<![endif]-->[/b]


mfg Maik