HTML/CSS - Bugs & Hacks - Double Margin Bug
1. Die Abschnitte
- Überblick
- Grundsätzliche Tipps für den IE
- Conditional Comments
- Double Margin Bug
- Three Pixel Text Jog
- Listen Bug
- Duplicate Characters Bug
- Fieldset Bleed Bug
2. Das Problem
3. Der Code
body, div
{
margin: 0px;
padding: 0px;
}
p
{
margin: 0px;
padding: 5px;
}
div.blubb
{
margin-left: 40px;
float: left;
width: 120px;
border: 1px solid #000;
}
div.blubber
{
margin-left: 20px;
border: 1px solid #000;
width: 300px;
float: left;
}
...
<div class="blubb">
<p>Blubb</p>
</div>
<div class="blubber">
<p>Blubber</p>
</div>
4. Der Bug
Ein Block-Element bekommt die Eigenschaften margin-left und float: left. Jetzt wird der
margin-Wert im Internet Explorer 6 verdoppelt. Dies gilt aber grundsätzlich immer nur für das erste Element.
Nachfolgende sind davon nicht betroffen. In unserem Beispiel könnte das <div>-Element blubber
entfernt werden, der Effekt bliebe derselbe.
5. Die Lösung
Möglichkeit 1
Die CSS-Anweisung div.blubb wird um den Eintrag display: inline ergänzt. Sollte das, aus welchen
Gründen auch immer, nicht möglich sein, so hilft ein kleiner Hack.
Möglichkeit 2
* html div.blubb
{
margin-left: 20px;
}
Der margin-Wert wird in einem IE-Hack halbiert. Der Bug ist zwar trotzdem noch da, aber es sieht zumindest so
aus, wie geplant.
Weitere Möglichkeiten
Wenn man aus optischen Gründen auf ein margin-left verzichten kann, so täte es auch ein padding-left.
Oder aber man arbeitet mit einem übergeordneten <div>-Element und verpasst dem dann ein padding.
Allerdings hängt das von der jeweiligen Situation ab und kann hier nicht erläutert werden.
6. Ein Tipp
Auf Grund dieses Bugs (und ein paar anderer) empfehle ich euch dringenst, beim Design darauf zu achten, dass wie auch immer geartete horizontale Breitenangaben glatt durch zwei teilbar sind!