Centering Legend Of a Fieldset

hi, i've looked around but not found a solution yet.

align="center"

HTML:

works but only in FF.

anyone know of a solution which is cross browser compatible.

cheers

 

Simply use the center tag, something like this, it definitely works.


<center>Your Fieldset Here</center>

 

But since <center> tags are deprecated for causing diabetes in old people... we won't use it : )

It does? Shit, I've been looking for that. FF is the one browser who CAN'T do legends right. Usually you can't position them at all.

For the other browsers, you could shove a span inside
<legend><span>I AM LEGEND</span></legend>

and make the legend display: block and try text-align: center;

Lemme check this first...

Hm, nope.

This works in all other browsers:

legend {
  display: block;
  width: 100%;
  text-align: center;
}

Code (markup):

But Gecko is stubborn and flat-out wrong here. I've seen solutions for other positioning with spans but I couldn't get this one to work.

While normally I think dirty hacks for normally-compliant browsers is wrong, I haven't seen anything better than this troep, which I have sadly needed to use to force Gecko into compliance:

/*FF is such a crap browser*/
@-moz-document url-prefix() { 
  legend span { 
    position: absolute;
    left: 40%; 
  } 
}

Code (markup):

If you know the width of the text, you could center it better with
left: 50%;
then
margin-left: -halfthewidth;

I couldn't get text-align: center to work at all in Firefox. Do you have a doctype? Possibly your Firefox is in Sub-Standards Mode.

 

You mis-applied the CSS there stupid kitty, and missed the point of the span.

You want legend for accessibility reasons and semantic markup, but styling it is always a stone cold bitch. Solution?

Let's say this was your form:

<form action="whatever.php" id="whatever">
	<div class="fieldsetWrapper"><fieldset>
		<legend><span>User Info</span></legend>
		<label>
			Your Name:
			<input type="text" name="name" id="whateverName" />
		</label>
		<label for="whateverPhone">
			Phone Number:
			<input type="text" name="phone" id="whateverPhone" />
		</label>
	</fieldset></div>
</form>

Code (markup):

You'll notice I also slap a div around the fieldset - this is for the same reason as the span inside the legend, all the different browsers handle those elements differently, so screw it, let's handle it ourselves.

The best bet for centering that legend goes something like this:

form,fieldset,legend {
	margin:0;
	padding:0;
}

fieldset {
	border:0;
}

.fieldSetWrapper {
	position:relative;
	padding-top:1.3em;
}

legend span {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	font:bold 1em/1.3em arial,helvetica,sans-serif;
}

Code (markup):

The only real 'problem' with that is you can't have it dynamically wrap to multiple lines thanks to the absolute positioning, but really if your legend is long enough to wrap to multiple lines, it's probably not a good legend.

Also means you aren't using the default styling - but one can assume if you aren't going with the default fieldset appearance, you are likely overriding the other stuff too.

But yeah, you want to apply custom styling to either fieldset or legend and have it work cross browser, you are pretty much stuck adding extra wrappers, nulling the margins, padding and borders on fieldset, and pretending fieldset and legend don't exist. You need to use the elements for accessibility and proper semantics, but they SUCK when it comes time to style them since the HTML/CSS specifications don't actually say how they are supposed to behave, and as always when the specs don't say the browser makers do what they do best "We'll do it this way and to hell with what anyone else is doing".

Just like every other blasted form element.

 

You don't need the wrapping div. The span is necessary because you can't abso-po the legend itself, but usually sometimes on a good day when the wind is just right, you can position a child of the span.

Instead of the wrapping div, put pos:rel on the fieldset.

http://www.tyssendesign.com.au/articles/css/legends-of-style-revised/

However even this solution hasn't stopped other problems from appearing when multiple fieldsets appear... now the problem is Opera, but I like to think of it as "Opera is having a problem dealing with the bullshit extra retard code we've added to please Gecko". Why I try NOT to abso-po the legend if I'm just centering... I'd rather send nasty ugly code to Gecko and let smarter browsers have nicer code.

 

Unless you null the margins,padding and border on the fieldset (and even then, thanks Safari and IE6!), you'll find it does NOT respond properly to the positioning and will be off by as much as 1EM cross browser.

So you DO need the extra div wrapping each fieldset - fieldset CANNOT be trusted... just like LEGEND.

 

Hm, Paul O'B agrees with you:

The crusties have won me over again. Fooey : )