making fieldset/legend fully-fledged css boxes




13 years ago
2 years ago


(Reporter: Tim, Unassigned)




Firefox Tracking Flags

(Not tracked)



(1 attachment)



13 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/412 (KHTML, like Gecko) Safari/412
Build Identifier: 

Currently FIELDSET and LEGEND don't react to advanced styling like display:foo or position:bar. A 
search in bugzilla shows, that both are replaced elements instead of real css boxes. Why? Is there 
anywhere something appropriate in the HTML or CSS Specs, i've overlooked? Someone said the default 
rendering could not expressed in CSS. I'd like believe that, although position:relative with a negative 
value for top could do something similar.

I believe the possibility to change the default rendering would improve the Web, leading to increased 
and advanced usage of FIELDSET and LEGEND. Defining the default rendering in CSS with a Mozilla 
property (display:-moz-legend) instead of defining it in Mozilla Core could give web authors the 
possibility to overwrite this with own values und give them more control over forms.

Reproducible: Always

Steps to Reproduce:
<legend style="display:block;">bla</legend>
Actual Results:  
Rendering like:


Expected Results:  
Rendering like:


Comment 1

13 years ago
> Why?

Because their de-facto default rendering currently can't be described in CSS. 
So we have to make them not be CSS boxes in some way; the simplest way happened
to be to make them replaced elements.

The thread bernd pointed to describes some problems here; other probles are
described at 

Please feel free to post patches if you have suggestions on how the issues in
question can be resolved.
Keywords: helpwanted
Ever confirmed: true

Comment 3

13 years ago
I know this is one of those things that o change will cause alot of trouble, but
I also feel that this needs to be changed sooner or later, I've attatched a
testcase for my method of improvement. While its not identical, it is however
completely usable and easy to customize.

Comment 4

13 years ago
Created attachment 187928 [details]
Showcase for alternative fieldset rendering.

Comment 5

11 years ago
wouldn't be a simple solution to that issue?


11 years ago
Duplicate of this bug: 373363

Comment 7

10 years ago
Just ran into this issue when trying to make an accessible way to hide things visually but not from screen readers. So adding my comment for the need of it to be taken care of.

Comment 8

8 years ago
Hello All - I'm assuming this fix would allow for block-level CSS on the <legend> element such as width, etc. If so, I would like to support the need to fix this particular bug.

Other modern browsers have adopted the ability to control WIDTH attributes on the LEGEND element.

We would like to use the semantically-correct FIELDSET and LEGEND elements in our forms, but without the native support of the WIDTH attribute we may have to abandon this strategy and use the more ambiguous DIV and H1 combination to meet our visual requirements.
Bug 269908 lifted some of these restrictions, you should check if Firefox 3.6 does what you need as that is the first version of Firefox with bug 269908 fixed.

Comment 10

8 years ago
Thanks Timothy et al. It seems 3.6 has solved the <legend> styling challenge. There will be much rejoicing here.
You need to log in before you can comment on or make changes to this bug.