RESOLU === Fix IE6 ne fonctionne pas pour la hauteur minimum

Salut,

J'ai mis un min-height pour le containerAll et le container2All et le fix que j'ai mis dans le head pour IE6 ne fonctionne pas.

Est-ce que quelqu'un peut m'éclairer?

<!--[if IE 6]>
<style>
#containerAll, #container2All{height:auto;}
</style>
<![endif]-->

#containerAll{ margin:0 auto; background:url(../img/07final.jpg) 50% 0 no-repeat;  width:100%;  min-height:565px; height:auto !important; height:565px; overflow:hidden;}

#container2All{ float:left; width:940px; margin-top:16px; background:url(../img/bgpage.gif) repeat-y;   min-height:345px; height:auto !important; height:345px; overflow:hidden;}

Lien:
http://demo.suitevox.com/netur/test/fr/services.html

Merci
Modifié par webberte (03 Nov 2009 - 15:55)

Bonjour,

Pour IE6 mettre un height de la même valeur que le min-height devrais résoudre le problème.

Laurie-Anne

Ça empêche les pages plus longues d'étirer...
Modifié par webberte (03 Nov 2009 - 15:56)

Ça devrait ressembler à cette page en hauteur

http://demo.suitevox.com/netur/test/fr/entreprise.html
Modifié par webberte (03 Nov 2009 - 16:14)

Bonjour,

Un height: Npx dans IE6 permet d'émuler un min-height: Npx à cause de la mauvaise gestion de la propriété height dans IE6.

Cependant:
- Si tu combines ce height avec un overflow:hidden ou overflow:auto, la propriété height va se comporter correctement dans IE6, donc plus d'étirement en auteur. On évitera donc ce cas de figure.
- Dans tous les cas, mieux vaut éviter d'utiliser à la fois un hack CSS (dans ce cas précis l'exploitation d'un bug d'IE6 sur la gestion de !important) et les commentaires conditionnels. Il vaut mieux choisir l'une ou l'autre solution pour cibler IE6, mais pas les deux. Sur Alsacréations, on recommande plutôt les commentaires conditionnels.

Je suis intéressé à lire sur le sujet. Par contre je comprend pas tout à fait la façon de l'écrire. J'ai besoin de corriger la situation rapidement. Est-ce que l'écris comme ci-bas?

#containerAll{ 
margin:0 auto; 
background:url(../img/07final.jpg) 50% 0 no-repeat;  
width:100%;  
min-height:565px; height:auto !important; 
height:565Npx; overflow:hidden;
}

Merci.

Dans la CSS de base:

#containerAll{  
margin:0 auto;  
background:url(../img/07final.jpg) 50% 0 no-repeat;   
width:100%;   
min-height:565px;
} 

Dans une CSS corrective dédiée à IE6 et appelée par commentaire conditionnel:

#containerAll{  
height:565px;
} 

Laurie-Anne

Ta solution donne une hauteur fixe alors ça empêche les pages avec plus de contenu d'étirer...

Si tu utilise un commentaire conditionnel pour appeler la feuille de style corrective, ça ne devrait pas.

À moins que je n'aie pas compris.
Je laisse le css que tu me suggères tel quel pour que tu vois le résultat dans la page.

http://demo.suitevox.com/netur/test/fr/services.html

commentaire conditionnel dans le header:

<!--[if IE 6]>
<style>
#containerAll{height:565px;}
</style>
<![endif]-->

css dans la feuille de style:

#containerAll{   
margin:0 auto;   
background:url(../img/07final.jpg) 50% 0 no-repeat;    
width:100%;    
min-height:565px; 
}

On t'as dit d'enlever le overflow, c'est ce qui pose problème.

Merci.
Modifié par webberte (04 Nov 2009 - 14:12)