28172 sujets

CSS et mise en forme, CSS3

Compatibilité IE/Firefox : Menu décalé

Bonjour,

Je viens de réaliser ce site : www.wseip.com
Il y a une bonne apparence générale sous firefox mais pas sur IE, tous mes ul / li n'ont pas le même espace entre la puce et le texte.
Les deux navigateurs traitent-ils différemment les listes ?

De plus mon menu ne se trouve pas à la même position sur les deux navigateurs et je ne comprends pas pourquoi.
Voici le code html du menu :

<div class="mainmenu">
<ol>
	<li>
		<a href="index.php?dir=wseip&amp;page=wseip">Menu1</a>
		<ul class="submenu" style="left:-1px; top: 20px;">
			<li><a href="index.php?dir=wseip&amp;page=park">Menu1_1</a></li>
			<li><a href="./pdf_sheet/factory_fr.pdf" >Menu1_2</a></li>
			<li><a href="index.php?dir=service&amp;page=service2">Menu1_3</a></li>
		</ul>
	</li>
	<li>
		<a href="index.php?dir=mission&amp;page=mission">Menu2</a>
	</li>
	<li>
		<a href="index.php?dir=service&amp;page=service">Menu3</a>
		<ul class="submenu" style="left:-1px; top: 20px;">
			<li><a href="./pdf_sheet/factory_fr.pdf" >Menu3_1</a></li>
			<li><a href="./pdf_sheet/warehouse_fr.pdf" >Menu3_2</a></li>
			<li><a href="./pdf_sheet/dormitory_fr.pdf" >Menu3_3</a></li>
			<li><a href="index.php?dir=service&amp;page=service2">Menu3_4</a></li>
		</ul>
	</li>
	<li>
		<a href="index.php?dir=location&amp;page=location">Menu4</a>
	</li>
</ol>
</div>


Et voici mon code css :

.mainmenu
{
  position:absolute;
  top:90px;
  left:130px;
  text-align:center;
  font-weight:bold;
  font-size:12px;
  color:#2C318F;
}

.mainmenu ul {margin:0;}
.mainmenu li ul {display: none; position: absolute; width:100%; top: 0px; margin:0px; padding: 0px; background-color: #B8CDEA; border: 1px solid #B0B0B0;}
.mainmenu li { list-style-type: none; position:relative; float:left; min-width:90px; height:15px; padding: 3px; margin: 0px; margin-left:20px;}
.mainmenu ul li {clear:left; list-style-type: none; position:relative; height:15px; width:94%; padding: 3px; margin: 0px;}
.mainmenu li:hover {background-color:#E8ECF5;}
.mainmenu li:hover ul.submenu, .mainmenu li.sfhover ul.submenu {display: block;}
.mainmenu li a {text-decoration:none; color:#2C318F; font-weight:bold;}


Le menu est positionné en absolute donc il ne devrait pas avoir de décalage dans la position...

Merci d'avance,

a+
Salut,
Athur69 a écrit :
Et c'est moi où il y a un problème dans ton css : tu as des ul li et des li ul
Là je crois que tu es allé un peu vite, Arthur69... Smiley cligne
a écrit :
Il y a une bonne apparence générale sous firefox mais pas sur IE
Merci de préciser la version, les trois principales versions actuelles étant très différentes. Sous IE8, ton menu passe parfaitement ; sous IE7 il est mal positionné mais fonctionne ; sous IE6 il est mal positionné et ne fonctionne pas.
a écrit :
Les deux navigateurs traitent-ils différemment les listes ?
Oui, comme beaucoup d'autres éléments. Si tu ne souhaites pas t'ennuyer avec ces problèmes, il peut être intéressant de t'en occuper dès les premières lignes de ta feuille de style.
a écrit :
Le menu est positionné en absolute donc il ne devrait pas avoir de décalage dans la position...
Ton menu étant positionné en absolu, il est, je te rassure, placé exactement au même endroit partout. Par contre, dans Firefox (et IE8 et Safari et Opera...), la <ol> de ton menu (qui devrait d'ailleurs être une <ul>) a une marge supérieure qui la "pousse" vers le bas. Un simple margin-top explicite sur ta <ol> harmonisera la position de ton menu sous tous les navigateurs.
Modifié par marcv (30 Apr 2009 - 11:25)
Sujet clos
Aller à