Doppelter Margin, beim Floaten im IE, wie ich stylen muss !

Jeder kent das: Man floatet div-Tags, verpasst denen einen Margin und zack! Ist der Margin doppelt so breit.
Man habe ich schon Weichen gebaut und mich geärgert.
Es geht darum: alles was gefloatet wird, wird automatisch zum Block Element. Soweit so gut. Das macht der IE6
auch noch ganz prima.

Verpasst man einem gefloatetem block Element einen Margin, ist er auf einmal doppelt so breit…. jeder, der das schon
erleben durfte war bestimmt am Rande der Verzweflung, weil das CSS nur noch aus CSS Weichen für den IE bestand.

Dabei ist die Erklärung ganz einfach: Jedes gefloatete Element bekommt einen display:block verpasst.
Also wird es intern im IE wohl so ablaufen, dass der div Tag, der einen Margin hat und den ja als
Block Element auch haben darf, sobald dieser dann auch noch gefloatet wird, er nochmal einen display:block
verpasst bekommt und somit wohl der margin nochmal gerechnet wird.
Also fehlt da wohl im IE irgendwo eine Abfrage, ob der Margin dieses Block Elements nicht evtl schon berechnet wurde
Auch wenn nun durch das floaten des Elementes das Element ein Block Element wird.  Dem IE ist es wohl an der stelle egal,

ob es vorher schon ein Block war und / oder ob schon der Margin dieses Elements berechnet wurde, es wird einfach
nochmal berechnet….  sehr spendabel…. 😉

Die Lösung? Gaanz einfach: verpasse jedem gefloatetem Element ein display:inline, es wird eh zu einem Block Element durch
das floaten und das in jedem Browser.

Das stört keinen Browser, aber die doppelten Margin Werte werden im IE wieder einfach und normal !!!

Dafür muss man im IE das gefloatete nicht clearen, DAS passiert im IE automatisch 🙂
Das widerrum könnten sich die anderen mal abschauen, denn das gecleare nervt…
🙂

Hurraa!!!

Schreibe einen Kommentar

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.