[SOLVED]IE 3px float bug + faux coloums führt zu Bauchschmerzen.

Zen5656 · #1 (**permalink**) 02.10.2006, 01:00

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

Zen5656 · #2 (**permalink**) 02.10.2006, 01:04

Ok habs geschafft mit:

Code:

* html .blau {
	margin-left: 242px;
}

CLOSEN!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Darstellungsprobleme im IE	lea11011989	CSS	17	05.11.2010 09:44
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Frage zu horizontalen Linien	marvin1989	CSS	3	29.12.2009 23:35
Problem mit CSS Style	flo007	CSS	3	25.01.2009 17:08
IE zeigt gewisse Texte nicht an	zitronenbaum	CSS	2	16.01.2008 15:25