HTML/CSS - Bugs & Hacks - Three Pixel Text Jog
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;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
div.blubb
{
float: left;
width: 100px;
border: 1px solid #000;
}
div.blubber
{
margin-left: 110px;
border: 1px solid #f00;
width: 70px;
}
...
<div class="blubb">
Blubb
</div>
<div class="blubber">
Blubber kräh bla schwall sülz dumdidum
</div>
4. Der Bug
Ein Block-Element bekommt die Eigenschaften float: left. Das nachfolgende Element soll nun dazu einen optischen
Abstand von 10 Pixeln haben, also margin-left: 110px. Leider rückt der Internet Explorer 6 den Abstand um
zusätzliche 3 Pixel ein. Daher auch der Name. Manchmal kommt es auch vor, dass der Text im nachfolgenden
Element solange um diesen Wert eingerückt wird, bis die Höhe dieses Textes die des vorherigen Elementes überschreitet. Das
passiert mir in meiner alltäglichen Arbeit dauernd, nur ausgerechnet jetzt bekomme ich dafür kein passendes Beispiel auf die
Reihe. Shit happens. Das Prinzip ist aber dasselbe.
5. Die Lösung
Möglichkeit 1
Soll das nachfolgende Element einen "optischen" Abstand zum vorherigen haben, ist es ganz einfach. Man reduziert den Wert
von margin-left um die ominöse Anzahl von Pixeln und weist dem Element eine Höhe zu, die kleiner ist, als die
des vorherigen Elements. Durch einen anderen Bug im IE (der hier später auch mal erläutert wird) kann man einfach einen
kleinstmöglichen nehmen.
* html div.blubber
{
height: 1px;
margin-left: 107px;
}
Möglichkeit 2
Man floatet auch das zweite Element und passt den Abstand an. Das kann man übrigens bei allen Browsern so machen. Die Details zum Floaten kommen allerdings erst im nächsten Tutorial.
div.blubber
{
float: left;
margin-left: 10px;
}