Menu horizontaux s'affichent a la verticale sur IE

Bonjour,

je me suis récemment remis a coder en html/css et a mettre a jour mes connaissances pour dépanner un ami qui veut que je change le visuel de son site ( www.tetragones.com) et je rencontre actuellement un problème de compatibilité avec IE.

Sur FF, chrome et safari mes menus s'affichent à l’horizontal comme je le veux et sans puces, mais sous IE ils reviennent à la verticale et les puces s’affichent.

voici l'adresse de la page d'accueil provisoire qui pose problème ,http://s527121878.onlinehome.fr/

ça fait plusieurs heures que je m'arrache les cheveux dessus et ça sera vraiment super d'avoir une solution.

Merci d'avance pour toutes vos réponses.(ci-joint le code)

	<nav id="navsoc" >
    			<ul>
                	<li><a class="lien1" href="#"><img src="images/boutonrss.png"></a></li>
                    <li><a class="lien1" href="#"><img src="images/boutontwit.png"></a></li>
                    <li><a class="lien1" href="#"><img src="images/boutonfcb.png"></a></li>
                </ul>
    </nav>
    
    <div id="header">
    	
    		<img src="images/logo.png"  id="logo"/>
     	
    </div> 	
     	
        <nav id="nav" >
      		<ul >
      			<li><a class="lien1" href="#"><img src="images/contactlien.png"></a></li>
        		<li><div class="trait"><img src="images/traitmenu1.png"></div></li>
        		<li><a class="lien1" href="#"><img src="images/Webdesign.png"></a></li>
        		<li><div class="trait"><img src="images/traitmenu1.png"></div></li>
        		<li><a class="lien1" href="#"><img src="images/lagence.png"></a></li>
       		 </ul>
          </nav>   
		

#logo			{float: left;margin-bottom:50px;}
#nav					        {padding: 0;float:right;}
#nav li					{ list-style:none;float:right;} 
#navsoc					{padding: 0;float:right; margin-right:50px;}
#navsoc li 				{list-style:none;float:right;margin:10px;display:inline;list-style-image: none;}

Modifié par Lakhramp (03 Jun 2014 - 18:40)

bonsoir,

tu es sous IE 8 c'est ça ? sous IE11 ça s'affiche bien mais sous IE8 , c'est comme si ton CSS n'était pas lu. essaie de faire un fichier CSS seulement pour IE8 et de le charger uniquement pour IE8 pour voir.
Modifié par eviouchka (03 Jun 2014 - 20:31)

Je n’ai pas regardé sur IE8 mais je suis prêt à parier : la balise <nav> (HTML5) n’est pas reconnue. Si IE8 n’a pas d’instructions pour ces nouveaux éléments (html5shim.js par exemple) il ne les prend pas en compte et décale le DOM environnant comme si ils n’existaient pas.

En l’occurrence, ton menu ne serait plus dans <nav id="nav"> et par conséquent tes styles ne s’appliqueraient pas comme attendu.

Je ne vois rien dans ta source pour permettre à IE8 de gérer les éléments HTML5, donc je pense que ton problème vient de là.

Bon courage !

Hello!

Je rejoins la réponse de Ten, c'est probablement tes balises HTML5 qui ne sont pas supportées sur les vieux navigateurs < IE9.
Il existe des solutions si tu veux conserver ta structure html5 et qu'elle soit aussi lisible sous les vieux IE. C'est d'intégrer des scripts JS à intégrer dans le head, pas besoin de code de ta part.
Il en existe plusieurs, parmi cela :
HTML5 Shiv : https://code.google.com/p/html5shiv/
Modernizr : http://modernizr.com/

Bon code !