s suck

Or, to be more precise: browsers implementation of <legend>s suck.

According to the HTML specification both form and fieldsets are block level elements, while legends are inline elements:

Consequently, they should behave as such from a CSS point of view, eg. the following should be presented equal under equal CSS roules:

As you probably know, they aren’t. Fieldsets and legends are styled differently than that div/span-block, and are usually displayed similar to this:

A standard unstyled form rendered by Sarafi 3.1

Which would be just fine if you could shut that up and make ’em behave! Unfortunately that isn’t really possible in any major browser. I’ve devised a test case to test this behaviour and the results aren’t surprising:

  IE 7 IE 8 beta FF 2 FF 3 FF 3.1 beta 3 Opera 9.0 Opera 9.6 Safari 3.1
display:block No No No No No No No No
position:fixed Yes Yes No No No Yes Yes Yes
position:absolute Yes Yes No No No Yes Yes Yes
float No Yes No No No Yes Yes Yes
height, width Yes Yes No No No Yes Yes Yes
margin, padding No Yes No No No Yes Yes Yes

The most disturbing failure is that no browser displays legends marked with display:block as proper block elements, but rather as inline-block elements. Thus, strictly speaking, almost all of the succeeding test cases fail as well since they rely on being displayed as block. I’ve tried to ignored these subsequent errors, however.

This rather disturbing behaviour and lack of standard compliance leaves us all to often with no other option than to use much less semantic elements.

Possibly related:'; related_posts(); } ?>