Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1456 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu CSS et IE6

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu CSS et IE6

n°1576998
xdoomer01
Posté le 19-06-2007 à 20:24:07  profilanswer
 

Bonjour,
 
j'ai sur le site que j'ai développé un menu en css horizontal du type <ul><li></li></ul>, le problème est que sa marche très bien sur firefox 2et internet explorer 7 mais sa passe pas sur internet explorer 6.
 
Voila mon code css :
 

Code :
  1. /** MENU **/
  2. /* Dropdown Menu */
  3. ul#menu
  4. {
  5.  position: relative;
  6.  float: left;
  7.  width: 700px;
  8.  list-style-type: none;
  9.  margin-top: 2px;
  10.  margin-left: 1px;
  11.  padding-left: 1px;
  12.  margin-left: auto;
  13.  padding-top: 5px;
  14.  padding-bottom: 5px;
  15.  border-bottom: #aaaaaa solid 1px;
  16. }
  18. ul#menu li
  19. {
  20.  float: left;
  21.  padding: 0px;
  22.  position: relative;
  23.  padding-left: 6px;
  24.  padding-right: 6px;
  25.  list-style-type: none;
  26.  font-weight: bold;
  27.  cursor: pointer;
  28.  font-size: 101%;
  29.  color: #646464;
  30. }
  32. ul#menu li ul
  33. {
  34.  display: none;
  35.  position: absolute;
  36.     top: 1em;
  37.     left: 0;
  38.     border: #aaaaaa solid 1px;
  39.   background-color: #ffffff;
  40.  margin: 0px;
  41.  padding: 0px;
  42.  width: 200px;
  43. }
  45. ul#menu li ul li
  46. {
  47.  float: none;
  48.  padding: 0px;
  49.  margin: 0px;
  50.  font-size: 90%;
  51.  font-weight: normal;
  52.  color: #000000;
  53. }
  54. li > ul
  55. {
  56.  top: auto;
  57.  left: auto;
  58. }
  60. ul#menu li ul li a
  61. {
  62.  border-left: #ffffff 5px solid;
  63.  padding-left: 2px;
  64.  color: #000000;
  65.  border-left: #aaaaaa 5px solid;
  66. }
  68. ul#menu li:hover, ul#menu li.over
  69. {
  70.  color: #CC0033;
  71. }
  73. ul#menu li:hover ul, ul#menu li.over ul
  74. {
  75.  display: block;
  76. }
  78. ul#menu a
  79. {
  80.  border: 0px;
  81. }
  83. ul#menu li ul li a:hover
  84. {
  85.  border-left: #DF0D0D 5px solid;
  86. }


 
Si quelqu'un à une solution elle est la bienvenue,merci ;)

mood
Publicité
Posté le 19-06-2007 à 20:24:07  profilanswer
 

n°1577028
dartyduck
n00b AttitudE
Posté le 19-06-2007 à 23:55:01  profilanswer
 

tu développes un fichier css spécifique pour ie6, uniquement pour les éléments qui merdent, et tu mets une condition dans ton header genre

Code :
  1. <!--[if IE 6]>
  2. <link rel="stylesheet" type="text/css" href="/menu-ie6.css" />
  3. <![endif]-->

Message cité 1 fois
Message édité par dartyduck le 19-06-2007 à 23:55:53

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1577056
gatsu35
Blablaté par Harko
Posté le 20-06-2007 à 07:59:03  profilanswer
 

dartyduck a écrit :

tu développes un fichier css spécifique pour ie6, uniquement pour les éléments qui merdent, et tu mets une condition dans ton header genre

Code :
  1. <!--[if IE 6]>
  2. <link rel="stylesheet" type="text/css" href="/menu-ie6.css" />
  3. <![endif]-->



putain tu pourrais prendre soin de regarder la question, les réponses toutes faites et faciles ça va un moment, mais quand on répond à coté de la plaque, ca fait trop avancer les choses, surtout pour dire au mec de rajouter une autre feuille de style dont on a strictement rien à foutre.
 
donc on répond simplement au monsieur :  
 
 
Ton problème vient du fait que le :hover n'est géré que sur les A sous IE, donc il te faut passer par javascript, donc voici une méthode assez bourrin qui fonctionne bien :  
 

Code :
  1. /* Ajoute la pseudo methode hover sur un élément, via CSS, utilise la classe CSS .hover */
  2.     function addHover(elm) {
  3.         elm.style.behavior = " ";
  4.         if (document.all && window.print && /MSIE [56]/.test(navigator.userAgent)) {
  5.                 elm.style.behavior = " ";
  6.                 elm.onmouseenter = function() {
  7.                     this.className+= ' hover';
  8.                 }
  9.                 elm.onmouseleave = function() {
  10.                     this.className = this.className.replace(/\bover\b/,"" );
  11.                 }
  12.         }
  13.     }
  14.        
  15.         </script>


 
et dans ta CSS :  

Code :
  1. ul#menu li {
  2.   behavior : expression(addHover(this));
  3. }


 
et ensutie il te suffit d'avoir des déclaration du style :  
#menu li:hover, #menu li.over
 
(comme tu as actuellement)
 
 
J'ose penser que ton problème vient de là car ta desscription est juste du vent

n°1708897
cedsprod
Posté le 27-03-2008 à 18:47:19  profilanswer
 

Salut.  
J'ai le meme probleme, à savoir des hover qui ne marchent pas sous IE6 car ils ne sont pas sur un lien.
Mon code css c'est ça:
 

Citation :

.case32 {background:url("images/WebradioOff.jpg" ) top left;}
.case32 img:hover {background:url("images/WebradioOn.jpg" ) top left;}


 
J'essai d'adapter la réponse de Gatsu35 mais je comprends rien et du coup, ca ne marche pas.  
J'ai besoin de votre aide pour adapter le script à mon soucis.  
 
Merci


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu CSS et IE6

 

Sujets relatifs
menu vertical dynamique[RESOLU] Récupérer la valeur d'un menu déroulant
Recherche aide pour programmation CSS/PHPPb menu déroulant entre IE et Firefox
Un Lien dans du CSS?Le déroulement d'un menu qui passe sous un bloc, probléme!
Une telle structure est elle possible en CSS?Menu flash...Help pour la fonction Geturl
Problème affichage menu déroulant CSS/java sous IE[CSS/Blogger] Menu latéral ok sous Firefox, coupé sous IE6
Plus de sujets relatifs à : Menu CSS et IE6

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.053 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR