Discussion :

[rigolman]

Bonjour,
J'ai un gros gros gros souci d'affichage sous IE6 avec le design du site que je suis en train d'integrer actuellement.

En gros le site s'affiche parfaitement bien sous Firefox 3 et IE7 mais pas sous IE6 où c'est la catastrophe !

Ci-dessous le bon affichage (ici sous firefox 3)
Cliquez-ici pour voir la capture

et maintenant celui de IE6 où tout est cassé:
Cliquez ici pour voir la capture sous IE6

J'ai bien sur tout fait en feuille de style CSS en utilisant principalement des DIV avec des float (principal probleme je pense) et des marges.

Comment a votre avis dois-je faire pour remedier à ce probleme ? Si vous pouviez m'aiguiller, j'apprécierais.

Merci par avance,
Alex.

[Erwan31]

Ca pourrait venir du doubled float margin bug (en).
Mais sans les code XHTML/CSS, difficile à dire.

[rigolman]

Tout d'abord merci pour ta réponse.
Si je te donne l'exemple ci dessous ça te va ?

La box de droite >> Celle de droite avec les infos "Male, 25, Paris"
CSS :
/*Informations Box*/
.user{height:auto;}
.photo{float:left;margin:15px;margin-right:10px;border:1px solid #dedcd4;max-height:52px;width:52px;}
.photo img{border:1px solid #fff;}
.name{float:left; margin-top:15px;}

Dans le HTML:
<div class="user">
<div class="head"><h1>tab</h1></div>
<div class="photo"><img src="images/alab.gif"/></div>
<div class="name">Male<br/>26, Paris<br/><img src="images/stars.gif"/></div>
</div>

Si tu as besoins de plus d'infos, dis le moi... jessaie de ne pas te filer lensemble du CSS assez lourd a digerer... mais c com tu preferes.

Alex.

[Erwan31]

Tu n'as pas regardé le liens que je t'ai donné, du mal avec l'anglais peut-être?

Met ça et vois si ça règle ton problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
.photo{
float:left;
margin:15px 10px 15px 15px;
display:inline; /*règle le Dbl float margin bug*/
border:1px solid;
}

[rigolman]

Encore une fois merci pour ta rep et ton aide.

J'ai essayé ta méthode, cela a permis de régler certains problème de Float et de marge mais pas tous... notamment le probleme de la grosse box "Male, 26, Paris) est toujours au dessus du bloc gris alors qu'elle devrait etre à sa droite...

aurais-tu une autre idée ?

P.S : j'ai l'impression que se sont les marges négatives qui ne sont pas pris en compte sous IE6...

Ci-dessous la class et le code HTML du bloc gris :
<div class="bann"><img src="images/details/bann.jpg"/></div>

.bann {width:728px;margin:15px 0 0 12px;}


Exemple d'utilisation de marge négative :
#chapo{position:relative;width:98px;height:100px;float:right;background:url(chapo.png) no-repeat; margin-right:-65px; margin-top:1px;z-index:10;}

<div id="header">
<div id="logo"><a href="#"><img src="images/logo.png"/></a></div>
<div id="chapo"></div>
</div>

[rigolman]

On m'a proposé de faire une seconde feuille de style spécialement conçu pour IE6 (et de détecté grâce à un javascript quel navigateur est utilisé pour savoir quelle feuille de style utiliser).

Qu'en pensez-vous ? Est-ce la seule solution ?

Merci pour votre réponse sur ce point,

[Erwan31]

Pas la peine pour la détéction navigateur c'est inutile et pas totalement fiable (certains utilisateurs n'ont pas JS activé...)
Contentes toi d'une CSS IE6- appelée par commentaires conditionnels
à placer après la CSS commune pour que les correctifs IE6 prennent le dessus sur ce qui est défini en amont dans le CSS commune.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!--[if lte IE 6]>
   <link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

lte (less than equal)

Pour en savoir plus
-
PS: pour qu'on puisse t'aider et à defaut d'une page en ligne, il vaut mieux fournir la totalité des codes.
-

[rigolman]

Merci (encore) Erwan31 pour ton explication...

Je te laisse ci-dessous ma feuille de style complète peut-etre que tu pourras voir ce qui cloche car j'aimerais, dans l'absolue, éviter de faire une feuille de style spéciale IE6 (car il y aurait beaucoup à faire comme tu peux le voir sur ma feuille de style ci-jointe !).

Alex.

P.S: d'ailleurs je la trouve un peu lourde (15ko !) peut etre as tu une astuce pour que je puisse réduire un peu son poid...?

[Erwan31]

La feuille de style corrective IE6 est très souvent nécessaire, je doute
que tu puisses t'en passer si tu ne veux pas utiliser des hack à tout va.

Tu n'as pas fourni le code HTML, la css ne peut pas suffire.

[rigolman]

Voila la page HTML ci-jointe.

Je ne suis pas contre une feuille de style corrective mais j'ai peur que cela soit lourd... et est-ce que je devrait refaire toute la feuille ?

[Er3van]

Pas nécessairement.

La seconde feuille ne sera lue que par le navigateur concerné, IE6, et les modifs que contiendra ta feuille de style ne servira que pour les classes/id concernés. Dans la plupart des cas tu n'auras pas grand chose à mettre, uniquement des redéfinition.

Par exemple, dans ta feuille de style normal tu auras :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#monId {
    float : left ;
    width : 300px ;
    height : 200px ;
    color : #FFFFFF ;
    background-color : #000000 ;
    margin-left : 5px ;
    margin-top : 5px ;
    padding : 10px ;
    /* et tous les attributs imaginables... */
}

et dans ta feuille de correction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#monId {
   width : 297px ;
}

Etant donné que tu avais déjà défini le reste dans la feuille principale, pas besoin de le réécrire. C'est pourquoi les feuilles correctives sont généralement légères.

Ceci étant, je n'ai pas pris le temps de lire dans le détail ton pb, donc mon code est complétement dénué de sens, mais c'est plutôt pour te donner un exemple.

[rigolman]

Salut Er3van,

Merci pour ta rép, je comprend mieux, néanmoins et si tu as le temps de jeter un petit coup d'oeil à ma feuille de style, je pense qu'il est possible de redéfinir certaines choses afin que ca passe sous IE6 mais je ne sais pas quoi...