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:
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.