Menu déroualant sous IE

Utilisateur anonyme -  
 Utilisateur anonyme -
Bonjour,
Je suis entrain de créer un petit site internet, j'y ait crée un menu déroulant. J'ouvre avec Firefox : impeccable ! bonnes dimensions et tout !
J'ouvre avec IE : Misère... le menu censé être horizontale fait la largeur de la page mais les titres sont écrits en colonnes et mes sous titres (menu déroulant) s'affichent à l'autre bout de la page. Ca m'embête vachement !

Comment dois-je faire pour que mes visiteurs de IE voient un menu potable ??
A voir également:

4 réponses

notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Pas trop le temps là...

Je te donne au moins le code correct, après, il va falloir peaufiner la CSS.

<ul id="nav">  
 <li><a href="index.html">Accueil</a></li>  
 <li><a href="#nogo">TITRE 1</a>  
  <ul>  
   <li><a href="#nogo">SOUS-TITRE</a></li>  
   <li><a href="#nogo">SOUS TITRE</a></li>  
   <li><a href="#nogo">SOUS TITRE</a></li>  
  </ul>  
 </li>  
 <li><a href="#nogo">TITRE 2</a>  
  <ul>  
   <li><a href="#nogo">SOUS TITRE</a>  
    <ul>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
    </ul>  
   </li>  
   <li><a href="#nogo">SOUS TITRE</a>  
    <ul>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
    </ul>  
   </li>  
   <li><a href="#nogo">SOUS TITRE</a>  
    <ul>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
     <li><a href="http://Adresse du lien.html">sous sous titres</a></li>  
    </ul>  
   </li>  
  </li>  
</ul>

<blockquote cite="Shakespeare">To be or not to be ; That is the question...</blockquote>
2
Utilisateur anonyme
 
lol c'est magique : tout marche à merveille ! MERCI !!!! tu es encore le réponse à tout ^^ un jour je te coincerai ^^
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Ah, j'ai loupé la chronologie des messages !! Comme je le disais plus bas (bien qu'avant), il y a tout de même des pbs de marges.

(et je précise aussi que je n'ai pas d'actions à la MAAF ;-D )
0
Utilisateur anonyme
 
effectivement, il y a un problème de marges et mes titres ne sont pas centrés dans leur cellule et ça parait bête mais je n'arrive pas à comprendre pourquoi ^^
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Pas eu le temps de répondre plus tôt, mais voici les corrections à apporter pour régler les pbs de marges. Il n'y a que 2 choses à changer :

#nav,  
#nav ul {padding:0; margin:0; list-style:none; font: 15px comic sans ms; border:1px solid #000; border-color:#000; border-width:1px 1px 1px 1px; background:#ffcc66; position:relative; z-index:200;}  

#nav li:hover ul {left:0; top:30px}


[edit] Et je me suis concentré sur le pb de marges, mais ce code n'est vraiment pas optimisé pour le reste...

Je recommence :
#nav,  
#nav ul {padding:0; margin:0; list-style:none; font: 1.1em 'comic sans ms', sans-serif; border:1px solid #000;  background:#ffcc66; position:relative; z-index:200;}
0
Utilisateur anonyme
 
Merci t'es mon sauveur ^^
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Quelle version d'IE ?

Peux-tu nous mettre le code complet html+CSS ?
0
Utilisateur anonyme
 
la version d'IE, je m'en fiche un peu : ce n'est pas moi qui choisirai la version d'IE de mes visiteurs !

sinon le code c'est :

Le code du menu est :

----HTML---- :

<center>
<script type="text/javascript">

stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>

<ul id="nav">



<ul>
</ul>
<li><a href="index.html">Accueil</a>
<ul>

</ul>
<li><a href="#nogo">TITRE 1</a>
<ul>

<li><a href="#nogo">SOUS-TITRE</a>
<ul>

</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>

</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>

</ul>
</li>



</ul>
<li><a href="#nogo">TITRE 2</a>
<ul>
<li><a href="#nogo">SOUS TITRE</a>
<ul>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
</ul>
</li>

</ul>

</ul>
</ul>
</center>
<br>



-----CSS----


#nav,
#nav ul {padding:20 0 5px 0; margin:0; list-style:none; font: 15px comic sans ms; border:1px solid #000; border-color:#000; border-width:1px 1px 1px 1px; background:#ffcc66; position:relative; z-index:200;}
#nav {height:30px; width: 961px; padding:0;}

#nav li {float:left;}
#nav li li {float:left;}

* html #nav li li {float:left;}

#nav li a {display:block; float:center; color:#000; border-right:1px solid #000; border-color:#Ffcc66; margin:0 10px 0 10px; height:30px; line-height:30px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}

* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}

* html #nav ul {width:1px;}


#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}

#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}

#nav li:hover > a {text-decoration:underline; color:#;}



#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:0px; margin-left:100%; top:5px;}


#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}


#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#FF0000;} /* Hover sur les liens */


#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#000;} /* Les liens */
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Ah si, c'est important de connaitre la version ! Car si c'est un pb de CSS, les solutions à apporter ne seront pas forcément les mêmes.

Et autre question subsidiaire, as-tu bien mis un doctype ?
0
Utilisateur anonyme
 
pour le doctype, pour être honnête je ne sais même pas ce que c'est ! ^^
Sinon je suis sous internet explorer 8 mais je ne l'utilise jamais : Vive Mozilla !
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
oui ;)
Mais même pour Mozilla il faut mettre un doctype.
voir ici :
http://www.pompage.net/traduction/le-doctype-qu-il-vous-faut
0
Utilisateur anonyme
 
Snif... Je comprend rien au lien que tu m'as donné... :'(
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Déjà, le code html, ça ne va pas.
Il y a des <ul></ul> qui ne servent à rien, des <li> mal imbriqués...

Tu l'as péché où ce code ?
0
Utilisateur anonyme
 
Me souvient plus ^^
Aide moi STP =D
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Tu n'as pas répondu sur la question du doctype.... (or c'est très important !)
0