Fieldset Nested in a List Item Bug in Firefox

I ran into this rather odd rendering in Firefox 3.6. I had a fieldset with content following it that was nested inside a list item.

<ul>
  <li><fieldset> ... </fieldset>
      <p>Additional information.</p>
  <li>
</ul>

The odd behaviour became quickly evident when my list bullet would not line up next to the fieldset, as expected. Instead, it lined up with the content that appeared immediately after the fieldset.

Screenshot

I haven't found an easy fix for this except to remove the fieldset entirely. Setting the field set to display:inline or inline-block will do the trick, but at the sacrifice of having your fieldset automatically stretch to the width of the container.

I've tested this in Firefox 3.0 and Firefox 3.6 and the problem exists in both of those browsers. It does not seem to happen in Firefox 4 or any of the other rendering engines like Webkit or Opera.

Published December 14, 2010
Categorized as HTML and CSS
Short URL: https://snook.ca/s/987

Conversation

12 Comments · RSS feed
jen said on December 14, 2010

Would you provide the full example, including the css?

Jonathan Snook said on December 14, 2010

Most indubitably: Exhibit A.

John Rainsford said on December 15, 2010

Interestingly, I came across a similar problem on Support Web Standards
I had several lists with a custom bullet and the code was like
<li><strong>Title of Book</strong> by Author of Book</li>
I set the strong element to display: block which kept the title on the first line and the author on the second. I did this in April and I'm nearly positive I checked it in Firefox at the time and it worked perfect. Then last week I had an email from someone who said the lists were rendering funny and lo and behold, this was how it was rendering.
iput a fix inplace- I didn't have time to investigate further. Perhaps this is linked and maybe it's not limited to fieldsets?

Shane Riley said on December 15, 2010

You could always fix it in the interim with the before pseudo element and some quick styles:

Test case

Jonathan Snook said on December 15, 2010

Nice hack there, Shane. It appears to work just fine.

ynamite said on December 15, 2010

inserting another element right before the fieldset seems to fix the problem, which indicates that the problem is with the fieldset tag itself (or rather the way it's rendered in FF). don't know if that helps.

try this though (code doesn't seem to show up properly):

<ul>
<li><p style="overflow:hidden; height:0; margin:0;">test</p>
  <fieldset>This content is inside the fieldset</fieldset>
  <p style="margin: 0pt;">This content is not inside the fieldset</p>
</li></ul>

If you can't read the above, insert this right before the fieldset:
...p style="overflow:hidden; height:0; margin:0;"...

irrelevant and maybe stupid question, but why would you put a fieldset inside a list item? doesn't make a lot of sense to me. either stick with just the list item or forget the list and use the fieldset

Jonathan Snook said on December 15, 2010

@Ynamite: The form in question was a questionnaire, and thus, each question was in a list item of an ordered list. A question consisted of a set of radio buttons (aka, a set of fields, hence the fieldset). Ultimately, I just removed the fieldset.

Anders said on December 15, 2010

Weird stuff!

Here are two possible solutions:
1) fieldset {display: table-cell;}
2) li:before {display: block; content:"."; overflow:hidden; height: 0; width: 0;}

Henrik Gemal said on December 16, 2010

The issue has been fixed in Firefox 4 which will be out soon

Thany said on December 16, 2010

I doesn't work well, probably because it shouldn't work in the first place. A lit-item is not ment to contain blocklevel elements. Or would you seriously put a table in a list-item just as easily as a fieldset?

My advice is to use the list-item for exactly that: an item in a list. Don't use it for "enumerating" whole objects.

Guillaume B said on December 17, 2010

seems to me that Firefox is ful of bugs. Just take @font-face and their stupid restriction for font hosted on a third party domain...

Sardor said on January 10, 2011

There is no such bug in Opera and Chrome

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.