Firefox 4 - unintended layering?
I just switched to Firefox 4 and looked at the site I'm currently working on. When I go to my register page, a submit button layers below a footer div that comes after it. I'm not quite sure where I went wrong here, it worked in all the browsers before. Here's the page in question with the register button on the bottom the one that is layering: http://evo.writers-bbs.com/register.php
Here's the quick code:
<div id="registerBox">
<br /><br />
<div id="leftRegister">
<?php $startSpan = "<span style=\"color:red;\">";
if ($session->getNumErrors(1) > 0) echo $startSpan; ?>Username:</span><br /><br /><br />
<?php if ($session->getNumErrors(2) > 0) echo $startSpan; ?>Password:</span><br /><br /><br />
<?php if ($session->getNumErrors(3) > 0) echo $startSpan; ?>Verify Password:</span><br /><br /><br />
<?php if ($session->getNumErrors(4) > 0) echo $startSpan; ?>Email Address:</span>
</div>
<form method="post" action="tinUser_processor.php">
<div id="rightRegister">
<input type="text" name="username" class="registerInputs" /><br /><br /><br />
<input type="password" name="password" class="registerInputs" /><br /><br /><br />
<input type="password" name="verifyPassword" class="registerInputs" /><br /><br /><br />
<input type="text" name="email" class="registerInputs" /><br /><br />
<input type="hidden" name="processType" value="register" /><br />
</div>
<div style="text-align:center;clear:both;">
<input type="submit开发者_开发技巧" value="Register" class="loginButton" style="width:75px;" />
</div>
</form>
</div>
and the CSS that goes with it:
#registerBox {
width: 365px;
height: 350px;
background-color: #2e76ff;
border: 3px solid #000000;
margin: 0px auto;
}
#leftRegister {
width: 142px;
float: left;
text-align: right;
margin-right: 25px;
color: #FFFFFF;
}
#rightRegister {
width: 158px;
float: left;
}
It is also broken in IE9. But from what I can see I think the problem is in your code and not the browsers. First of all try giving it a CSS reset sheet (you can find one here => http://meyerweb.com/eric/tools/css/reset/. Put all your inputs in a formfeild tag . Don't mix CSS inside the XTML markup 9like you do on the problematic button ;)). Tweak your CSS a bit if there are some stylistic inconveniences. I think you should be after these steps.
精彩评论