[css] gestylde label maar hoe nu met de radiobuttons

[IschaGast]

Ik ben heel leuk bezig met een formulier om die netjes te stylen met een fieldset, legend en dergelijk zoals in dit artikel:
http://www.stuffandnonsen...trimming_form_fields.html
http://www.stuffandnonsen...imming_form_fields_3.html

Nu heb ik alleen een probleempje. Doordat ik de label heb gestyled en een width heb meegegeven ziet het er heel mooi en netjes uit alleen als je in je form ook radiobuttons hebt met een label om de text dan krijg je toch echt problemen.

Is er een manier om dit alles mooi op te lossen?
Ik kan de label om de text van de radiobuttons weghalen dat is het makkelijkste maar ik was vooral benieuwd of er ook een oplossing is met wel de label om de text van de radiobuttons?

Of is het gewoon zo dat waneer je een form hebt met radiobuttons je nooit de label kan stylen en het toch op een andere manier zult moeten dan, alleen wat is dan de meest nette oplossing?

Cascading Stylesheet:

label {
    float: left;
    width: 111px;
}

span {
    float: left;
    width: 111px;
}

HTML:

<div>
  <label for="voorletters">Voorletters</label><input type="text" name="voorletters" id="voorletters" />
</div>
<div>
  <span>Geslacht</span>
  <input type="radio" name="geslacht" id="m" value="M" />
  <label for="m">Man</label>
  <input type="radio" name="geslacht" id="v" value="V" />
  <label for="v">Vrouw</label>
</div>

[RM-rf]

ik zou neigen naar:

HTML:

<div class="radiobuttons">
  <span>Geslacht</span>
  <input type="radio" name="geslacht" id="m" value="M" />
  <label for="m">Man</label>
  <input type="radio" name="geslacht" id="v" value="V" />
  <label for="v">Vrouw</label>
</div>

Cascading Stylesheet:

DIV.radiobuttons LABEL {
   float: none;
}

[IschaGast]

Lijkt inderdaad te werken als ik het zo kaal in een documentje gooi maar nog niet in mijn eigen css files moet ff kijken waar ik misschien nog iets heb staan wat niet helemaal wil meewerken.

[IschaGast]

Sjonge jonge wat een geklooi, doordat deze regel (zie hieronder) boven de radiobuttons zat zag het er in eerste instantie toch nog niet helemaal lekker uit. Nu heb ik de volgende css toegevoegd en het werkt:

Cascading Stylesheet:

div.voorletters label {
   float: left;
}

HTML:

<div class="voorletters">
  <label for="voorletters">Voorletters</label><input type="text" name="voorletters" id="voorletters" />
</div>

[Verwijderd]

ben met precies hetzelfde bezig.
in principe is het hele formulier een fieldset met daarin (schematisch)

HTML:

<label /><input /><br />

alleen bij radiobuttons zit je idd met een probleem (ook om het visueel goed te doen)

voor een radiongroup heb ik dat rijtje nu als (schematisch)

code:

<span />
<fieldset>
  <radio /><label /><br />
  <radio /><label /><br />..etc..
</fieldset><br />

die br's zijn overigens voor non css browsers, alles staat alles op een rijtje
in de css hebben ze nog een clear: both;