✔ Hilfe, ie 6 macht grundlosen abstand ...

[Matlox]

Hallo Freunde,
ich habe folgendes problem,
habe 2 Ecplorer, Firefox und den Ie6 zum testen meiner pages,
meine Page ist komplett mit css und div aufgebaut,
im Firefox funktioniert alles problemlos ....

... im IE hingegen überhaupt nicht, es sind 2 boxen nebeneinander (mit float:left
sie sollten direkt nebeneinander liegen deswegen haben beide boxen margin:0; nur
der IE6 macht einen 5px abstand, evtl. durch den befehl float?!

wieso das, gibts nen befehl den fehler aufzuheben?!


danke im vorraus
mfg Matlox

 

[Maik]

Hi,

der grundlose Abstand wird durch den "IE6 Three Pixel Gap"-Bug hevorgerufen.

 

[Matlox]

danke davon hab ich schon gehört,
komischerweiße nix gefunden über google oder die suchfunktion ...


ich hab das ganze jetzt so geschrieben:

div.leftcontent			{width: 180px; padding: 0; margin:0; float:left;} * html div.leftcontent {margin: 0 -3px 0 0;}

nur leider funktionierts nich ganz :S

danke im vorraus
Lg Matlox

 

[Maik]

Dieses Markup

<div id="box1">box1</div>
<div id="box2">box2</div>

in Kombination mit diesem Stylesheet:

div#box1 {
float:left;
width:200px;
height:200px;
background:#ccc;
}

div#box2 {
width:200px;
height:200px;
background:#ddd;
}

erzeugt im IE6 diese Ausgabe:



Mit dem Zusatz:

div#box1 {
float:left;
width:200px;
height:200px;
background:#ccc;
margin:0 !important;
margin:0 -3px 0 0;
}

oder

div#box1 {
float:left;
width:200px;
height:200px;
background:#ccc;
margin:0;
}

* html div#box1 {
margin:0 -3px 0 0;
}

wird der Bug gefixt.

 

[Matlox]

Danke Danke Danke nur passwiert das ganze nun im Firefox auch ....

d.h. ich hab das ganze nun mit 6 px gemacht, da ich da boxen habe hatts mit 3 px nich funktioniert nur mit 6, leider macht er das im FIrefox auch....

warum?

div.leftcontent			{width: 180px; padding: 0; margin:0; float:left; !important; margin:0 -5px 0 0;}

Danke im vorraus
Mfg Matlox

 

[Maik]

Zeig mal bitte den HTML- und CSS-Code beider Boxen.

Die !important-Regel hast du zumindest schon mal falsch gesetzt

 

[Matlox]

sry, hab grad nur das obere gelesen, mit den oder hatts funktioniert,

div.leftcontent			{width: 180px; padding: 0; margin:0; float:left;} * html div.leftcontent {margin:0 -5px 0 0;}

also, das is der aktuelle code und somit funktionierts.

Vielen lieben dank, Ihr seids die besten

MFG
Matlox

 

[Maik]

sry, hab grad nur das obere gelesen, mit den oder hatts funktioniert

Dann sollte der erste Lösungsvorschlag gleichermaßen einwandfrei funktionieren, denn in deinem vorherigen Code-Ausschnitt sitzt die !important-Regel zwischen der float- und zweiten margin-Deklaration an der falschen Stelle.