Set the 100% width of the "legend" to FF

Can the width of the "legend" be set to 100% in FF? Despite my best efforts, its length remains equal to the containing text.

+2


source to share


4 answers


set css width to fieldset



fieldset { width: 100%; }

      

-2


source


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>

.

+2


source


works in all browsers:

LEGEND {position: relative; width: 100%}

edit - check this gem: http://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/

+1


source


Firefox 3.6 and higher with a difference { width: 100%; }

. There seems to be no CSS-only fix for Firefox 3.5 (see bobince's answer).

0


source







All Articles