Closed Bug 205574 Opened 21 years ago Closed 15 years ago

legend{display:block} doesn't work

Categories

(Core :: Layout: Form Controls, enhancement)

Product:
Core
Component:
Layout: Form Controls
Type:
enhancement
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: fraser.crichton, Unassigned)

References

Details

(4 keywords)

Attachments

(1 file, 1 obsolete file)

test case
710 bytes, text/html
Details 
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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<body>
<span style="background-color: red; display: block; width: 100%;">test</span>
<form action="hh.htm" method="get">
	<fieldset>
	<legend style="background-color: blue;width: 100%; display: block;">test</legend>
	Blah  <input type="text" id="test" name="test" value="test text" /> <br />
	</fieldset>
</form>
</body>
</html>

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



Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Actual Results:  
No change to width

Expected Results:  
The legends width should change - It does in IE (of course)
Attached file Testcase from description (obsolete) — 
Confirmed in Win32 build 20030507.
Confirmed in Linux Gecko/20030630 (1.4)
Confirmed in Linux Gecko/20031007 (1.5)
Bug Confirmed in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6) Gecko/20040207
Firefox/0.8
Attached file 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
Status: UNCONFIRMED → NEW
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
Keywords: testcase
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
Confirmed in Moz1.7 and current (as of this date) Firefox nightly on MacOS X.3.3

Testcase here:
http://phrogz.net/tmp/styledfieldset.html 
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.)
(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.
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?)
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.
Status: NEW → RESOLVED
Closed: 15 years ago
Depends on: 269908
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: