[XHTML/CSS] 100% breedte op legend tag

[MarkvE]

Ik krijg het maar niet voor elkaar om een legend tag op 100% breedte te krijgen binnen een fieldset (dus even breed als de fieldset zelf).

Dmv de volgende CSS lukt het vreemd genoeg niet:

code:

legend
{
    font-family: "trebuchet ms", "times new roman", sans-serif;
    font-weight: bold;
    color: #fff;
    background-color: #c00;
    padding: 5px;
    margin: 0;
    border: 0;
    display: block;
    width: 100%;
}

En de bijbehorende HTML code:

code:

<form method="post" action="">
    <fieldset>
        <legend>Formulier</legend>
        <ul>
            <li><label for="input">Invoer</label></li>
            <li><input type="text" name="input" id="input" value="" /></li>
        </ul>
    </fieldset>
</form>

Ik heb via de search niks kunnen vinden omdat die momenteel geen verbinding met de database kan maken en via Google heb ik alleen dit topic kunnen vinden.

[ Voor 29% gewijzigd door MarkvE op 17-08-2004 15:46 ]

[Genoil]

ter info: in IE6 werkt het wel zoals je wilt.

[ Voor 3% gewijzigd door Genoil op 17-08-2004 15:59 ]

[OkkE]

Hier werkt het ook, misschien ligt het aan het doctype dat je gebruikt? Hier met xhtml 1.0 trans. werkt het goed. Dwz ik krijg een rode balk die tot een paar pixels voor de hoekjes stopt.

[MarkvE]

Het werkt nu dus wel in IE 6.0, maar niet in Firefox (0.9.3). Dus wat dat betreft klopt er iets niet, aangezien ik Firefox meer vertrouw dan IE.

[Rickets]

Cascading Stylesheet:

legend
{
  float:left;
  width: 100%;
}

En dan verder stylen. Vergeet alleen niet clear:both toe te passen op het eropvolgende element

[MarkvE]

Hé, bedankt. Dat werkt

[Genoil]

ja dat 'werkt' wel maar de legend hangt (in FF) onder de fieldset-bovenborder ipv dattie er midden bovenop zit (in IE)

[ Voor 12% gewijzigd door Genoil op 17-08-2004 16:25 ]

[Verwijderd]

http://bugzilla.mozilla.org/show_bug.cgi?id=205574
http://bugzilla.mozilla.o...cgi?id=147716&action=view

Het komt erop neer dat het W3C voor formulieren nog niet heeft vastgelegd hoe deze gestijld kunnen worden. (Bedenk bijvoorbeeld dat LEGEND niet perse het eerste element binnen FIELDSET hoeft te zijn, maar wel altijd op dezelfde plek terecht moet komen en dat LEGEND een ALIGN attribuut heeft dat ook nog ondersteund moet worden (er is geen CSS equivalent).

[Verwijderd]

Genoil schreef op 17 augustus 2004 @ 16:24:
ja dat 'werkt' wel maar de legend hangt (in FF) onder de fieldset-bovenborder ipv dattie er midden bovenop zit (in IE)

Cascading Stylesheet:

legend {
    float:left;
    width: 100%;
    height:20px;
}

Misschien?