18041 sujets

Questions générales et questions de débutants

[RESOLU] Problème de décalage sous internet explorer

Bonsoir à toutes et à tous.
Voilà je me decide enfin à poster mon problème après des heures de recherche sans résultat Smiley sweatdrop

regardez cette image:
http://img.skitch.com/20100217-5gs6yd3g9u4qi2njqr3j11d4k.preview.jpg
Click for full size - [color=#A7A7A7]Uploaded with plasq's Skitch[/color]

l'image du haut représente le menu normal sous firefox ou safari
et l'image du bas représente le menu décalé sous internet explorer..

Comment palier à ce problème très embêtant ?

Merci d'avance, anthony
Modifié par popomme (18 Feb 2010 - 13:28)
ah merci beaucoup de m'aider Smiley smile

donc décalage sous internet explorer 6 et 7 et non sous firefox ou safari.

vous pouvez tester ici pour IE 6 et 7 : http://ipinfo.info/netrenderer/

et donc voici le code:

code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
       <title>test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
	<div id="container">
		
		<div id="menu">
			<ul>
				<li><a class="accueil-icon" href="index.html">accueil</a></li>
				<li><a class="prestations-icon" href="#">prestations</a></li>
				<li><a class="engagements-icon" href="engagements.html">engagements</a></li>
				<li><a class="contact-icon" href="contact.html">contact</a></li>
			</ul>
		</div>
	</div>
</body>
</html>


code css:

/*=================================RESET==================================*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { border-color: white; border-width: 0px; border-style: none; margin:0; padding:0;}
a:focus,a:active{ outline:0px; } 
/*================================/RESET==================================*/




/*=================================LIENS==================================*/
a{ text-decoration:none; font-weight:bold; color:#ffffff;}
a:hover{ text-decoration:none; font-weight:bold; color:#ffffff;}
a:active{ text-decoration:none; font-weight:bold; color:#454646;}
a:visited{ text-decoration:none; font-weight:bold; color:#e3e3e3;}
/*================================/LIENS==================================*/


body{font-family: Helvetica, Verdana, Arial, sans-serif; letter-spacing: normal; font-weight: bold; color: #777777; background:black;}
#container-header{width:1080px; margin: 0 auto;}
#container{width:1000px; margin:0 auto;}
	
	#menu-{border-width: 0px; border-style: none; width:1000px; height:100px; margin-top:4px;}



#menu ul{border-width: 0px; border-style: none; list-style-type:none;}
#menu ul li a{ border-style: none; border-width: 0px; display:inline; width:250px; height:100px; float:left; list-style-type:none; text-transform:uppercase; text-align:center; font-size:10px; line-height:180px; font-family:arial; color:#dbdbdb}

a.contact-icon{border-width: 0px; border-style: none; background:url(images/contact-icon.png) top left no-repeat;}
a:hover.contact-icon{border-width: 0px; border-style: none; background:url(images/contact-icon.png) bottom left no-repeat;}


a.engagements-icon{border-width: 0px; border-style: none; background:url(images/engagements-icon.png) top left no-repeat;}
a:hover.engagements-icon{border-width: 0px; border-style: none; background:url(images/engagements-icon.png) bottom left no-repeat;}

a.prestations-icon{border-width: 0px; border-style: none; background:url(images/prestations-icon.png) top left no-repeat;}
a:hover.prestations-icon{border-width: 0px; border-style: none; background:url(images/prestations-icon.png) bottom left no-repeat;}

a.accueil-icon{border-width: 0px; border-style: none; background:url(images/accueil-icon.png) top left no-repeat;}
a:hover.accueil-icon{border-width: 0px; border-style: none; background:url(images/accueil-icon.png) bottom left no-repeat;}




merci encore, j'attends vos réponses
Modifié par popomme (18 Feb 2010 - 13:28)
Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
D'ailleurs si tu donnes un lien vers une page en ligne c'est inutile de donner le code. Smiley cligne

Pour ta question tu pourrais faire :
#menu ul li {
	float: left;
}
ou tout simplement
#menu ul li {
	display: inline;
}


En complément lire Créer des menus simples en CSS.
Modifié par Heyoan (18 Feb 2010 - 01:20)
Voilà j'ai édité mon post. je pensai bien faire en mettant une image + le site + le code (mais je n'avais pas vu qu'on pouvait l'insérer de cette manière désolé)


Merci à toi Heyoan mais j'ai déja mis ces deux codes à la ligne suivante:
#menu ul li a{ border-style: none; border-width: 0px; display:inline; width:250px; height:100px; float:left; list-style-type:none; text-transform:uppercase; text-align:center; font-size:10px; line-height:180px; font-family:arial; color:#dbdbdb}


Donc le problème ne vient pas de là :s
tu aurai une autre suggestion ? (ralala ce IE6 et IE7 Smiley decu )
merci
Modifié par popomme (18 Feb 2010 - 11:51)
popomme a écrit :
j'ai déja mis ces deux codes à la ligne suivante
Sauf que là tu cibles les liens et pas les LI. Tu n'as pas essayé de rajouter mon code ?
ahhhh merci ! Smiley smile
j'ai essayé effectivement avec ta premiere indication (avec le float:left et ça marche apparemment)

cependant je test avec un site en ligne car je n'ai pas internet explorer vu que je suis sur mac. pourrais tu me confirmer que ça fonctionne ?

merci encore
popomme a écrit :
pourrais tu me confirmer que ça fonctionne ?
Ben j'avais vérifié avant de te proposer la solution ! Smiley langue

Mais OK : je te confirme que ça fonctionne avec IE7.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Modifié par Heyoan (18 Feb 2010 - 12:21)
alors je te remercie vraiment, tu m'enléve un gros poids qui m'énervait depuis quelques jours .. Smiley smile
Sujet clos
Aller à