[CSS :first-letter pseudo] Vreemd behavior in Firefox

[Urk]

Cascading Stylesheet:

.required:first-letter {text-decoration: underline;}

Bovenstaande code werkt prima in IE6, IE7 en Opera wanneer ik de .required class aanroep in een <label> tag.
Echter bij Firefox hangt de underline onder de eerste letter vreemd onder de letter, er zit namelijk meer ruimte tussen dan wanneer je bijv. het hele woord underlined.
Is dat een bug in FF?

Meer informatie: http://www.w3schools.com/css/css_pseudo_elements.asp

Een workaround wat trouwens wel werkt zodat Firefox het goed rendert is:

Cascading Stylesheet:

.required:first-letter {border-bottom: 1px solid black; padding-bottom: 1px;}

Maar dan gaat het bij Opera weer niet goed

[ Voor 27% gewijzigd door Urk op 13-04-2007 14:20 ]

[Blaise]

Verplichte velden aangeven met alleen CSS is ontoegankelijk, dus je kan eventueel dit hele probleem omzeilen door verplichte velden op een andere manier aan te duiden, bijvoorbeeld met een een plaatje met alt="required" of het strong element.

Ik heb geen oplossing voor je probleem. Misschien een achtergrondplaatje als streepje, maar dat is omslachtig en kost je een extra HTTP request.

[JJvG]

Misschien een loze kreet, maar is "required" als class-naam wel mogelijk? Ik kan me zo voorstellen dat dit een keyword is dat voor problemen kan zorgen. Ik heb er even op gezocht bij W3C, kon er niets over vinden, maar misschien dat je het kunt proberen...

Just my 2 cents...

[Blaise]

Dat lijkt me niet. De W3C validator zegt er niets over (maar dat ding valideert niet alles) en ik kan me niet herinneren er ooit iets over gelezen te hebben.

[crisp]

Nee, er zijn geen regels noch beperkingen mbt classnames (behalve syntactisch dan) (hoewel WA1.0 aan een aantal classnames wel semantische betekenis toekent).

[ Voor 8% gewijzigd door crisp op 13-04-2007 18:16 ]

[frickY]

Probeer de line-height eens te forceren?