hofi: Ungewollter Abstand im IE bei Floats

Beitrag lesen

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:

  1. 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.

  1. 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);
}

  1. 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; }

  1. Die einfache und elegante Lösung

Ein IE-CSS-Hack, den ich leider noch nicht entdeckt habe. :-(

ciao,
hofi