Firefox fieldset bug?

[Agrajag]

Hi
I'm using a css form layout which i've adapted from here:
http://www.quirksmode.org/css/forms.html

The layout worked well in both Firefox and IE6 until I started using fieldsets. When the layout is inside a fieldset, it works as expected in IE while Firefox spreads the elements out on one line. I am wondering whether this is a Firefox bug.

Whether it is or not, does anyone know how i can get it to behave correctly in firefox?

Here is a demo of the problem

and here is the code i'm using:

CSS:

li input, li textarea{
	float: left;
}
li input.text, li textarea {
	display:block;
	width:150px;
	margin:0 0 10px 0;
	padding:1px 2px;
	border:1px solid #9bc365;
	background:#333;
	color:#fff;
}
li textarea{width:250px;height:150px;}
input.submit{
	border:2px outset #9bc365;
	background:#9bc365;
	margin:0 0 0 120px;
}
li label{
	display:block;
	float:left;
	text-align:right;
	width: 100px;
	margin:0 20px 0 0;
}
form li{
	clear:both;
	list-style:none;
}

and XHTML:

<form>
<fieldset>
<legend>Login</legend>
	<ul>
	<li><label>Username</label><input class="text" type="text" /></li>
	<li><label>Password</label><input class="text" type="password" /></li>
	<li><input class="submit" type="submit" value="Go!" /></li>
	<li></li>
	</ul>	
</fieldset>
</form>

by the way, i'm using Firefox 1.5.0.5

thanks for your help

[Twey]

This most likely has nothing to do with the browser, but more to do with the size of the page or containing element.

form li{
clear:both;

clear doesn't have an effect on non-floated elements; the <li>s themselves have never been floated (only the labels, inputs and textareas inside them). Neither float nor clear inherits.

There are some issues with your markup, too.

<ul>

This doesn't look like a list to me. It looks like a form. Probably <p> would be better semantically.

<label>Username</label><input class="text" type="text" />

This is a misuse of <label>. Labels label form elements; thus, they should be attached to a form element. This can be done using the for attribute, or by putting the element directly inside the label.

and XHTML:

Why are you using XHTML? There are numerous disadvantages to XHTML at the moment and no effective advantages, since it's impossible to actually serve it as XHTML due to IE's problems. Serving XHTML as text/html is a bad idea. Unless you have a very specific reason to use XHTML (and don't mind dropping support for IE), stick with HTML 4.01 Strict.

by the way, i'm using Firefox 1.5.0.5

You're a version behind;Firefox 2.0 is now stable.

[mwinter]

Hi
I'm using a css form layout which i've adapted from here:
http://www.quirksmode.org/css/forms.html

Table-less forms are overrated. It is a semantically-correct form of markup: each row contains related items, where the left-most cells are labels, and the right are inputs.

The layout worked well in both Firefox and IE6 until I started using fieldsets. When the layout is inside a fieldset, it works as expected in IE while Firefox spreads the elements out on one line. I am wondering whether this is a Firefox bug.

Possibly. I think that various browsers have issues that make fieldset elements more awkward to use.

Whether it is or not, does anyone know how i can get it to behave correctly in firefox?

Rewrite it. Personally, I'd use a table - it's structural, not layout.

This most likely has nothing to do with the browser, but more to do with the size of the page or containing element.

Substituting with another block-level element renders as intended.

This doesn't look like a list to me. It looks like a form. Probably <p> would be better semantically.

But does the text constitute a paragraph? I don't think so. There doesn't need to be a container, anyway (except for the fieldset, or some other block-level element): line breaks will do.

You're a version behind;Firefox 2.0 is now stable.

True, though that wouldn't fix any problems in earlier versions.

Mike