balise absolument positionnée ne fonctionnant pas dans IE6

Question

Cette page http://winteradagency.com/Arvin/incentives/lenders.htm semble bonne dans tous les navigateurs sauf IE6. Ce qui ne va pas, ce sont les grands mots qui doivent figurer en haut de l'image au centre et qui disent «Déductions pour les prêteurs». Dans IE6, ils vont vers la droite entraînant un défilement horizontal de la fenêtre du navigateur.

J'ai besoin d'utiliser 2 instances différentes de ces mots pour créer une apparence d'ombre portée. Donc, on est au-dessus de l'autre, mais un pixel dans les deux sens.

J'utilise ce code html:

<div id="centerInc"> 
    <p class="centerAlign3">Deductions for Lenders</p> 
    <p class="centerAlign2">Deductions for Lenders</p> 
</div><!--end center image div--> 

et voici le css de styles.css sur le site:

#container #centerInc { 
background-image: url(images/IncCenter.jpg); 
height: 183px; 
width: 875px; 
margin-top: 160px; 
float: left; 
font: bold 2.6em Georgia, "Times New Roman", Times, serif; 
color: #FFF; 
background-repeat: no-repeat; 
text-align: right; 
position: absolute; 
} 

.centerAlign2 { 
font: normal 1.15em Georgia, "Times New Roman", Times, serif; 
color: #FFF; 
position: absolute; 
width: 860px; 
margin-top: 115px; 
} 
.centerAlign3 { 
font: normal 1.15em Georgia, "Times New Roman", Times, serif; 
color: #000; 
position: absolute; 
width: 861px; 
margin-top: 114px; 
} 

Toutes les idées seraient grandement appréciés. Je suis toujours une vraie recrue. merci!

Answer 1

Essayez de spécifier "overflow: hidden" dans centerInc

je résoudre ce problème en créant un gif ou jpeg. Ce ne sera qu'une question de temps avant qu'il ne fonctionne pas dans IE9 ou Firefox 11 ou nouveau navigateur 0.5.

Answer 2

Avec position: absolute Je certainement préciser x/y position (à savoir top et left), et je pense que je ne vois pas ce que tu fais ça. Dans l'état actuel des choses, vous donnez au navigateur la liberté de décider où positionner ces DIV.

Answer 3

vos flotteurs clairs: Clearing a float container without source markup

Vous avez une étiquette </div> supplémentaire qui pourrait un autre problème, ainsi que quelques autres erreurs: [Invalid] Markup Validation of winteradagency.com/Arvin/incentives/lenders.htm - W3C Markup Validator

Vous pourriez aussi avoir besoin d'une feuille de style spécifique IE6: CSS - Conditional comments