HTML/CSS - Bugs & Hacks - Fieldset Bleed 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

fieldset
{
  border: 1px solid #e5e1a9;
  background-color: #fffde3;
  padding: 10px;
  margin-bottom: 10px;
}

<fieldset>
  <legend>Bla blubb</legend> 
  <label for ="laber">Laber</label>
  <input type="text">
</fieldset> 

4. Der Bug

Eigentlich sollte die Hintergrundfarbe nur bis zum Trennstrich auf mittlerer Höhe des Textes gehen. Also so.

Nur leider schießt sowohl der IE6 als auch IE7 mal wieder übers Ziel hinaus. Das liegt daran, dass das <legend>-Tag sich innerhalb des <fieldset> befindet. Also nimmt unser Lieblingsbrowser alles als Hintergrund, dessen er habhaft werden kann. Das ist dasselbe Verhalten, dass man sich bei dem berühmten height:1px;-Hack zu Nutze macht. Denn auch in dem Fall wird trotzdem der gesamte Inhalt erfasst.

5. Die Lösung

Man weist dem <fieldset> eine relative Position zu, ohne eine genaue Angabe zum Beispiel über top oder left zu machen. Gleichzeitig legt man noch ein entsprechendes padding für den Innenabstand fest. Danach setzt man für das <legend> eine absolute Position mit entsprechendem Abstand nach oben fest.

fieldset
{
  ...
  padding: 10px;
  position:relative;
}

fieldset legend 
{
    position:absolute;
    top: -0.5em;
}

Ach ja, wenn ihr, wie von mir empfohlen, für den IE6/7 eine eigene CSS-Datei genommen habt (siehe Conditional Comments), so benötigt ihr keine Stern-Hacks, da dieses Problem beide Versionen betrifft.

6. Ein Hinweis

Sowohl beim padding als auch beim top muss man ein wenig mit den Werten herumspielen, bis es passt. Und beim fieldset-Selektor sollte man zusätzlich noch mit margin-top arbeiten, da sonst keine Zwischenabstände zu den anderen Elementen mehr vorhanden sind. Außerdem muss man dem ersten folgenden Formularabschnitt noch zusätzlich ein padding-top verpassen, da es sonst direkt unterhalb des <label> sitzt. Ein Beispiel dazu findet ihr in diesem Tutorial.