Fieldset CSS probleem

[Anoniem: 30961]

Ik heb de volgende XHTML-code:

HTML:

<fieldset>
<label for="bedrijfsnaam"><span>Bedrijfsnaam</span><input type="text" id="bedrijfsnaam" name="bedrijfsnaam" /></label>
<label for="adres"><span>Adres</span><input type="text" id="adres" name="adres" /></label>
<label for="pcwp"><span>Postcode/Plaats</span><input type="text" id="pcwp" name="pcwp" /></label>
<label for="additional"><span>Informatie</span><textarea id="additional" name="additional"></textarea></label>
</fieldset>

En de bijbehorende CSS:

Cascading Stylesheet:

label,label span{ display:block; padding-bottom:.25em; }
label{ float:left; width:100%; }
label span{ float:left; width:45%; text-align: right; }
fieldset{ border:none; }
fieldset input, fieldset textarea{ float:right; width:45%; text-align: left; border: 1px solid #AEAEAE; }

Nu ziet mijn uitvoer er als volgt uit:



Dus de vierde rij wordt iets naar beneden geschoven (het textarea), maar alleen in IE9.
Iemand al hetzelfde probleem gehad?

Please help me!

[EricBruggema]

is dit alles CSS of heb je nog meer?

[OkkE]

Ik zou de <input> uit je <label> halen, eigenlijk alleen Checkbox en Radio zou ik daar in zetten.

Is het alleen in IE9, of in alle IE's? Je zou verder alle elementen eens een background-color kunnen geven, om te zien of ze wel precies doen wat je verwacht.

En welke DOCTYPE gebruik je?

[ Voor 5% gewijzigd door OkkE op 18-05-2011 13:06 ]

[R4gnax]

In plaats van floats kun je dit soort dingen beter met een absoluut gepositioneerd label doen en daar de input onder door duwen. Geen uitlijningsproblemen met floats die niet naast elkaar passen en geen gedoe met een clearfix.

Cascading Stylesheet:

label,label span{ display:block; padding-bottom:.25em; }
label{ width:100%; }
label span{ position: absolute; width:45%; text-align: right; }
fieldset{ border:none; }
fieldset input, fieldset textarea{ margin-left: auto; width: 45%; text-align: left; border: 1px solid #AEAEAE; }

[Bosmonster]

En daarnaast, leer jezelf aan expliciete associatie te gebruiken met je labels, ipv impliciete.

M.a.w. gebruik het for-attribuut, ipv je form-element in je label te wrappen.

[erwin85]

Wat ik zelf vaak doe bij formulieren is alles in een ul zetten. Dus dan krijg je zoiets.

code:

<ul>
    <li><label>naam</label>
    <input type='text' />
    </li>
</ul>

[ Voor 3% gewijzigd door erwin85 op 19-05-2011 18:40 ]

[RobIII]

erwin85 schreef op donderdag 19 mei 2011 @ 18:39:
Wat ik zelf vaak doe bij formulieren is alles in een ul zetten.

Semantiek anyone? Dan kun je nog beter een dl/dt/dd gebruiken, en zelfs dat is al bron van vele discussies

[erwin85]

RobIII schreef op donderdag 19 mei 2011 @ 18:43:
[...]

Semantiek anyone? Dan kun je nog beter een dl/dt/dd gebruiken, en zelfs dat is al bron van vele discussies

Je kan het op heel veel manieren doen ja.

[BtM909]

Nee, je bedoelt:

Je kan het op heel veel manieren fout doen ja.

[Bosmonster]

Een UL (of liever een OL) lijkt me niks mis mee voor een formulier. Uiteindelijk gaat het om een lijst van elementen (die je bij voorkeur in vaste volgorde afwerkt). Het label geeft al de associatie aan tussen tekst en veld, dus daar ook nog eens een DL voor gebruiken is dubbelop.

Een table gebruiken lijkt fijn (die suggestie komt af en toe voorbij als semantisch correct), maar in de praktijk wordt een blinde daar niet blij van, aangezien je bij tabellen veel onnodige extra informatie toegespeeld krijgt. Een OL werkt in de praktijk het snelste voor hen.

Semantisch correct is in de praktijk niet altijd de meest toegankelijke oplossing.

[ Voor 48% gewijzigd door Bosmonster op 20-05-2011 14:10 ]

[Herko_ter_Horst]

Uiteindelijk is alles een lijst van elementen, alles staat namelijk achter elkaar in de HTML. Dat maakt nog niet dat alles zomaar list-semantiek heeft. ul/ol is daarom geen mooie semantische oplossing voor een formulier.

Tabel lijkt me ook niet correct. Ik kan me voorstellen dat je daar met database-tabellen in het achterhoofd (waar die form-data vast in terecht komt) op uit komt, maar een formulier vind ik geen goed voorbeeld van tabulaire data.

form, Fieldset, label, input zijn de juiste semantische elementen en deze bieden ook voldoende aanknopingspunten voor CSS om het goed te stylen.

[ Voor 48% gewijzigd door Herko_ter_Horst op 21-05-2011 18:25 ]