Probleme mit fieldset

[ChristianKl1]

Hallo zusammen,

bin heute auf folgendes Problem gestoßen und weiß nicht das es an einen Bug im IE liegt oder wieso das nicht so passt wie es soll.

Wenn ich normal ein Fieldset im HTML-Code setze und mir die Seite dann anschaue ist alles kein Problem soweit. Sobald ich aber per CSS eine Hintergrundfarbe definiere, geht diese über den oberen Rand hinaus, allerdings nur bei IE, Firefox und Co. zeigen es korrekt an. Habe euch mal ein kleines Beispiel gegeben damit Ihr sehen könnt was ich meine.

Zuerst der CSS-Code

fieldset { 
           background: #FFCC00;
           margin: 10px 10px 0px 0px;
           padding: 10px;
           border: 1px #000000 solid;
           
         }
         
legend   { padding: 5px;
           margin: 5px 5px 0px 0px;
           color: #000000;
           font-family:Arial, Helvetica, sans-serif;
           font-size: 18px;
           background: #CCCC99;
           border: 1px #000000 solid;
         }

HTML:

<form>
<fieldset>
<legend>Willkommen</legend>
<label></label>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</fieldset>
</form>

Wäre toll wenn Ihr mir da helfen könntet, dass Code dann so gestaltet ist das die Ausgabe vom IE mit dem vom Firefox (so wie es sein soll) identisch ist.

Vielen Dank für Eure Bemühungen!

Gruß
Christian

 

[wedeen]

Hallo,

das ist - wie sollte es anders sein - mal wieder einer der tausend Bugs im IE.
Das kann man aber mit einem kleinen Trick - also einem kleinen Einsatz für den IE - umgehen.
Probier mal folgenden Code:

(Du musst nur Deinen CSS-Code mit diesem hier ersetzen, alles andre kann so bleiben)

fieldset {
        border: 1px #000000 solid;
        background-color: #FFCC00;
        margin: 10px 0;
        padding: 10px;
        }

* html fieldset {
        position: relative;
        padding-top: 30px;
        }
         
legend {
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        background-color: #FFCC00;
        border: 1px #000000 solid;
        padding: 5px;
        margin: 5px 5px 0 0;
        }

* html legend {
        position: absolute;
        top: -21px;
        }

Kannst ja mal bescheid schreiben ob jetzt alles so klappt wie Du es wolltest.

Grüße, Verena

 

[ChristianKl1]

Hi,

vielen Dank, klappt wunderbar

Gruß
Christian