Why won't my <legend> element display inline?

html css styles legend fieldset
Mild Fuzz picture Mild Fuzz · Apr 28, 2011 · Viewed 10.6k times · Source

I am trying to apply display: inline; to the <legend> element in my <fieldset> element, so that the following <span> will follow on the same line, but my CSS is having no effect.

JSFiddle

EDIT

I have no control over the HTML; I can only edit CSS

Answer

Boris Zbarsky picture Boris Zbarsky · Apr 28, 2011

Legends are special. In particular, their default rendering can't be described in CSS, so browsers use non-CSS means of rendering them. What that means is that a statically positioned legend will be treated like a legend and be separate from the actual content of the fieldset.

The weird doesn't end there; if you reverse the order of the span and the legend, the legend will still show up on top in most browsers (but not in Opera, apparently).

Related questions

CSS align images and text on same line

I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line …

Read More
How do I style (css) radio buttons and labels?

Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels? Also let me state that I use the yui …

Read More
Removing newline after <h1> tags?

I am having a problem with removing linebreaks after the <h1> tag, as everytime it prints, it adds a line break straight after it, so something like <h1>Hello World!</h1> <h2>…

Read More