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?
Steps to Reproduce:
No change to width
The legends width should change - It does in IE (of course)
Created attachment 123227 [details]
Testcase from description
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
Created attachment 147716 [details]
Note that IE doesn't support this completely correct either.
See also: <http://lists.w3.org/Archives/Public/www-style/2003Nov/0096.html>
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.
Confirmed in Moz1.7 and current (as of this date) Firefox nightly on MacOS X.3.3
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:
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...
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
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.
This seems to be worksforme now that bug 269908 has been fixed.