Accueil
Forums
Turoriaux
Inscription
Connexion
Fil RSS
Bienvenue invité !
Samedi 22 Novembre 2008
Vous êtes ici: Crea-paradise.com > Forums > Entraide > xHtml/CSS > Menu déroulant > Lecture du sujet

Menu déroulant

Pas le même affichage entre IE et FF


1
Auteur Message
> Posté le : 10/06/2008 22h38
Avatar de slek22


Groupe : Modérateurs
Messages : 560

Bonjour,
J'ai actuellement un problème avec mon menu déroulant
Il s'affiche parfaitement sous FF mais pas sous IE
Mon menu deroulant est disponible ici
Sinon, voici mon code en commençant par le html :
Code (x)HTML:
<ul id="menu">
<div class="imggauche">
<img src="./design/images/menu/gauche.png" alt="k4ul" />
</div>
        <li>                <a href="membre.php" class="menu">Bureau</a>
        </li>      
        <li>
                <a href="#" class="menu">Elevage</a>
                
                        <li class='liste'><a href="#">Etable</a></li>
                        <li class='liste'><a href="#">Porcherie</a></li>
                        <li class='liste'><a href="#">Poulailler</a></li>
                        <li class='liste'><a href="#">Clapier</a></li>
                        <li class='liste'><a href="#">Salle de traite</a></li>
                        <li class='listebas'><a href="#">Ruche</a></li>
                
        </li>
        <li>
                <a href="#">Culture</a>
                
                        <li class='liste'><a href="#">Parcelles</a></li>
                        <li class='listebas'><a href="#">Vignes</a></li>
                
        </li>      
        <li>
                <a href="#">Stockage</a>
                
<li class='liste'><a href="#">Hangar</a></li>
<li class='liste'><a href="#">Silo</a></li>
<li class='liste'><a href="#">Fosse à fumier</a></li>
<li class='listebas'><a href="#">Fosse à lisier</a></li>
                
        </li>
        <li>
                <a href="#">Transformation</a>
        </li>  
        <li>
                <a href="#">Village</a>
                
                        <li class='liste'><a href="bistro.php">Bistro</a></li>
<li class='liste'><a href="#">Banque</a></li>
                        <li class='liste'><a href="#">Coopérative</a></li>
                        <li class='liste'><a href="#">Concession</a></li>
                        <li class='liste'><a href="#">Vétérinaire</a></li>
                        <li class='listebas'><a href="#">Marché</a></li>
                
        </li>  
<div class="imggauche">
<img src="./design/images/menu/droite.png" alt="k4ul" />
</div>
</ul>

Et pour finir mon CSS :
Code CSS:
#menu, #menu ul /* Liste */    
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 20px; /* on défini une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
margin-top :8px;
margin-bottom :37px;
        font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
        width : 700px;
}
 
 
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 115px; /* largeur */
color : #000; /* Couleur du texte, actuellement = noir*/

}
 
#menu li /* Elements des listes */      
{
        float : left;
        /* pour ie qui ne reconnaît pas "transparent" */
        width : 115px; /* largeur */
        background : #1bc830; /* couleur de fond */  
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{

}
 
#menu li ul /* Sous-listes */
{
        position: absolute; /* Position absolu */
        width: 100px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoi loin du champ de vision */
 
}
 
#menu .liste
{
background : transparent url("images/menu/liste.png")no-repeat ;
}
 
#menu .listebas
{
background : transparent url("images/menu/listebas.png")no-repeat ;
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 0px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
 
/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
color : #000; /* Couleur du texte, actuellement = noir*/
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
color : #000; /* Couleur du texte, actuellement = noir*/
}
.imggauche
{
float:left;
}
.imgdroite
{
float:right;
}

D'où viens mon problème ?
Merci d'avance pour votre aide
Oneo-studio.com | Conception web, Graphisme et Référencement !
> Posté le : 11/06/2008 15h18
Avatar de Cheaterman


Groupe : Membres
Messages : 270

IE n'a jamais vraiment apprécié le CSS... La meilleure solution selon moi est celle de Crea-Paradise :

Code JAVA:
if(navigator.userAgent.indexOf('MSIE 6.0')!=-1){
document.getElementById('idDunDiv').innerHTML='Internet Explorer c'est le mal ! Essaie //www.mozilla-europe.org/fr/products/firefox/">Firefox !
A bientôt !';
}


Tu as essayé avec IE 6 & 7 ou seulement le 6 (ou seulement le 7) ?

EDIT : Typo : On écrit "Hangar" et "Bistrot".
> Posté le : 11/06/2008 16h17
Avatar de slek22


Groupe : Modérateurs
Messages : 560

Oui, moi aussi, je suis un fervent défenseur de Mozilla Firefox mais il faut savoir qu'une grande majorité des internautes utilisent encore Internet Explorer...
Autrement je sais juste que sous IE 6, ça bug (pour les version antérieur par contre, je n'en ai aucune idée)!
Oneo-studio.com | Conception web, Graphisme et Référencement !
> Posté le : 11/06/2008 16h31
Aucun avatar


Groupe : Membres
Messages : 50

salut slek,
Ayant essayé sous la derniere version d'IE, je peux te dire que lorsqu'on passe sur un lien, le tout s'affiche en vert.
Dofus-Screen : Partagez, Consultez, Commentez des milliers de screen sur dofus !
> Posté le : 11/06/2008 16h33
Avatar de Ascott


Groupe : Membres
Messages : 301

Oué vive FF , parce que IE ça pue un peu quand même, j'ai eu plien soucis , genre , vos 200 (environ bien sûr ) favories qui disparaissent.

Ca met de bonne humeur

Enfin si jl'est avais enregistrer aussi
Chuck Norris peut te faire passer un sale quart d'heure en 8 minutes.
L'infographie bien plus qu'une passion ...
> Posté le : 11/06/2008 16h40
Avatar de Cheaterman


Groupe : Membres
Messages : 270

Citation: slek22
Oui, moi aussi, je suis un fervent défenseur de Mozilla Firefox mais il faut savoir qu'une grande majorité des internautes utilisent encore Internet Explorer...
Autrement je sais juste que sous IE 6, ça bug (pour les version antérieur par contre, je n'en ai aucune idée)!

Pour simplifier, inutile d'espérer qu'un code CSS (même bien fait) marche sous IE6. Il faudra te rabattre sur du JS.
> Posté le : 11/06/2008 16h57
Avatar de slek22


Groupe : Modérateurs
Messages : 560

Contrairement à ce que vous dites, je pense qu'il doit bien exister une solution pour que mon CSS marche sous IE et sous FF...
Oneo-studio.com | Conception web, Graphisme et Référencement !
> Posté le : 11/06/2008 18h45
Aucun avatar


Groupe : Membres
Messages : 50

Un beau p'tit menu en flash sous IE ? 
Dofus-Screen : Partagez, Consultez, Commentez des milliers de screen sur dofus !
> Posté le : 13/06/2008 13h22
Avatar de Cheaterman


Groupe : Membres
Messages : 270

Flash c'est un peu lourd : En effet, un utilisateur suffisamment dépassé pour utiliser IE (le 6 a fortiori) n'aura pas une connection assez pêchue pour que le menu se charge vite... Autant le faire en JS.
> Posté le : 13/06/2008 13h25
Avatar de Drahl


Groupe : Membres
Messages : 134

Euuhhh je me sent pas dépassé, ni mon entreprise. Les ordis sont sous WinXP SP2 et pourtant c'est IE6 que je suis obligé d'utiliser au boulot. Et la connection internet est très convenable...
La boutique des meilleurs Jeux-Vidéo...
Comparateur web.
> Posté le : 13/06/2008 13h29
Avatar de Cheaterman


Groupe : Membres
Messages : 270

Obligé ? Le SP2 propose forcément la mise à jour vers IE7. Si ton entreprise la refuse, c'est son affaire...
> Posté le : 13/06/2008 18h04
Avatar de slek22


Groupe : Modérateurs
Messages : 560

Citation: Angels-Sunshine
Un beau p'tit menu en flash sous IE ? 

Non, je tiens a rester sur du JS
Mais en tenant compte de cette contrainte, personne ne trouve mon erreur ?
Oneo-studio.com | Conception web, Graphisme et Référencement !
> Posté le : 14/06/2008 12h31
Avatar de Cheaterman


Groupe : Membres
Messages : 270

J'ai pas trop regardé, mais si ça marche sous FF, y'a pas d'erreur.
> Posté le : 19/06/2008 12h22
Aucun avatar


Groupe : Membres
Messages : 50

Citation: Cheaterman
J'ai pas trop regardé, mais si ça marche sous FF, y'a pas d'erreur.

Bah l'erreur est que ça marche sur firefox.
Souvent sur ff ça marche et pas sur IE ...
Dofus-Screen : Partagez, Consultez, Commentez des milliers de screen sur dofus !
> Posté le : 03/07/2008 15h31
Avatar de Cheaterman


Groupe : Membres
Messages : 270

Je ne sais pas trop : Un jour, j'ai fait une erreur de syntaxe dans mon code CSS. Le code ne s'affichait pas du tout sous Firefox, mais nickel chrome avec IE6 et Konqueror. Donc Firefox est plus exigeant.
> Posté le : 03/07/2008 17h53
Avatar de slek22


Groupe : Modérateurs
Messages : 560

J'aurais plutôt tendance à dire le contraire même si mon problème actuel le contredit !
Oneo-studio.com | Conception web, Graphisme et Référencement !
1