Last Comment Bug 205574 - legend{display:block} doesn't work
: legend{display:block} doesn't work
Status: RESOLVED WORKSFORME
: css-moz, css1, qawanted, testcase
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Trunk
: All All
: -- enhancement with 3 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
:
Mentors:
Depends on: 269908
Blocks:
  Show dependency treegraph
 
Reported: 2003-05-13 16:50 PDT by fraser crichton
Modified: 2009-08-24 12:38 PDT (History)
10 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Testcase from description (649 bytes, text/html)
2003-05-13 20:01 PDT, Sterling Bates
no flags Details
test case (710 bytes, text/html)
2004-05-05 01:52 PDT, Anne (:annevk)
no flags Details

Description fraser crichton 2003-05-13 16:50:22 PDT
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)
Comment 1 Sterling Bates 2003-05-13 20:01:23 PDT
Created attachment 123227 [details]
Testcase from description

Confirmed in Win32 build 20030507.
Comment 2 ondrej 2003-11-28 17:47:47 PST
Confirmed in Linux Gecko/20030630 (1.4)
Confirmed in Linux Gecko/20031007 (1.5)
Comment 3 Brian 2004-04-23 10:55:22 PDT
Bug Confirmed in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6) Gecko/20040207
Firefox/0.8
Comment 4 Anne (:annevk) 2004-05-05 01:52:32 PDT
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>
Comment 5 Boris Zbarsky [:bz] (still a bit busy) 2004-05-05 08:16:11 PDT
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.
Comment 6 Gavin Kistner 2004-05-25 10:41:57 PDT
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.)
Comment 7 Gavin Kistner 2004-05-25 10:54:37 PDT
(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 lightsolphoenix 2006-01-01 20:40:40 PST
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 Brian Polidoro 2008-04-11 19:24:46 PDT
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.  
Comment 10 Boris Zbarsky [:bz] (still a bit busy) 2008-04-11 19:43:23 PDT
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.
Comment 11 Boris Zbarsky [:bz] (still a bit busy) 2009-08-24 05:04:58 PDT
This seems to be worksforme now that bug 269908 has been fixed.

Note You need to log in before you can comment on or make changes to this bug.