Fieldset CSS probleem

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

Anoniem: 30961

Topicstarter
Ik heb de volgende XHTML-code:

HTML:
1
2
3
4
5
6
<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:
1
2
3
4
5
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:

Afbeeldingslocatie: http://www.dutchmandesign.nl/fieldsetProblem.jpg

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

Please help me!

Acties:
  • 0 Henk 'm!

  • EricBruggema
  • Registratie: Maart 2007
  • Laatst online: 05-05 09:19
is dit alles CSS of heb je nog meer?

Acties:
  • 0 Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 06-02 08:32

OkkE

CSS influencer :+

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 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Acties:
  • 0 Henk 'm!

  • R4gnax
  • Registratie: Maart 2009
  • Laatst online: 04-07 15:01
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:
1
2
3
4
5
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; }

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 09-07 22:57

Bosmonster

*zucht*

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.

Acties:
  • 0 Henk 'm!

  • erwin85
  • Registratie: Juli 2002
  • Laatst online: 03-07 16:16
Wat ik zelf vaak doe bij formulieren is alles in een ul zetten. Dus dan krijg je zoiets.
code:
1
2
3
4
5
<ul>
    <li><label>naam</label>
    <input type='text' />
    </li>
</ul>

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


Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
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 :P

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

  • erwin85
  • Registratie: Juli 2002
  • Laatst online: 03-07 16:16
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 :P
Je kan het op heel veel manieren doen ja.

Acties:
  • 0 Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Nee, je bedoelt:
Je kan het op heel veel manieren fout doen ja.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 09-07 22:57

Bosmonster

*zucht*

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 ]


Acties:
  • 0 Henk 'm!

  • Herko_ter_Horst
  • Registratie: November 2002
  • Niet online
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 ]

"Any sufficiently advanced technology is indistinguishable from magic."

Pagina: 1