[C bon]Background non fonctionnel avec mon Hover sous IE

Bonsoir,

Donc mon CSS est un menu, avec un hover en background. Cela marche sous FireFox, mais IE rien.

Voici le code:

.menu_cadres ul{float:left;width:200px;margin-top:5px;border: 1px solid red;text-align:center;}
    .menu_cadres li{display:block;width:170px;border: 1px solid purple;}
    .menu_cadres a{display:block;text-decoration:none;color:black;}
    .menu_cadres a:hover{display:block;color:yellow;}
    .menu_cadres li:hover{display:block;background-color:red;}

j'ai rajouté des displays block, faut toujours en rajouter plus pour IE, mais cela fait rien du tout.

Une idée ?
Modifié par Diana (13 Jun 2007 - 23:41)

Hum ...
Peut-être simplement parce que IE n'accepte l'instruction hover que sur les liens.

Par contre, j'ai franchement du mal à comprendre ce que ton CSS est censé faire. Tu te prends la tête pour pas grande chose.

Pour régler ton problème :
- indique à ton lien qu'il doit occuper tout l'espace de ton élément de liste
- puis affecte les propriétés voulues au survol.

Voilà qui devrait fonctionner

Bonsoir,

C'est un peu abstrait pour moi, un exemple ?

Voici ce que cela fait:

http://isis.no-ip.info/site2/cours/

le reste du code est un peu particulier:

 <?php
         echo'<span class="menu_cadres">
         <ul>
         <li><a href="index.php?frame_a=mesures">Mesures informatique</a></li>
         <li><a href="index.php?frame_a=antiv_web">Sécurité informatique</a></li>
         <li><a href="index.php?frame_a=antisp">Abc logiciels</a></li>
         <li><a href="index.php?frame_a=antisp">Traduction logiciel</a></li>
         <li><a href="index.php?frame_a=antisp">Astuces sites web</a></li>
         </ul>
          </span>';
          ?>

Modifié par Diana (13 Jun 2007 - 22:55)

Il me semble que déjà, tu as une information inutile dans ton code : le <span> ne sert à rien ...

<ul class="menu_cadres">
     <li><a href="index.php?frame_a=mesures">Mesures informatique</a></li>
     <li><a href="index.php?frame_a=antiv_web">Sécurité informatique</a></li>
     <li><a href="index.php?frame_a=antisp">Abc logiciels</a></li>
     <li><a href="index.php?frame_a=antisp">Traduction logiciel</a></li>
     <li><a href="index.php?frame_a=antisp">Astuces sites web</a></li>
</ul>

L'idée c'est simplement de limiter au maximum les instructions inutiles qui ne servent à rien, à part éventuellement faire planter le reste...

Du coup pour éviter l'instruction hover sur ton élément de liste <li>, je te conseille simplement de tout basculer sur ton lien <a>, car là ... Ca fonctionne.
Or, tu aimerais un arrière-plan sur tout ton éléments de liste, la seule solution à partir de la méthodologie exprimée ci-dessus est d'indiquer à ton lien de prendre tout l'espace.

C'est plus clair comme ça ?
Modifié par Cygnus (13 Jun 2007 - 23:06)

Mouai, je vais revoir ça. Et réfléchir. Je reviendrai si ça va pas
Modifié par Diana (13 Jun 2007 - 23:34)

ben voilà, j'ai tout balancé sur le a:Hover, et ça roule ma poule
Dieux sait que j'y avais pas pensé.

Merki monsieur

Diana a écrit :
Merki monsieur

Mademoiselle, ça ira aussi ...

Ben je reviens car j'ai un espace qui n'a pas lieu d'être, j'ai relu mon code, mais je n'ai rien déclarer:

body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
        margin: 0;
        padding: 0;text-align:center;
    }
    #conteneur{position:relative;width:990px;margin:0 auto;/*border:1px solid red;*/}
    #top{width:990px;height:35px;margin: 0 auto;background:red;background:url("img/barreb.jpg") repeat-x;}
    #gauch{float:left;width:35px;height:5220px;left:0px;margin-top:10px;background: blue;background:url("img/barreg.jpg") repeat-y;}
    #droit{float:right;width:35px;height:5220px;right:0px;margin-top:10px;background: blue;background:url("img/barred.jpg") repeat-y;}
    #head{width:880px;margin: 0 auto;margin-bottom:10px;background: url("img/header.png") no-repeat center 0;/*background:pink;*/}
    #text{width:880px;margin:0 auto;margin-top:20px;margin-bottom:50px;text-align:left;background:url("img/save.jpg") repeat-y;border:1px solid red;}
    .red{color:red;font-weight:bold;}
    img{border:none;}
   
    #text h3{color:green;text-decoration:underline;margin-top:30px;text-align:center;}
    #text p{font-size:1.3em;margin:0;padding:0;text-align:justify;margin-top:10px;} 
    .menu_cadres ul{float:left;width:200px;margin-top:5px;border: 1px solid red;}
    .menu_cadres li{display:block;list-style-type:none;width:170px;height:30px;line-height:30px;margin-top:5px;border: 1px solid purple;text-align:center;}
    .menu_cadres a{display:block;text-decoration:none;color:black;}
    .menu_cadres a:hover {display:block;color:yellow;background-color:green;}
    
    #contenu{width:660px;height:200px;margin-left:210px;margin-top:5px;border:1px solid green;} 
    #pieds{clear:both;width:990px;height:35px;margin: 0 auto;background:yellow;background:url("img/barrev.jpg") repeat-x;}}

L'espace est entre le cadre rouge et le menu, si je le réduit pas, mon cadre contenant Bienvenue ne se placera pas.

Je ne vois pas trop

http://img180.imageshack.us/img180/6358/20070614000707ty6.jpg
Modifié par Diana (14 Jun 2007 - 00:09)