CSS and <fieldset> / <legend> issue

Trying to style a fieldset with a legend.

Essentially, I want to remove the border from the fieldset and make it appear as a header with a blue bar as the background. At present I've resorted to using custom <h1> tags.

When I style the <legend> tag, I can't seem to get it to stretch across the page. It acts like a group header and refuses to expand to more than a minimal width to accommodate text.

Anyone know how I can fix this?

Perhaps putting the field inside its own div and making the div width 100%, or the percentage that you want?

fieldset { border: 0; }

legend { width: 100%; background-color: blue;}

That what you want? Sounds like your description anyway!

Edited by deleted (Thu 03-Aug-06 14:31:34)

That's what I tried... :/

Well it worked on my machine, or at least it did what I expected you were after from reading your post...

What exactly does it do on your machine, and how does it differ from what you want?

I was after having a blue background to it, and have the <legend> spanning the entire width of the containing element.

My code - as far as I can remember (it's gone now) went something like this:
legend
{
width: 100%;
background-color: blue;
color: white;
}

The fieldset had it's border removed, as well.

Instead of going across the entire container element, it was only as wide as the text inside it.