Centerizing Legend Text Problem

@UltimaterMar 30.2005

I can’t seem to centerize the text inside of my LEGEND tag.
Is it possible to make it ~~[color=#0000DD]~~float[/color] to the center?

[code=html] <STYLE> fieldset{ display: inline; } LEGEND{ align: center; text-align: center; } .parent_legend{ margin-bottom: 15px; } </STYLE> <fieldset> <legend class=”parent_legend”>Window</legend> <fieldset> <legend>Pick one </legend> <input type=”text” value=”window” class=”main_level”> </fieldset> <fieldset> <legend>The value </legend> <input type=”text” value=”window” class=”main_level”> </fieldset> <br> </fieldset> [/code]

to post a comment

CSS

18 Comments(s) _↴

@UltimaterauthorApr 01.2005 — #If my code is too intimidating then refer to this:

[code=html]
 <STYLE>
 legend{
 /* Need something to centerize */
 }
 </STYLE>
 <fieldset style="display: inline;">
 <legend>Pick one</legend>
 <input type="text" value="window">
 </fieldset>
 [/code]

If I give LEGEND a style of FLOAT: RIGHT; then it floats to the right.

But I want it to goto the center. This just shows that the text is movable.

So is there a way to bring it to the center?

Anybody?

@NogDogApr 01.2005 — #Interesting question. After 30 minutes of playing around with it, I've found no solution. ?

@fredmvApr 01.2005 — #First things first, you want to kick the browser into standards mode:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;

Secondly, I think this might be a step in the right direction:legend { margin-left: 400px }Works (sort of) in Firefox, anyway.

@ray326Apr 01.2005 — #When you start pushing it around IE blanks the fieldset border. I don't think there's a good solution. My take was the spec refers to the fieldset/legend as non-presentational so maybe visual fiddling with it isn't the right thing to do anyway.

@fredmvApr 01.2005 — #Good call Ray. Does seem kinda sketchy.

@UltimaterauthorApr 01.2005 — #Would it be possible to accomplish my goal by possibly using a second TAG?

e.g. <legend><center>Pick one</center></legend>

or something similar?

@BonRougeApr 01.2005 — #No, I don't think so - apart from the fact that <center> is deprecated and you shouldn't be using it, if you try some of the things mentioned above, you'll see that that the text doesn't sit on top of the line - there is no more line. If you move the text, you don't reveal more of the line - it's not there - it just looks like a complete line.

You learn something new every day (I was playing around with this for a while).

@toicontienApr 01.2005 — #It also may be that the standards define a LEGEND tag as a new document flow. I ran into this sort of problem about six months ago. To position the legend tag, most browsers actually create the legend tag as a layer, or using absolute positioning. I've tried setting the position to static and playing around with the CSS properties to no avail. It's got some properties set that are cemented in. No changing them in most browser.

The Firefox DOM Inspector says the LEGEND tag is static positioning, but the border of the fieldset tag doesn't display where I think it should. There's also no negative top margin on the LEGEND tag.

It's a very strange little beast.

@UltimaterauthorApr 01.2005 — #Hmm... well, padding and margin work.

But how am I supposed to "detect" the amount to move the legend?

I can use an [color=royalblue]expression()[/color] to push it the correct amount of spaces.

Is there a method that can be used to detect the width of a fieldset?

(Not the default width but the width after it expands)

@_lt_Eddie_gt_Apr 02.2005 — #

<i>
 </i>&lt;legend align="center"&gt;Whatever&lt;/legand&gt;

Works in all browsers...

@DaveSWApr 02.2005 — #align has also been deprecated, although you are correct that it appears to work in all browsers.

http://www.w3.org/TR/html4/interact/forms.html#h-17.10

I take it you mean the actual text in the border?

It seems to move easily in IE but not firefox.

@_lt_Eddie_gt_Apr 02.2005 — #The LEGEND is intended for accessibility devices to describe the fieldset contents and as such isn't really open ([i]within the DOM[/i]) for style and position manipulation. You can't set the width either so you can't use margins set to 50% then deduct half the width to reliably centre the text. Although dropped, "align=center" is the only cross browser way. Is this a particular aesthetic necessity? It may be worth using display:none on the legend and marking up a proper heading within the fieldset instead.

@FangApr 02.2005 — #Take a second look; 'center' is not allowed, it will never validate.

@_lt_Eddie_gt_Apr 02.2005 — #Take a second look; 'center' is not allowed, it will never validate.[/QUOTE]
HTML 4.01 Trans won't validate it, you're right, but that doesn't stop it being cross-browser. Again, better to try alternative methods of displaying a title as I mentioned above. If it's cracked without expr then please post the solution.

@FangApr 02.2005 — #LEGEND Attribute definitions

align = top|bottom|left|right [CI]

Deprecated. This attribute specifies the position of the legend with respect to the fieldset. Possible values:

 * top: The legend is at the top of the fieldset. This is the default value.
   * bottom: The legend is at the bottom of the fieldset.
   * left: The legend is at the left side of the fieldset.
   * right: The legend is at the right side of the fieldset.

[/QUOTE]
It's not part of the W3C recomendations

@_lt_Eddie_gt_Apr 02.2005 — #It's not part of the W3C recomendations[/QUOTE]
Still cross-browser.

@_lt_Eddie_gt_Apr 02.2005 — #I've nearly got it using a cross between CSS "word-spacing" and using a non-breaking space next to the LEGEND text but it's still not 100%. I've drawn a blank using CSS. Looks like script is all that's left.

@UltimaterauthorApr 03.2005 — #

<i>
 </i>&lt;legend align="center"&gt;Whatever&lt;/legand&gt;

Works in all browsers...[/QUOTE]
SWEET! that-one worked! Thanks a bunch [color=royalblue]<Eddie>[/color],

you gave me an ideal alternative I was looking for.

Also in #CSS _↴

Overlay an Image?where do i check for Pseudo element and hover , active of a given element in mozilla positioning?

Success!

Help @Ultimater spread the word by sharing this article on Twitter...

Tweet This

Centerizing Legend Text Problem

18 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Centerizing Legend Text Problem

18 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #CSS _↴