2

Is it possible to set the width of the tag "legend" at 100% in FF? In spite of all my efforts its length stays equal to the containing text.

  • One thing to note is IME the legend element is difficult to style when going outside it's intended function. – alex Sep 30 '09 at 07:24

4 Answers4

2

I don't believe it is, no. Firefox 3.5 sets the following style on legends:

width: -moz-fit-content !important;

which, thanks to the ‘important’, is impossible to override (min-width and position are similarly affected).

display defaults to inline, but you can set it to block and nest a <span> inside it which you can then set to display: block; width: something;. But not 100% as that relies on the width of the legend (gah). The only way I can think of to truly get 100% would be to relative-position the fieldset and absolute-position the span inside the legend with left: 0; width: 100%;.

(Which is very ugly and potentially fragile.)

<legend> is always a tricky element to style in many browsers: its typical default rendering can't be done with plain CSS, so the 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 the element that specifically, you are probably better off forgetting <legend> and just using a styled <div>.

bobince
  • 528,062
  • 107
  • 651
  • 834
1

works on all browsers:

LEGEND { position: relative; width: 100% }

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

justlost
  • 193
  • 8
  • The way I would have done it too..! I know it's been a while, but do you have any thoughts on adding padding to the `` while maintaining it's 100% width? Fun times... – Chris Kempen May 07 '12 at 10:12
  • Check out this post: http://stackoverflow.com/questions/6312799/make-a-legend-fill-up-the-full-width-within-the-fieldset It explains how to add the padding with 100% width. – justlost Jun 05 '12 at 17:00
0

Firefox from version 3.6 onwards honours { width: 100%; }. There appears to be no CSS-only fix for Firefox 3.5 (see bobince's answer).

Danyal Aytekin
  • 4,106
  • 3
  • 36
  • 44
-2

set css width on fieldset

fieldset { width: 100%; }
Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
psychotik
  • 38,153
  • 34
  • 100
  • 135