Menu CSS et IE6

Menu CSS et IE6 - HTML/CSS - Programmation

Marsh Posté le 19-06-2007 à 20:24:07    

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 ;)

Reply

Marsh Posté le 19-06-2007 à 20:24:07   

Reply

Marsh Posté le 19-06-2007 à 23:55:01    

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
Reply

Marsh Posté le 20-06-2007 à 07:59:03    

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

Reply

Marsh Posté le 27-03-2008 à 18:47:19    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed