[thelist] fieldset borders and legend styling

Austin Harris austin at dotmail.co.uk
Tue Dec 19 15:25:16 CST 2006

Having just spent the day styling forms, (the fun we have eh?) I can agree with the problems arrising...

Legends are a particular issue, I found through trial and error that putting the legend text in a span sorted some issues out. (A div around it doesn't give valid code). ie 
<legend><span>some text</span></legend>

You can then style to your hearts content, (barring the normal issues of IE versus the world :)


I just spent a few frustrating moments hashing through some CSS form
styling issues, and though the nuances and work-arounds may be common
knowledge to many, they weren't to me.  Maybe this will help someone
else or save them from ripping out a few of their own precious


<tip author="John DeStefano" type="CSS" title="Styling form fieldsets
and legends">
<fieldset/> and <legend/> tags help add accessibility and organization
to forms, but styling them can be frustrating.  Browsers tend to
display a legend as part of a fieldset, so if a fieldset has a border
(as most do), that border may appear to strike through the legend
text.  In fact, it may do this inconsistently: I had one form with
four fieldsets, and this strike-through effect appeared in only two of
the four, even though they were all tagged in exactly the same manner.

You can avoid this by including a legend{} style to your CSS that adds
padding to the left and right sides of tits content.  In addition, you
may opt to clearly mark the legend in its own box within the confines
of the fieldset with "border" and "background" properties, like the
legend {
        border:#BBBDD6 solid 1px;
        padding:1px 10px;

This places the legend text within a box that gets centered
horizontally along the fieldset border.

Speaking of the fieldset border: you may notice an inconsistency in
the presentation of the border line, in which it appears in some areas
and not in others.  Again, of four fieldsets I had within one
particular form, three appeared correctly on all four sides, and one
appeared without a bottom border.  I found that setting the border
size to too small of a value (such as something below "0.1em") caused
this inconsistent behavior.   Setting the border width value to "1px"
results in a border line that is quite thin and is usually a safe bet.


* * Please support the community that supports you.  * *

For unsubscribe and other options, including the Tip Harvester 
and archives of thelist go to: http://lists.evolt.org 
Workers of the Web, evolt ! 

More information about the thelist mailing list