The below code is quite simple but displays very differently on Firefox 1.5 and
Safari 2.0.2 (both on OSX-Tiger.) This issue would probably appear different in
IE too. Which browser is rendering it wrong? (My opinion: Firefox)
A simple fix for Safari is to move the .buttons div inside the fieldset - but I
don't think this is semantically correct (more so on large/complex forms with
many fieldset). I don't think buttons belong in the fieldset - it's for entry
fields. Also when the div is move an other possible FF bug is shown; the
buttons div does not clear and floats to the right of the text fields. Does
anyone have any suggestions on laying this out in a "normal-ish" way using CSS?
CSS:
dt {
float: left;
clear: left;
width: 9.5em;
font-weight: bold;
text-align: right;
}
dd {
float: left;
clear: right;
}
.buttons {
clear: both;
}
HTML:
<form action="/" method="post">
<fieldset>
<legend>Login Details</legend>
<dl>
<dt><label for="user">Username</label></dt>
<dd><input type="text" name="user" id="user" /></dd>
<dt><label for="pass">Password</label></dt>
<dd><input type="password" name="pass" id="pass" /></dd>
</dl>
</fieldset>
<div class="buttons">
<input type="submit" value="Login" />
</div>
</form>
Thanks in advance for your insight,
--
Rowan
http://www.rmwpublishing.net/
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
