CODEWITHSUNDEEP
htmlcssfirefox
erikvimz
erikvimz

Reputation: 5476

Div is not visible only in Firefox?

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?

Upvotes: 0

Views: 1269

Answers (2)

Shiridish
Shiridish

Reputation: 4962

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

Upvotes: 2

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

remove left: -335px; and position: absolute; try use right :10px;

or put an extra div around content in td and assign class:

<tr>
  <td >
    <div class="title_area">
      <h2>
       Create an account</h2><span>(or <a href="#">Sign In</a>)</span></div>
  </td>
</tr>

Upvotes: 0

Related Questions