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,