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 ******************************************************