Set the 100% width of the "legend" to FF
I don't believe not. Firefox 3.5 installs the following legendary style:
width: -moz-fit-content !important;
which, thanks to "important", is impossible to override ( min-width
and position
equally affected).
display
is used by default inline
, but you can set it to block
and nest in it <span>
, which can then be set to display: block; width: something;
. But not 100% as it depends on the width of the legend (gah). The only way I can truly get 100% is the relative positioning of the box and the absolute position of the span inside the legend with left: 0; width: 100%;
.
(which is very ugly and potentially fragile.)
<legend>
is always a tricky styling element in many browsers: its typical default rendering cannot be done with plain CSS, so browsers cheat in various ways that can bite you if you try to change the rendering too much.If you want to control the positioning of an element that definitely you are probably better off forgetting <legend>
and just using stylized <div>
.
source to share
works in all browsers:
LEGEND {position: relative; width: 100%}
edit - check this gem: http://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/
source to share