Question

I have the following css for my error div:

.side_error {
width: 325px;
position: absolute;
top: 0;
left: -335px;
padding: 8px 0 0 0;
text-align: right;
color: #FF0000;
display: block;
}

and the following css for my table td:

.main_form td {
padding: 5px 0 5px 0;
position: relative;
}

And my HTML structure:

<table class="main_form" align="center">
<tbody>
<tr><td class="title_area"><h2>Create an account</h2><span>(or <a href="#">Sign In</a>)</span></td></tr>
<tr><td><div class="side_error">please enter your full name &gt;&gt;</div><input type="text" name="fullname" placeholder="Full Name" class="input"></td></tr>
<tr><td><input type="text" name="email" placeholder="Email" class="input"></td></tr>
<tr><td><input type="password" name="pass1" placeholder="Password" class="input"></td></tr>
<tr><td><input type="password" name="pass2" placeholder="Repeat Password" class="input"></td></tr>
<tr><td class="submit_area"><span><input type="checkbox" name="terms" value="yes" id="rm"><label for="rm"> I agree to <a href="#">**** Terms</a>.</label></span><input type="submit" name="submit" class="submit" value="Create Account"></td></tr>
</tbody>
</table>

The div with class side_error seems to appear in every browser exactly how I want it but in Firefox (version 17.0.1) it doesn’t display at all, even when I use Firebug the div doesn’t get colored when hovering the html code, its like it doesn’t exist at all.

Any ideas?

Answer 1

Reorganized your css, see if this helps-

CSS-

.side_error 
{
  width: 325px;
  position: relative;
  top: 20px;
  left: -327px;
  padding: 8px 0 0 0;
  text-align: right;
  color: #FF0000;
  display: inline-block;
}
.main_form td 
{
   position:relative;
   padding: 5px 0 5px 0;
}
table
{
   width:330px;
}​

See the working Fiddle- DEMO