[SOLVED]IE 3px float bug + faux coloums führt zu Bauchschmerzen.
Abend.
Bin grad wieder am basteln. Ich baue gerade 2 Boxen die sich gegenseitig in der länge ausgleichen sollen.
Hier der HTML Teil:
Code:
<div class="faux_column">
<div>
<div class="eckeoben orange float"><div></div></div>
<div class="eckeoben blau"><div></div></div>
</div>
<div class="clearboth"></div>
<div>
<div class="float">x</div>
<div class="blau drei_pixel_bug_IE">x</div>
</div>
<div class="clearboth"></div>
<div>
<div class="eckeunten orange float"><div></div></div>
<div class="eckeunten blau"><div></div></div>
</div>
<div class="clearboth"></div>
</div>
Und das dazugehörige CSS:
Code:
.clearboth {
clear: both;
}
.eckeoben div {
background: url(ecke1.png) no-repeat top left ;
}
.eckeoben {
background: url(ecke2.png) no-repeat top right;
}
.eckeunten div {
background: url(ecke3.png) no-repeat bottom left;
}
.eckeunten {
background: url(ecke4.png) no-repeat bottom right;
}
.eckeoben div, .eckeoben, .eckeunten div, .eckeunten {
height: 18px;
}
.orange {
background-color: #F89724;
width: 230px;
}
.blau {
margin-left: 245px;
background-color: #0074E8;
}
.float {
float: left;
}
.faux_column {
background: url("orange.gif") #0074E8 repeat-y;
}
Das mache ich natürlich mit der altbewähren Faux coloums Methode. Das Problem hierbei ist das die linke der 2 Boxen mit float: left ausgerichtet wird. Darum hat der IE natürlich seinen 3px Floating Bug. Den habe ich dann mit
Code:
* html .drei_pixel_bug_IE {
display: inline-block;
padding-left: -10px;
}
ausgeglichen.
Im FF sieht das jetzt natürlich perfekt aus. Bei sind immer gleich lang. Im IE hingegen ist die rechte Box aufgrund des 3px bugs auch 3px weiter rechts. Dadurch ist die Hintergrunddatei der Faux coloumn um 3px zu kurz und eine Art Rand entsteht. Das ganze kann man sich natürlich nur schwer vorstellen *g* Darum hab ich es hier mal hochgeladen:
http://www.the-holics.de/middle/middle.html
Ihr müsst es natürlich im IE anschauen. Hat jemand ne idee wie ich diesen 3px Abstand wegkriege?
MfG Zen |
