[RESOLU] HTML / CSS décalage sous IE6 / 7 et 8

Bonjour à tous et merci à ceux qui s'intéresseront à mon post.

Voila mon problème est un peu étrange :
Je suis en train de mettre en place un bandeau horizontal contenant des images sur mon site WEB : http://vsdev.free.fr/direct/
Sous FF tout fonctionne bien, les images sont contenus dans le bandeau vert et le bandeau est bien placé sous le header.
Sous IE, en fonction de la version du navigateur, le bandeau est décalé vers le bas...



Quelqu'un aurait il une piste ? Je pense que cela vient des positions relatives mais n'étant pas expert en CSS.. je bute...

Merci par avance
Modifié par toine92 (19 Feb 2010 - 16:09)

Bonjour,

J'ai pas trop le temps ce matin mais essayes de changer quelque chose dans ton menu principal => en changeant le

float: left;

en

display: inline;

sur tes éléments de liste, le défaut disparait. J'ai juste essayer sur IE 8 après je sais pas si ça résout le problème dans les autres versions. C'est peut être une piste.
Après j'essayerai de transformer ton tableau qui contient tes catégories en liste...

Merci pour tes conseils

J'ai modifier :
- le menu principal (orange) en passant les li en inline
- le bandeau vert en transformant le tableau en éléments de menu.

Le rendu se trouve toujours à la même adresse : http://vsdev.free.fr/direct/

Résultat :
- sous FF : OK
- sous IE 8 : OK mais comment figer la largeur que je voudrait de 1px entre les 4 li du menu principal (orange)
- sous IE6 : les images du bandeau sont bien placées maintenant. Par contre le bandeau complet est décalé vert le bas (cf capture d'écran ci dessous)

help !

thanks

Bon, à force de creuser et de tester je crois avoir trouvé.

Ton problème est ici

#links {
height:96px;
left:328px;
margin:0;
position:relative;
top:-96px;
width:600px;
}

Je crois que c'est le top:-96px qui cause des soucis sur certains navigateurs. Je suis prêt à parier que si tu enlève le top négatif te que tu ressaies sur le navigateur qui fait défaut, ton div#links se placera juste au-dessus de ton menu.

J'ai testé ma solution sur tous les navigateurs que j'ai et ça fonctionnait bien.

#header {
	height:96px;
	overflow:hidden;
}

#logo {
	background-image:url(../images/logo.jpg);
	background-position:bottom;
	width:328px;
	height:96px;
	position:relative;
	top:0px;
	left:0px;
	float:left;
}

#links {
	position : relative;
	width:600px;
	margin:0px;
	height:96px;
	float:left;
}

Donc tu pourrais laisser ton menu en block et en float:left puisque a priori, c'est pas lui le problème. Tu pourrais ainsi attribué les largeurs que tu veux et les espacements.

De plus, avoir du texte blanc sur un fond blanc, c'est la meilleure façon de se faire black-listé par Google et les autres moteurs de recherche. J'ignore si c'est voulu ou une erreur mais c'est certainement à corriger.

De plus, tu as un <h1> vide ce qui n'est pas bon.

Tu devrais aussi corriger tes erreurs de validation.
Modifié par Sorano (19 Feb 2010 - 13:35)

Merci beaucoup pour ton aide Sorano !

Ta solution marche à merveille même sous IE6.



Bonne journée à tous !

Très intéressant
j'ai le meme pb de décalgae entre IE 6 (div décalé vers le bas de la fenetre) et IE 8 (ok)
mais je ne vois pas commentle résoudre malgré le post

Voici le code : (le <div id="content"> est bien positionné mais le <div id="search"> nommé info box est lui en bas de la fenetre au lieu d'être aligné horizontalement à la droite)de l'autre div

<div id="content">

<img src="html/img/small_g.gif" class="img-left" />
<h1 > Welcome to the official website of XXX XX –
the European Delegates Meeting of XXX</h1>
<p>XXX . More information about XXX at
<a href="http://www.na.org" target="_blank">www.na.org</a></p>
<h3>The European Delegates Meeting serves for the following communities:</h3>

<h3>Belgium, Bulgaria, <a href="html/edm-croatian-1.htm">Croatia</a>, Czech Republic,
<a href="html/edm-denmark-1.htm">Denmark</a>, Egypt, Estonia, <a href="html/edm-finish-1.htm">Finland</a>,
France, French Speaking Swiss, <a href="html/edm-german-1.htm">German Speaking</a>,
<a href="html/edm-greek-1.htm">Greece</a>, <a href="html/edm-hungary-1.htm">Hungary</a>,
Ireland, <a href="html/edm-hebrew-1.htm">Israel</a>, Italy, Latvia , Lithuania,<a href="html/edm-maltese-1.htm">
Malta</a>, Netherlands, Norway, <a href="html/edm-poland-1.htm">Poland</a>,
<a href="html/edm-portuguese-1.htm">Portugal</a>, Slovenia, <a href="html/edm-spain-1.htm">Spain</a>
, <a href="html/edm-swedish-1.htm">Sweden</a>, <a href="html/edm-tuerkiye-1.htm">Turkey</a>,
United Kingdom, Ukraine, <a href="html/edm-russia-1.htm">Western Russia</a></h3>
<p style="margin-bottom: 0;">
</p>
</div>
<!-- InstanceEndEditable -->
<!--end content -->
<div id="navBar">

<div id="search">
<h3><img src="html/img/information.gif" width="27" height="21" alt="" />Info-Box</h3>
<p><a href="http://www.eccna26.org/" target="_blank">ECCNA 26 in Dead
sea, Israel <br />
2 - 4 september 2010</a></p>
<p></p>
</div>
<!-- InstanceBeginEditable name="info-box" -->
<div class="headlines">
<h3><img src="html/img/links.gif" width="27" height="21" />Links</h3>
<br />
<ul style="margin-bottom: 0">
<li><a href="html/edm-zone.htm">Links Contact EDM-Zone </a></li>
<li><a href="html/edm-links.htm">Further Links </a></li>
</ul>
</div>
<!-- InstanceEndEditable --></div>