I can't seem to centerize the text inside of my LEGEND tag.
Is it possible to make it float to the center?
<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>If my code is too intimidating then refer to this:
<STYLE>
legend{
/* Need something to centerize */
}
</STYLE>
<fieldset style="display: inline;">
<legend>Pick one</legend>
<input type="text" value="window">
</fieldset>
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?Interesting question. After 30 minutes of playing around with it, I've found no solution.
First things first, you want to kick the browser into standards mode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Secondly, I think this might be a step in the right direction:legend { margin-left: 400px }Works (sort of) in Firefox, anyway.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.Good call Ray. Does seem kinda sketchy.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?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).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.Hmm... well, padding and margin work.
But how am I supposed to "detect" the amount to move the legend?
I can use an expression() 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)<legend align="center">Whatever</legand>
Works in all browsers...align has also been deprecated, although you are correct that it appears to work in all browsers.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/interact/forms.html#h-17.10">http://www.w3.org/TR/html4/interact/forms.html#h-17.10</a><!-- m -->
I take it you mean the actual text in the border?
It seems to move easily in IE but not firefox.The LEGEND is intended for accessibility devices to describe the fieldset contents and as such isn't really open (within the DOM) 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.Take a second look; 'center' is not allowed, it will never validate.Take a second look; 'center' is not allowed, it will never validate.
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.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.
It's not part of the W3C recomendationsIt's not part of the W3C recomendations
Still cross-browser.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.<legend align="center">Whatever</legand>
Works in all browsers...
SWEET! that-one worked! Thanks a bunch <Eddie>,
you gave me an ideal alternative I was looking for.
Is it possible to make it float to the center?
<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>If my code is too intimidating then refer to this:
<STYLE>
legend{
/* Need something to centerize */
}
</STYLE>
<fieldset style="display: inline;">
<legend>Pick one</legend>
<input type="text" value="window">
</fieldset>
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?Interesting question. After 30 minutes of playing around with it, I've found no solution.
First things first, you want to kick the browser into standards mode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">Secondly, I think this might be a step in the right direction:legend { margin-left: 400px }Works (sort of) in Firefox, anyway.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.Good call Ray. Does seem kinda sketchy.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?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).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.Hmm... well, padding and margin work.
But how am I supposed to "detect" the amount to move the legend?
I can use an expression() 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)<legend align="center">Whatever</legand>
Works in all browsers...align has also been deprecated, although you are correct that it appears to work in all browsers.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/interact/forms.html#h-17.10">http://www.w3.org/TR/html4/interact/forms.html#h-17.10</a><!-- m -->
I take it you mean the actual text in the border?
It seems to move easily in IE but not firefox.The LEGEND is intended for accessibility devices to describe the fieldset contents and as such isn't really open (within the DOM) 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.Take a second look; 'center' is not allowed, it will never validate.Take a second look; 'center' is not allowed, it will never validate.
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.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.
It's not part of the W3C recomendationsIt's not part of the W3C recomendations
Still cross-browser.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.<legend align="center">Whatever</legand>
Works in all browsers...
SWEET! that-one worked! Thanks a bunch <Eddie>,
you gave me an ideal alternative I was looking for.