Firefox ajoute-t-il des valeurs propriétaires lorsque j'ajoute une bordure (comme IE le fait avec hasLayout)?

J'ai un doosie d'un problème de mise en page qui ressemble à un bug de navigateur.Firefox ajoute-t-il des valeurs propriétaires lorsque j'ajoute une bordure (comme IE le fait avec hasLayout)?

Il se manifeste uniquement en FF3 (n'ont pas testé ff2).

Il n'apparaît que sur le premier chargement de la page. Si je redimensionne la fenêtre, il se comporte correctement.

Il disparaît quand je mets une bordure sur l'élément qui pose problème, et revient quand je retire la bordure.

Aucune autre propriété ne change.

Voici une image du problème: footer width problem

inspecteur DOM de Firebug pense que le pied couvre toute la largeur dans les deux cas. Il semble que c'est seulement le texte-align: center qui ne respecte pas correctement toute la largeur. * Mise à jour: décollage de texte: le centre ne le résout pas. Le texte est aligné sur le côté gauche de l'écran (correct) ou sur le rectangle violet (incorrect). La bordure pourpre 1px que vous pouvez voir à l'écran est #centerHolder, l'enfant d'un élément différent et ne devrait pas affecter la disposition du pied de page, même si c'est clairement le cas. * Mise à jour: La réduction de la hauteur de la boîte pourpre à 85%, là où elle ne pourrait pas être gênante, ne change rien au problème. Le texte pense toujours que la boîte violette est sur le chemin.

Merci pour vos commentaires et vos idées.

HTML:

<div id="container"> 
    <div id="centerHolder"></div> 
</div> 
<p id="footer"> 
    Copyright ©2009 Lala Corporation 
    <a class="link" onclick="ContactUs_OnClick(); return false;" href="#">Contact Us</a> 
</p>

CSS:

#container{ 
position:relative; 
height:96%; 
min-height:600px; 
width:100%; 
min-width:975px; 
max-width:1300px; 
margin:0 auto; 
z-index:2; 
} 
#centerHolder { 
float:left; 
margin-left:245px; 
width:10%; 
z-index:1000; 
} 
#footer { 
border:1px solid green; 
margin:0; 
padding-top:5px; 
position:relative; 
text-align:center; 
z-index:1; 
}

Source

2009-11-24 SimplGy

Vous devez clear: both; sur votre #footer, ce n'est pas effacer votre flotta div #centerHolder

Source

2009-11-24 16:21:48

Un homme de merde, c'est tout à fait correct et je ne peux pas le croire. (ne peut pas le croire parce que le problème s'est fixé sur le redimensionnement du navigateur et le flottant fautif est un cousin éloigné) Mais ajouter clair: les deux, en fait, résoudre le problème. Merci. – SimplGy

pas de problème, c'est toujours quelque chose de simple ... juste à vous regarder droit dans les yeux! :-RÉ –

Je pense qu'il ya quelque chose d'autre se passe avec votre page que vous ne trouvez pas. Comme une balise DIV qui n'est pas correctement fermée. FireFox va fermer les tags pour vous s'ils sont laissés ouverts mais pas où vous le souhaitez. La frontière corrigeant ce problème semble forcer le DOM à réaliser que l'objet devrait s'étendre plus large. Voir le code ci-dessous que j'ai pris directement à partir de votre exemple et le tester. Cela fonctionne parfaitement sur mon installation de FF 3.5.5.

Remarque: pour localiser rapidement TAGS incorrectement, vous devez renommer votre code HTML en extension de fichier XML et l'ouvrir avec FF. Il devrait analyser le fichier correctement. Sinon, il indiquera où un TAG a été laissé ouvert.

<html> 
<head> 
<style> 
#container{ 
position:relative; 
height:96%; 
min-height:600px; 
width:100%; 
min-width:975px; 
max-width:1300px; 
margin:0 auto; 
z-index:2; 
} 
#centerHolder { 
float:left; 
margin-left:245px; 
width:10%; 
z-index:1000; 
} 
#footer { 
/*border:1px solid green;*/ 
margin:0; 
padding-top:5px; 
position:relative; 
text-align:center; 
z-index:1; 
} 

</style> 
</head> 


<body> 
<div id="container"> 
    <div id="centerHolder">Here's some text</div> 
</div> 
<p id="footer"> 
    Copyright ©2009 Lala Corporation 
    <a class="link" onclick="ContactUs_OnClick(); return false;" 

href="#">Contact Us</a> 
</p> 
</body> 
</html>

Laissez-moi savoir si vous trouvez quelque chose. Toujours intéressé de savoir ce que vous trouvez.

Source

2009-11-24 16:21:55 Jeff

Firefox ajoute-t-il des valeurs propriétaires lorsque j'ajoute une bordure (comme IE le fait avec hasLayout)?

Répondre

Questions connexes