On Mar 7, 2006, at 2:12 PM, Lachlan Hunt wrote:

I'm looking for a way to style a legend element with a background that spans the whole width of the page. I originally used a regular heading (h3) because I knew the design would have difficulty with fieldset/legend, but the after the accessibility review it was requested that we use fieldset/legend anyway and I need to get the design as close as possible.

By default, legends are only as wide as they need to be to fit the text and there seems to be little one can do about this in current browsers. I came up with one solution using a thick top border on the fieldset behind the legend element which works in Firefox, but it doesn't quite work in IE because it leaves a small white gap between the legend and fieldset border. I currently don't have access to any other browsers for testing, but I'd like it to work fairly well in at least all major browsers.

The following test case demonstrates how I want it to look and my current solution that works in Firefox. Both examples in the page should look roughly identical


On OS X 10.4.5
Firefox 1.5, Camino - latest nightly trunk build, iCab 3.0, Safari 2.03 and WebKit nightly build, Opera 9 tp2, all look the same.
and so does Konqueror/KDE 3.5 running on top of OS X .

IE 5.2 Mac has a small 1px white border around the legend, barely visible given your light background-color. There is also some white- space under the legend (padding on fieldset, you won't get rid of it).

Philippe Wittenbergh

The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help

Reply via email to