28172 sujets

CSS et mise en forme, CSS3

Bonjour, je (re-)viens vers vous avec un problème que je viens de constater. Ayant codé mon site récemment je suis entrain de le tester sur de multiple browser du plus utilisé (IE6+) à ceux que je n'utilises jamais! Il fonctionne normalement sur IE, Chrome, Safari même si il y a de légères différences dans la disposition mais celà n'est pas un problème!

Par contre en lançant Firefox 3.6 & 4... voilà ce qui survient à mes sous-menus! J'ai cherché un peu mais là je suis à cours d'idées pour régler le problème. Smiley fache Pour ceux qui ne verrait pas, mes sous-menus se décalent et se retrouve coller à la bordure haute de la fenetre et donc incliquables...

http://www.noelshack.com/uploads/images/15228168980805_compare.jpg

Le code CSS
#nav, #nav ul{position:relative; z-index:3; margin:auto;padding:0;font-family:'Lobster', Arial, Helvetica, sans-serif;font-size:15px; display:table;}
#nav, #nav ul{padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:1.5em;margin-top: 0;	margin-right: auto;	margin-bottom: 0;margin-left: auto;visibility: visible;}
#nav a{text-decoration:none; color:#e85412; display:block; padding:10px 15px;}
#nav li{float:left;	margin:5px 10px 5px 0;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color: #303030;}
#nav ul {position:absolute;display:none;width:5.94em;top:-1em;}
#nav li ul a{text-align:center;font-size:15px; width:6em; height:1.5em;float:left;}
#nav ul ul{top:auto;}	
#nav li ul ul {left: 12em; margin: 0px 0 0 10px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;}

	section#menu {
	height: 20px;
	float: none;
	padding-bottom: 50px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


<section id="menu">
<ul id="nav" name="nav">
	<li><a href="activites.html">Actualités</a></li>
     <li><a href="asbl.html">Présentation ASBL</a></li>
     <li><a href="contact.php">Contact</a></li>
     <li><a href="artistes.html">Artistes</a></li>
     <li><a href="partenaires.html">Partenaires</a></li>
      <li><a href="#">Infos Pratiques</a>
	<ul>
	  <li><a href="manger.html">Où Manger?</a></li>
	  <li><a href="dormir.html">Où Dormir?</a></li>
	  <li><a href="covoiturage.html">Co-voiturage</a></li>
	 </ul>
     </li>
     <li><a href="#">Médias</a>
     <ul>
     <li><a href="photos.html">Photos</a></li>
	 <li><a href="videos.html">Vidéos</a></li>
     </ul>
     </li>
</ul>
</section>


Et si quelqu'un utilisant Opera pouvait me donner un retour ca serait très sympa Smiley confused
Modifié par khios (11 May 2011 - 15:26)
Résolu, je donne quand même la solution

Firefox, contrairement à Chrome & IE, ne semble pas apprécier
top: -1em

#nav ul {position:absolute;display:none;width:5.94em;top:-1em;}
le top se trouvant pour lui en haut de la page et nan par rapport au menu ouvrant le sous-menu!

Retirer cet argument a fixé le problème mais alors comment positionner le menu comme on le souhaite? Suite au prochain numéro
Modifié par khios (11 May 2011 - 15:29)