M
Maik
IE6 rückt floatende Boxen zu weit ein - was tun?
Die Ausgangssituation: In einem Elternblock sind zwei Spaltenblöcke eingebunden, die entsprechend ihrer Ausrichtung mit der float:left- bzw. float:right-Eigenschaft, sowie margin-left- bzw. margin-right-Eigenschaft ausgezeichnet sind.
Der Außenabstand der beiden Boxen soll zum benachbarten Rahmen des Elternelements 50 Pixel betragen.
Markup:
Stylesheet:
Das Ergebnis in den Browsern:
(Firefox, IE7, Netscape, Opera, Safari, usw.)
(IE6)
Anhand des angelegten Maßbandes erkennt man deutlich, dass der IE6 die Außenabstände der beiden Boxen verdoppelt. Aus diesem Grund spricht man hier vom "IE Doubled Float-Margin Bug".
Lösung:
Die betroffenen Boxen zusätzlich mit display:inline auszeichnen:
mfg Maik
Die Ausgangssituation: In einem Elternblock sind zwei Spaltenblöcke eingebunden, die entsprechend ihrer Ausrichtung mit der float:left- bzw. float:right-Eigenschaft, sowie margin-left- bzw. margin-right-Eigenschaft ausgezeichnet sind.
Der Außenabstand der beiden Boxen soll zum benachbarten Rahmen des Elternelements 50 Pixel betragen.
Markup:
Code:
<div id="wrapper" class="clearfix">
<div id="leftBox">leftBox</div>
<div id="rightBox">rightBox</div>
</div>
Code:
#wrapper {
width:650px;
margin:0 auto;
border:1px solid #000;
}
#leftBox {
width:250px;
height:250px;
float:left;
margin-left:50px;
background:#dfdfdf;
}
#rightBox {
width:250px;
height:250px;
float:right;
margin-right:50px;
background:#cfcfcf;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
![float-container_modern-browser.jpg float-container_modern-browser.jpg](https://www.tutorials.de/data/attachments/30/30140-0044586c043a3ae089dc08b89ab78e29.jpg?hash=AERYbAQ6Ou)
![float-container_ie6.jpg float-container_ie6.jpg](https://www.tutorials.de/data/attachments/30/30141-33c6d37866ace0aea3ca10932c68e788.jpg?hash=M8bTeGas4K)
Anhand des angelegten Maßbandes erkennt man deutlich, dass der IE6 die Außenabstände der beiden Boxen verdoppelt. Aus diesem Grund spricht man hier vom "IE Doubled Float-Margin Bug".
Lösung:
Die betroffenen Boxen zusätzlich mit display:inline auszeichnen:
Code:
#leftBox {
width:250px;
height:250px;
float:left;
margin-left:50px;
background:#dfdfdf;
display:inline;
}
#rightBox {
width:250px;
height:250px;
float:right;
margin-right:50px;
background:#cfcfcf;
display:inline;
}
mfg Maik