[css-d] Styling fieldset legends
I have this basic code, with these basic styles. (sorry can't link the actual
example, because it's a log-in only site.)
formfield
legendIs the sky blue?/legend
input id=skyy name=sky type=radio/label for=skyyYes/label
input id=skyn name=sky type=radio/label for=skynNo/label
/formfield
formfield {
border: none;
padding: 0;
margin: 0;
}
legend {
padding: 0;
}
If you plug this basic example into a browser, you'll see that the legend text
has a different baseline than the label text (like it's superscripted or
something).
I'm trying to get the legend text to drop down to the same baseline as the
label text. But I have no idea how. Firebug isn't giving me any clues as to
the default style that makes it hang out up there anyway. So I'm not sure what
to set. Does anyone have any experience with this?
---Tim Climis
Computer Coordinator
International Services
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling fieldset legends
Climis, Tim wrote: I'm trying to get the legend text to drop down to the same baseline as the label text. But I have no idea how. Firebug isn't giving me any clues as to the default style that makes it hang out up there anyway. So I'm not sure what to set. Does anyone have any experience with this? Legends are buggy to style in nearly all browsers. By default, they tend to sit vertically centered on the border of the fieldset element. Many styles simply won't work on the legend tag. For some real fun, try figuring out how to add x-browser-safe word wrapping to a long legend. The best advice I've seen is to replace the legend with a header tag and that tends to be the solution I employ as well. Approximate placement of the legend/fieldset relationship: +--[ LEGEND ]--+ | FIELDSET | | | +--+ Hope it helps. --Bill -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.com -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
