ansaurus

Question

How to center the <legend> element - what to use instead of align:center attribute?

Answer 1

+2 A:

Assuming your markup looks something similar to this:

<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

Your CSS should look something like this:

fieldset {position: relative; }
legend {position:absolute; left:50%; }

Oh Dear... You have chosen probably the most difficult thing in CSS when it comes to cross-browser compatibility. Cameron Adams said it best

Probably the only difficulty in styling semantic forms is the legend tag. It is insufferably variable across browsers. In Mozilla, the legend tag is not left-indented from the body of the fieldset, in IE and Opera it is. In Mozilla, the legend tag is positioned in between the fieldset's border and its content, in IE and Opera it is positioned inside the content. This makes it very hard to move the legend inside the fieldset border, or position it flush to the left of the fieldset, as you get varying effects across browsers

You can read more about what he said at http://www.themaninblue.com/writing/perspective/2009/04/30/ their is also a great article at http://articles.sitepoint.com/article/fancy-form-design-css on how to style forms.

My solution to the problem would be to remove the fieldset border completley and absolutely position the legend element. The problem with what you want to do is that it is different in every browser.

Tom 2010-10-24 01:54:26

I tried that one earlier, too, and wound up with the text inside of everything.

PolishedTurd 2010-10-24 02:03:51

Ok... Perhaps I could give you a better answer if you showed your code.

Tom 2010-10-24 02:53:51

Your code is close enough to mine. It's a matter of browsers, that's all. Which have you tested this code with?

PolishedTurd 2010-10-24 03:01:49

I originally did it in Chrome, but I went back and tested the code with IE7 and FF2.6 What browser are you using?

Tom 2010-10-24 04:17:03

And it still looks like: -----------Legend text------------ ?

PolishedTurd 2010-10-24 04:44:17

Well, I had no idea what I was getting into here, obviously. It's sounding more and more like I should avoid using that tag altogether.

PolishedTurd 2010-10-24 19:12:12

Answer 2

+2 A:

Legends are notoriously resistant to styling.

One thing you can do is use a heading element instead of legend as that will be much easier to style. This does what you want in FF3 and Safari at least.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<style type="text/css">
h3{
background-color:#FFF;
margin: -1em auto 0;
text-align:center;
width:10%;}
</style>
</head>
<body>

 <form>
<fieldset>
<h3>Person:</h3>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

</body>
</html>

Mark Chorley 2010-10-24 09:54:12

What's that bit about using a heading element instead? What might that look like? I'm assuming it's not pictured as it shows <legend> tags still.

PolishedTurd 2010-10-24 19:10:58

I've changed the code to use a heading element

Mark Chorley 2010-10-24 20:44:16

Sure you could use the a header element but it would not give you the ----------Effect------------ you were looking for. Also you should note that the legend element defines a caption for the <fieldset>, <figure>, and the <details> elements. While the The <h1> to <h6> tags are used to define HTML headings. I would suggest if you do choose the non semantic approach to at least place the heading outside of the <form> tag.

Tom 2010-10-25 01:53:07

This code does give the desired visual effect (at least as far as I tested it: FF3 and Safari on Mac). I agree it's not as good semantically as <legend>, but it's not non semantic. The HTML spec says: "A heading element briefly describes the topic of the section it introduces."

Mark Chorley 2010-10-25 07:20:34

Answer 3

A:

You could use and around the whole thing. Toms answer is probably the best though.

Blake 2010-10-25 01:11:54

ansaurus

tags:

views:

answers:

How to center the <legend> element - what to use instead of align:center attribute?

related questions