I'm trying to use a <legend>
as a title inside a <fieldset>
.
In browsers other than IE, the <legend>
is positioned on the top border of the <fieldset>
, with the text perfectly centered on the line.
I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>
.
Here's the CSS I have so far.
fieldset legend {
margin: 0;
padding: 0;
position: static;
border: 0;
top: auto; left: auto;
float: none;
display: block;
font-size: 14px;
line-height: 18px;
}
But the legend is still perfectly centered on the line.
Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.
Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)
Update
I'll leave this question open for another week just in case someone HAS been able to style <legend>
elements. If no solutions are found I'll accept @jnpcl's answer.
Definition and Usage. The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
The legend tag is used to define the title for the child contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.
The :default CSS pseudo-class selects form elements that are the default in a group of related elements.
This is enough :
form legend{ float: left; width: 100%; }
https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp
Simply put, it is not possible across browsers to position the LEGEND element in a Fieldset.
Workaround: wrap the text from <legend>
in a <span>
, then reposition the <span>
.
I've just styled my <legend>
's by giving them a position: absolute; top: -25px;
and the the parent <fieldset>
with a position: relative; padding-top: 30px;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With