legend{display:block} doesn't work




Layout: Form Controls
15 years ago
8 years ago


(Reporter: fraser crichton, Unassigned)


(4 keywords)

css-moz, css1, qawanted, testcase

Firefox Tracking Flags

(Not tracked)



(1 attachment, 1 obsolete attachment)

710 bytes, text/html


15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4a) Gecko/20030401
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4a) Gecko/20030401

In Mozilla I can't get the legend tag to accept a CSS width even when I declare
the legend as a block level element. Here's my code -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<span style="background-color: red; display: block; width: 100%;">test</span>
<form action="hh.htm" method="get">
	<legend style="background-color: blue;width: 100%; display: block;">test</legend>
	Blah  <input type="text" id="test" name="test" value="test text" /> <br />

Is it Mozilla's interpretation of the W3C's stds, perhaps?

Reproducible: Always

Steps to Reproduce:

Actual Results:  
No change to width

Expected Results:  
The legends width should change - It does in IE (of course)

Comment 1

15 years ago
Created attachment 123227 [details]
Testcase from description

Confirmed in Win32 build 20030507.

Comment 2

14 years ago
Confirmed in Linux Gecko/20030630 (1.4)
Confirmed in Linux Gecko/20031007 (1.5)

Comment 3

14 years ago
Bug Confirmed in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6) Gecko/20040207

Comment 4

14 years ago
Created attachment 147716 [details]
test case

Note that IE doesn't support this completely correct either.

See also: <http://lists.w3.org/Archives/Public/www-style/2003Nov/0096.html>
Attachment #123227 - Attachment is obsolete: true


14 years ago
Ever confirmed: true
Keywords: css-moz, css1, helpwanted, qawanted
OS: Windows 2000 → All
QA Contact: desale → ian
Hardware: PC → All
Summary: The legend tag doesn't let you set a CSS width of 100% on it → legend{display:block} doesn't work


14 years ago
Keywords: testcase


14 years ago
Severity: normal → enhancement
Legends act almost like replaced elements in many ways, so it's not clear what
shouldhappen exactly....  Certainly the default behavior of legends is not
describable in CSS, so any application of CSS to them is bound to have issues.
Keywords: helpwanted

Comment 6

13 years ago
Confirmed in Moz1.7 and current (as of this date) Firefox nightly on MacOS X.3.3

Testcase here:
works as intended in Safari1.2 and IE6Win (the middle case...the bottom bug-showing case draws the 
fieldset border in an odd location on IE6.)

Comment 7

13 years ago
(In reply to comment #6)
> Testcase here:
> http://phrogz.net/tmp/styledfieldset.html 

I also forgot to add: as can be seen on that page, there's also a certain funkiness with the inability to 
position the legend as desired.

Comment 8

12 years ago
Little something I yanked out of Mozilla/Firefox's default form styling, which is the root of this problem...

legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static ! important;
  float: none ! important;

Remember, declaring CSS as !important flips the order of the normal cascading rules; basically, any rules that are !important in the default CSS can never be overwritten.  This is good for certain styling pieces, but I question whether forcing legend to always be a non-floated non-positioned element is a good thing.

In fact, I'd say that legend should probably be absolutely positioned within fieldset (have you see any other CSS method of making something like a fieldset with the legend where it's supposed to be?)

Comment 9

10 years ago
I looked at the testcase if FF2 and in
Minefield/3.0pre ID:2008040706

And the testcase now looks like it WFM.  The legend strecthes across the document like the span below it.  
Note that current legend layout on trunk is buggy.  Once it's fixed, legends will be doing shrink-wrap sizing, and have a !important width in forms.css.

We may want to look into removing the !important at some point, of course.
Assignee: layout.form-controls → nobody
QA Contact: ian → layout.form-controls
This seems to be worksforme now that bug 269908 has been fixed.
Last Resolved: 8 years ago
Depends on: 269908
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.