Ungewollter Abstand im IE bei Floats
0 0 0 0 0 
molily
Ungewollter Abstand im IE bei Floats
Hallo!
Vielleicht ein alter Hut, aber trotz vieler Googelei komme ich nicht drauf:
Warum rücken beim Internet Explorer die Floats auf http://www.ponkong.de/test/test.html auseinander, während sie in Firefox und Netscape Navigator direkt nebeneinander liegen? Ich vermute einen Bug des IE, aber wie kann ich ihn umgehen?
Vielen Dank
Christoph
test.html:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" media="all">
</head>
<body>
<img src="rot.jpg" alt="">
<a href="/">Aktuelles</a>
<img src="rot.jpg" alt="">
</body>
</html>
test.css:
img {float: left;
}
a {
background: #CFCFCF;
float: left;
}
-
Moin moin!
Ohne jetzt irgendwas getestet zu haben: Float-Bugs im IE lassen sich oft beheben, indem du den betroffenen Floats display:inline; gibst. Auch einen Versuch wert ist immer height:1%; (für nicht-IE-Browser entsprechend verstecken) oder position:relative;.
ciao,
hofi-
Moin moin!
Okay, hab jetzt mal getestet. 1_1
Die von mir genannten "Standard"-Lösungen zeigen in dem Fall keine Wirkung ... aber wenn du einen vollständigne Doctype reinmachst (mit URL), funktioniert es zumindest im IE6.
Mal schauen ...
ciao,
hofi-
Moin moin!
Okay, fassen wir meine Ergebnisse zusammen:
Das Problem sind die IMG-Tags, ich habe aber noch nicht rausgefunden, warum der IE da einen Extraabstand von 3px macht, selbst wenn man padding, margin und border auf 0 setzt.
Lösungsansätze:
- Simple, aber unvollständig
Einfach den Doctype ersetzen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Dann funktioniert es mit IE6, aber nicht mit den alten 5ern.
- Simple, aber sehr schlechtes Markup
Ersetze <img src="rot.jpg" alt=""> durch <div class="img"></div>.
Erstelle folgende CSS-Regel:
.img
{
float:left;
width:50px;
height:50px;
background-image:url(red.jpg);
}- Simple, Markup nicht optimal
Gibt dem Bild links und rechts verschiedene Klassen:
<img src="rot.jpg" alt="" class="links">
<img src="rot.jpg" alt="" class="rechts">Und im CSS dann:
* html .links { margin-right:-3px; }
* html .rechts { margin-left:-3px; }- Die einfache und elegante Lösung
Ein IE-CSS-Hack, den ich leider noch nicht entdeckt habe. :-(
ciao,
hofi-
Moin moin!
Ah, da isse ja endlich. ;-)
- Die einfache und elegante Lösung
* html img {
margin: 0 -3px; ma\rgin: 0;
}Eigentlich nur eine Abwandlung von 3) mit Tan-Hack für die "guten" Browser.
Für die Lösung solltest du aber den Doctype NICHT ändern, sonst geht der IE6 wieder kaputt.
ciao,
hofi-
Hallo,
* html img {
margin: 0 -3px; ma\rgin: 0;
}Für die Lösung solltest du aber den Doctype NICHT ändern, sonst geht der IE6 wieder kaputt.
Wieso? Das Problem tritt offenbar nur im Quirks-Modus auf. MSIE 6 im standardkonformen Modus ist mit margin:0 völlig zufrieden und zeigt so oder so keine Abstände.
Im Übrigen war das Beispiel anscheinend gestellt. Wieso braucht man konkret bei diesem Beispiel überhaupt float (und entsprechende IE-Hacks)?
Mathias
-
-