Problèmes d'alignement avec IE7

Bonjour à tous,

J'ai fait un site XHTML/CSS (valide) qui s'affiche parfaitement avec Chrome, Firefox et IE8.
Sous IE7 il y a d'importants décalages qui sont sans doute provoqués par mon CSS qui n'est probablement pas optimal mais je ne sais pas identifier pourquoi...
Vous l'aurez compris, je cherche une solution pour que le site s'affiche exactement de la même manière sur IE8 qu'IE7.

Le site est visible à l'adresse suivante : http://draenor.nuxit.net/sandbox/index.php et le CSS en question est là : http://draenor.nuxit.net/sandbox/style.css

Merci d'avance pour vous remarques et améliorations.

Bonjour

Je crois que l'utilisation abusive des marges soient la bonne méthode pour un positionnement idéal.

Voici un exemple de ce qui est plus approprié à mon avis. Je n'ai rien changé à ta structure HTML. J'ai viré toutes les marges et j'ai mis des éléments flottants à div#main_text, div#news et div#flash_accueil. J'ai mis un overflow:hidden sur ton div#container_accueil pour "contenir" les floats.

Ça fonctionne dans IE6-7-8, Chrome, Opéra et Firefox

body {
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	text-align: center;
}
#site {
	width:1024px;
	margin-top:30px;
	margin-left: auto;
	margin-right: auto;
}
#header {
	height:192px;
	width:1024px;
}

#menu {
	height:44px;
	width:1024px;
}

#container_accueil {
	height:503px;
	width:1024px;
	overflow:hidden;
}

#main_text {
	width:437px;
	float:left;
}



#news {
	width:281px;
	height:123px;
	float:right;
}

#flash_accueil {
	margin:45px 0 0 0;
	float:right;
	clear:both;
	height:324px;
	width:297px;
	background-color:#1d1f21;
}


#footer {
	height:51px;
	width:1024px;
}
#vip a {
	height:71px;
	width:229px;
	display:block;
}

Au fait, si tu veux adapter ton site à une résolution de 1024x768 px, c'est 980 de large que doit prendre ton site plutôt que 1024 px en ce moment.

Il y a des CSS redondants, notamment ceux sur la couleur "white". Tu pourrais très bien dire mettre la couleur dans la body et spécifié une couleur aux textes qui ne sont pas blancs plutôt que l'inverse. La notion de "Cascade" dans "Cascading Style Sheets" est pertinente à utilisée

Bien que généralement tu seras peut-être le seul à jouer dans ton CSS mais puisque là c'est pas le cas, ce serait bien que ce soit mieux organisé Avec des commentaires, les éléments regroupé par "bloc" et tout ça là !

Par exemple le CSS #footer, devrait être après #news ( car dans le code il est après et que le footer c'est un pied de page alors que ce serait naturellement mieux si le CSS associé à la fin du HTML, qui est associé à la fin de la page soit aussi à la fin du CSS. J'imagine que tu comprends ?
Modifié par Sorano (16 Feb 2010 - 14:57)

Merci beaucoup, je vais tester ça !

Concernant la taille en fait je ne suis pas l'auteur du design, les .psd me sont transmis par les graphistes et je m'occupe ensuite d'en faire l'intégration

Effectivement mon CSS est assez bordélique et je gagnerai du temps à le rendre plus lisible, y compris pour moi.

Soit j'ai rien compris soit j'ai fait n'importe quoi mais ça fait donne pas du tout un bon résultat

Si je vire les marges de mes div ça donne un joyeux foutoir et ce sur tous les navigateurs (ce qui me semble assez logique d'ailleurs).

Pourtant, dans Firefox avec FireBug, si j'ajoute ceci à ton code CSS, sans rien enlever ou modifier à tes autres CSS ou jouer dans ta structure HTML, ça fonctionne bien pour la page de l'index. Il ne resterait que ton footer à positionner de la façon que tu veux puisque de ce que j'avais vu, ça ne causait pas de problème dans IE7.

Donc si tu veux, en bas de ta feuille CSS tu n'as qu'à ajouter ce bout de code et tu verras bien si ça fonctionne ou pas.

html body #site * { margin-left:0px; margin-top:0px; }
body #site #container_accueil {  
    height:503px;  
    width:1024px;  
    overflow:hidden;  
}  
  
body #site #main_text {  
    width:437px;  
    float:left;  
}  
  
  
  
body #site #news {  
    width:281px;  
    height:123px;  
    float:right;  
}  
  
body #site #flash_accueil {  
    margin:45px 0 0 0;  
    float:right;  
    height:324px;  
    width:297px;  
    background-color:#1d1f21;  
}  

Cependant, il est évident qu'il peut y avoir des techniques plus adéquates qui nécessiteraient de modifier ta structure html et tes CSS. Ma solution proposait une solution rapide et efficace sans trop se poser de question

Si ça marche toujours pas, je te ferai un autre exemple.

J'ai ajouté ton code à la fin de mon CSS comme tu l'as préconisé mais comme tu peux le voir ça ne règle pas le problème. J'ai de nouveaux décalages que j'avais pas avant.
Je commence à être grave sous pression, le restaurant ouvre le 2 mars et reçoivent toute leur publicité et communication (avec l'adresse du site bien sûr) demain !
Modifié par albator1932 (22 Feb 2010 - 09:46)

J'ai un autre site : http://draenor.nuxit.net/sandbox/batidev/

Et même topo, des décalages intempestifs sur IE7. Pourtant cette fois j'ai limité un max les marges négatives...

À première vue, tu as un margin sur ton #header et un sur le body ce qui créé, sans doute, le décalage.

Dans mon test, j'ai enlevé le margin de sur div#header et ça semblait bien fonctionner partout.

Ton problème vient sans doute de la fusion des marges qui sont interprétées différemment sur IE6-7. Fusion des marge

D'où l'utilité d'un "reset" sur ton CSS afin de partir les navigateurs au même niveau.

Technique du Reset CSS

Merci pour ta réponse, j'ai regardé de plus près cette histoire de marge et j'ai résolu en haut et donc le décalage induit par contre j'ai toujours pas compris pourquoi le footer (qui est un png avec transparence) ne vient pas se superposer sur le bas du div et s'affiche à coté bêtement sur IE7.

OK j'ai trouvé !
En fait IE7 (et précédents) n'aime pas trop position:absolute donc j'ai remplacé par un float:left et un margin-top:-100px et plouf ça le fait !

Merci à tous !