Forum Moderators: not2easy
Does anyone know of an alternative approach to tableless forms without using floats?
Here is a code example that shows the broken Mozilla behavior.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
label { float: left; display: block; }
#clearFloat { clear: left; }
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Mozilla Bug</legend>
<label for="abc">ABC:<input name="abc" id="abc"></label>
<label for="def">DEF:<input name="def" id="def"></label>
<input type="submit" name="submit" id="clearFloat" value="Submit">
</fieldset>
</body>
</html>
Incidentally, you don't need the display:block; in there - floated objects automatically become block level.
Seems weird - I've definitely done this before (I use it a lot) but I agree that your example isn't working. It does work if you float the input[submit] left as well; would that solve your problem for the time being?
If you float the input[submit], how do you know it will appear on its own line below the other form inputs, and not just to the right of them?
Argh. I can't remember either but doesn't <fieldset> have to be in a <p>?
Nope.
I checked with my friends over at Mozilla and this is a bug that was just discovered a few months ago. It is fixed in the current build as of 1/18 of this year. So just a few days ago. But I guess you need to be following the trunk to get it so you won't see the fix until ver 1.5.1 or whatever.
Correct. I've been following that bug as well, with hopes that someone would come up with an alternate solution like "give the floated object this CSS property" or some other hack. Unfortunately, this apparently wasn't a high priority, so it didn't get fixed in 1.5. I think it kinda sucks that they fixed it just after 1.5 because it seems like such a huge bug to me (totally blocks people from doing tableless form layouts). Hence, this thread, in hopes that someone has an alternate method for tableless forms. :)
for now however putting a float, along with the clear: left; on the input should work nicely, fotiman, it's the clear: left which stops it appearing on the right and the float makes it honour the clear ;)
Note: however that the clear: property can/should only be used on block level elements and input is inline.
[w3.org...]
Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 and CSS 2.1 the 'clear' property only applies to block-level elements. Therefore authors should only use this property on block-level elements.
So clear by itself should not really be enough anyway, however interestingly I note that just changing the inputs display to block isn't enough to get it to work, is this the bug?
interesting info on the bug.. btw.. either of you have a link to this bug so we can see when it's fixed. and is it just occuring in fieldsets or what?
Here's a link to the bug. Note that it is specific to fieldset:
http://bugzilla.mozilla.org/show_bug.cgi?id=309550 [bugzilla.mozilla.org]
for now however putting a float, along with the clear: left; on the input should work nicely, fotiman, it's the clear: left which stops it appearing on the right and the float makes it honour the clear ;)
Ah yes. That should work nicely. :)
Note: however that the clear: property can/should only be used on block level elements and input is inline.
So then the fix is to make that input block level as well, right? (using display:block;)
So clear by itself should not really be enough anyway, however interestingly I note that just changing the inputs display to block isn't enough to get it to work, is this the bug?
But suppose you do clear:left; float: left; display: block; on the input... that works.
Thanks for the good input.
But suppose you do clear:left; float: left; display: block; on the input... that works.
Yes but declaring the float property [w3.org] automatically makes an element into a block box, i.e. it sets an elements display property to block so specifically declaring display: block; is unnecessary when you have already set a float property.
I was just commenting that display: block; on it's own should theoretically make it work but that it didn't :) and I'm thinking that using a float is probably best anyway because even if display: block; did work then you might still need to float them anyway if you wanted multiple inputs to appear side by side.. e.g. preview, submit
and thanks for the link
Suzy
Essentially, there seems to be 2 requirements.
1. The item that clears the floats needs to be a block item. A div will work, as will any other item given display: block; (like an input button).
2. There must be a nested fieldset within the fieldset containing the floats, and it must be before the item that clears the float.
In many cases, fieldsets may already contain nested fieldsets. But in some cases, it may not make sense to have another nested fieldset. Therefore, the "hack" solution requires adding an empty fieldset which you intend to "hide" from the end user.
Note that simply giving the fieldset display: none; does not work. Instead, give the fieldset zero margin, border, padding, and height. Then give the legend within that fieldset display: none;. Below is the code to display this in action:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Mozilla Fieldset Float Bug Hack</title>
<style type="text/css">
fieldset
{
display: block;
margin: 0 0 3em 0;
padding: 0 1em 1em 1em;
}
input
{
display: block;
width: 15em;
}
input.submit
{
width: auto;
}
div input.submit
{
display: inline;
}
div, input.submit
{
clear: both;
}
label
{
float: left;
display: block;
margin: 1em 1em 0 0;
}
.mozillaFloatBugFix
{
margin: 0;
border: 0;
padding: 0;
height: 0;
width: 0;
}
.mozillaFloatBugFix legend
{
display: none;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Exhibits Mozilla Float Bug</legend>
<label>This is floated:<input name="input1"></label>
<label>Also floated:<input name="input2"></label>
<input type="button" name="clearfloat" class="submit" value="This SHOULD clear floats, but does not">
</fieldset>
<fieldset>
<legend>Corrects Mozilla Float Bug</legend>
<fieldset class="mozillaFloatBugFix"><legend></legend></fieldset>
<label>This is floated:<input name="input1"></label>
<label>Also floated:<input name="input2"></label>
<input type="button" name="clearfloat" class="submit" value="This DOES clear floats">
</fieldset>
<fieldset>
<legend>Corrects Mozilla Float Bug</legend>
<fieldset class="mozillaFloatBugFix"><legend></legend></fieldset>
<label>This is floated:<input name="input1"></label>
<label>Also floated:<input name="input2"></label>
<div>
<input type="button" name="clearfloat" class="submit" value="This div DOES clear floats">
<input type="button" name="clearfloat" class="submit" value="The End">
</div>
</fieldset>
</form>
</body>
</html>
No floats
Fieldset
label-etc label-etc
<br>
Submit button
what this bug is doing is actually breaking some existing forms so therefore the (hopefully temporary) solution would be best if it is a pure CSS one.
fotiman, good job!.. I played with your code a bit and found that it needn't be an extraneous fieldset it can actually be anything e.g. it works with <span> </span> even leaving the span at it's default of inline!
but again in order to correct existing broken forms I personally would still prefer just to float the inputs and adjust their position with margins as that is the least invasive and it seems it will be patched by next release anyway thankfully :)
fotiman, good job!.. I played with your code a bit and found that it needn't be an extraneous fieldset it can actually be anything e.g. it works with <span> </span> even leaving the span at it's default of inline!
Very nice! In fact, I think this tends to suggest that any item between the top of the form and the clearing item will cause this behavior. I'm guessing it has something to do with margins collapsing, or something similar.
but again in order to correct existing broken forms I personally would still prefer just to float the inputs and adjust their position with margins as that is the least invasive and it seems it will be patched by next release anyway thankfully :)
By floating the inputs, I assume you mean floating the items that clear the float, right?
