292736 - making fieldset/legend fully-fledged css boxes

Status: NEW

(Core :: Layout, enhancement)

Description

[Tim]

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:
<fieldset>
<legend style="display:block;">bla</legend>
blub
</fieldset>
Actual Results:  
Rendering like:

<fieldset>
<legend>bla</legend>
blub
</fieldset>

Expected Results:  
Rendering like:

<div>
<div>bla</div>
blub
</div>

Comment 1

[Bernd]

see http://lists.w3.org/Archives/Public/www-style/2005May/0000.html

Comment 2

[Boris Zbarsky [:bzbarsky]]

> 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 http://lists.w3.org/Archives/Public/www-style/2005Jan/0087.html 

Please feel free to post patches if you have suggestions on how the issues in
question can be resolved.

Comment 3

[Rowan Lewis]

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

[Rowan Lewis]

Attachment: Showcase for alternative fieldset rendering.

Comment 5

[bugzilla.mozilla.org]

wouldn't https://bugzilla.mozilla.org/show_bug.cgi?id=340063#c2 be a simple solution to that issue?

Comment 7

[Aaron Barker]

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

[Matthew Whiteside]

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.

Comment 9

[Timothy Nikkel (:tnikkel)]

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

[Matthew Whiteside]

Thanks Timothy et al. It seems 3.6 has solved the <legend> styling challenge. There will be much rejoicing here.