Floating legends in Firefox. Fail.

Published 5 February 08 by Justin French, 1 comments

So I was trying to get a legend inside a fieldset to float left, so that I could float some radio inputs against it for a pretty standard horizontal form layout.

Works fine in Safari, won’t do it in Firefox. Replacing the legend with a div or a p or pretty much any block level element works, but I’m trying to be semantic if possible,

Finally, I search Bugzilla, and woop, there it is. The built-in browser stylesheet uses !important in two of it’s declarations:

legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static ! important;
  float: none ! important;
}

!important is the necessary evil of CSS, but I’m pretty sure it has no place in a base browser stylesheet (upon which all author and user stylesheets cascade).

So I started experimenting:

• nesting a span inside the legend and styling that didn’t work out
• nesting a div inside the legend and styling that worked in Firefox, but broke Safari
• wrapping the legend in a div with styling worked in Safari, but no love from Firefox

And then Grant reminds me that you’re supposed to be able to override !important styles with new !important styles if you match (or better) the specificity of the rule. Tried that, still no love from Firefox.

So this is about the point where I assume there’s something special going on in Firefox, or something swept under the carpet, turn to the wider internet for help, and probably use something less semantic like a h2 or a p.

Any ideas?