2012-12-13 3 views
0

je le css suivant pour mon div d'erreur:Div n'est pas visible uniquement dans Firefox?

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

et le code CSS suivant pour ma table td:

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

Et ma structure HTML:

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

Le div La classe side_error semble apparaître dans tous les navigateurs exactement comme je le veux mais dans Firefox (version 17.0.1) elle ne s'affiche pas du tout, même quand j'utilise Firebug la div ne pas être coloré en passant le code html, c'est comme s'il n'existait pas du tout.

Des idées?

+2

essayez de supprimer gauche: -335px ;? –

+0

En supprimant le "gauche" le div est maintenant apparu en dehors de la table qui est complètement faux, aucune idée pourquoi j'ai des problèmes avec cela seulement dans Firefox? – Eric

+0

Il semble que Firefox soit le seul à respecter les spécifications ici. Si votre élément est position: absolute et que vous définissez left: negative_value, il sera positionné en dehors de la fenêtre. –

Répondre

2

Réorganisé votre css, voir si ce 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; 
}​ 

Voir le travail Fiddle- DEMO

+0

Très intéressant et très créatif, ça marche, merci! – Eric

0

supprimer left: -335px; et position: absolute; utilisation try right :10px;

ou mettre un div supplémentaire autour du contenu dans td et attribuer la classe:

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

Normalement je l'utilise comme ça, mais je ne veux pas que le contenu de la table bouge et d'après ce que je comprends, cela ne peut être fait qu'avec "position: absolute"? – Eric

Questions connexes