Legend - fehlerhafter margin bei Google Chrome

[MrMurphy]

Hallo ich habe ein Formular mittels CSS gruppiert.

Leider wird der Abstand unter dem Label-Tag "Ihre Nachricht" von Google Chrome nicht richtig dargestellt. Ich habe ihn mittels margin-bottom erstellt, da ich mit border-bottom einen Strich darunter setzen möchte. Mit padding-bottom wird der Abstand zwar hergestellt, aber dann rutscht auch das border-bottom nach unten.

Ich habe das Formular mal hier bereitgestellt:

Test wegen Formularproblemen

Im Firefox und IE funktioniert der margin-bottom wie gewünscht.

Ich habe bereits eine (englischsprachige) Seite gefunden, die sich mit dem Problem beschäftigt. Es scheint also wirklich ein Chrome-Darstellungsproblem zu sein.

Aber der dort beschriebene Hack funktioniert bei mir nicht. Damit soll wohl das erste Label hinter Legend einen margin-top bekommen.

Cannot add margin to Legend element in Safari & Chrome - Stack Overflow

Gibt es für das Problem vielleicht eine andere Lösung / Hack, so dass border als Unterstreichung bestehen bleiben kann?

Gruss

MrMurphy

 

[neuroleptika]

Ich würde <legend> durch <h2> ersetzen.

 

[MrMurphy]

Hallo,

danke erstmal für die Antwort.

Ich würde <legend> durch <h2> ersetzen.

Das wäre semantisch aber nicht korrekt. Das Problem ist ja nach meinen bisherigen Erkenntnissen der Googe Chrome und nicht der Quellcode, deshalb suche ich eher nach einem Hack, der Chrome zur richtigen Anzeige veranlasst.

Im Endeffekt soll die ganze Seite barrierefrei gestaltet werden, da sollte ich wohl von Anfang an auf die korrekte Semantik achten.

Gruss

MrMurphy

 

[neuroleptika]

Ich finde eine Überschrift für ein Formular mit nur einem fildset semantisch ok.

Wenn du trotzdem legend benutzen möchtest, könntest du auch das padding auf #formular-anfang verlegen. Dort müßte es dann natürlich padding-top heißen.
Das hilft zumindest im Opera und Safari (bzw. Chrome und andere Webkits).

Im IE<=7 erstreckt sich border-bottom über die gesammte Breite.

Tipp:
Nimm mal fildset aus dem "Meyer Reset" raus um die Besonderheit von fildset und legend zu sehen.

 

[MrMurphy]

Hallo,

danke. Das mit dem padding-top für das p#formular-anfang scheint in den mir wichtigen Brownsern zu funktioniern.

Gruss

MrMurphy