'Center'ing a fieldset's legend

[design-is]

Hi all

Just want to check something:

I've tried all CSS methods I can think of to centrally align a legend at the top of a fieldset, but whilst they seem to work on Safari, they fail to make any difference in Firefox.

So, I've resorted to using <legend align="center">. Just wondered if anyone else had come across this issue and whether they managed to resolve it?

Thanks

Doug

 

[paulbi]

Try this...

If you really want to use CSS then use this...

<style type="text/css">
fieldset 
{
	width:200px;
}
legend
{
	margin-left:65px;;
	width:70px;
	text-align:center;
}
</style>
<fieldset>
    <legend>some text</legend>
    <div>
    Some text
    </div>
</fieldset>

the only down side I can see to this approach is that you must know/set the width of the fieldset element. Knowing it allows you to set accurately the left margin (minus half the width of the legend).

I tried it with a setting of margin-left:50% to the legend element (which worked) and then position:relative & left: minus the width of the legend which didn't work.

It seems to be that "positioning" doesn't work with the legend element (never tried until now). oh well.

Hope this helps!?

Cheers,
Paul


Edited to add: <legend align="center"> seems to work very well, so why not just use that?

 

[angelwatt]

I remember finding that the legend tag is very hard to do extensive styling on, and get cross-browser compatibility. I ended up giving up on whatever fanciness that I had been trying. The browsers simply implemented the specifics of how styles effect the legend tag very differently. It's one case where I find it OK to go slightly off semantic HTML if you really want a specific look.

 

[design-is]

Cheers guys, <legend align="center"> it is

I was just checking to see if there was a way to do it with CSS to keep content and presentation separate —*guess you can't win them all!

Eternally grateful

Doug