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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS : probleme de hover avec Internet Explorer

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS : probleme de hover avec Internet Explorer

n°793455
foxcssfox
The design of CSS...
Posté le 12-07-2004 à 11:57:55  profilanswer
 

Bonjour
voila mon probleme qui est à deux doigt de faire péter les plombs...
 
j'ai un menu en xhtml et en css :  
le menu est fait avec un ul et des li
et les liens (sont display block) de la taille des li
 
Tout marche bien, sauf que sur IE, l'image se recharche à chaque fois !!! et j'ai un fond gris qui dure environ 1 seconde avant que l'image hover n'apparaissent...
 
PS : mes images ne sontpas lourdes et sont optimisées : tout marche bien chez firefox... que faut il que je fasse ? quelqu'un à une idée ?
 
http://www.foxcss.com/ifocop/
 
 
merci d'avance

mood
Publicité
Posté le 12-07-2004 à 11:57:55  profilanswer
 

n°793468
foxcssfox
The design of CSS...
Posté le 12-07-2004 à 12:16:08  profilanswer
 

chose étrange : en prenant uniquement le meme menu isolé : ca marche avec ie...
 
http://www.foxcss.com

n°793502
jagstang
Pa Capona ಠ_ಠ
Posté le 12-07-2004 à 13:04:59  profilanswer
 

à mon avis, les images qui se mettent en cachent doivent se trouver dans un tag <img>
 
peux-tu montrer le CSS stp


---------------
What if I were smiling and running into your arms? Would you see then what I see now?  
n°793505
foxcssfox
The design of CSS...
Posté le 12-07-2004 à 13:13:49  profilanswer
 

Code :
  1. /********************************
  2. ---------LE MENU GAUCHE----------
  3. *********************************/
  4. #menu-vertical ul {
  5. list-style : none;
  6. width : 200px;
  7. margin:0;
  8. padding:0;
  9. font-family: arial;
  10. float: right;
  11. }
  12. #menu-vertical li{
  13. background-image: url(../images/menu_normal.jpg);
  14. text-indent: 20px;
  15. height: 52px;
  16. border-top: 0px solid green;
  17. margin:0;
  18. padding:0;
  19. width : 100%;
  20. }
  21. /*...............................
  22. #menu-vertical li:hover {
  23. background-color: orange;
  24. }cela ne fonctionne pas avec IE
  25. ...............................*/
  26. #menu-vertical li a,
  27. #menu-vertical li a:link,
  28. #menu-vertical li a:visited{
  29. background-color: #f7f7f7;
  30. background-image: url(../images/menu_normal1.jpg);
  31. color: green;
  32. font-weight: bold;
  33. display: block;
  34. width :100%;
  35. height: 50px;
  36. line-height: 50px;
  37. vertical-align: middle;
  38. text-align: left;
  39. border-top: 1px solid green;
  40. text-decoration: none;
  41. font-size: 12px;
  42. margin: 0;
  43. padding: 0;
  44. }
  45. #menu-vertical li a:active{
  46. background-color: #f7f7f7;
  47. background-image: url(../images/menu_active.jpg);
  48. color: black;
  49. }
  50. #menu-vertical li a:hover{
  51. background-color: #f7f7f7;
  52. background-image: url(../images/menu_hover.jpg);
  53. color: black;
  54. text-decoration: none;
  55. border-top: 1px dashed orange;
  56. border-bottom: 1px dashed orange;
  57. }
  58. .border-bottom{
  59. border-bottom: 1px solid green;
  60. }


Message édité par foxcssfox le 12-07-2004 à 13:14:23
n°793519
jagstang
Pa Capona ಠ_ಠ
Posté le 12-07-2004 à 13:28:18  profilanswer
 

à mon avis le navigateur ne peut mettre en cache les images qui sont définies dans le CSS.
 
essaie de faire un preload d'image en JS pour pallier ce problème


---------------
What if I were smiling and running into your arms? Would you see then what I see now?  
n°793538
Ayuget
R.oger
Posté le 12-07-2004 à 13:53:38  profilanswer
 

je sais plus trop mais il me semble que IE ne connait les hover que sur les <a> et pas sur les autres balises.
Mais je me trompe peut-être.

n°793744
foxcssfox
The design of CSS...
Posté le 12-07-2004 à 16:26:09  profilanswer
 

pour Ayuget: effectivement IE ne reconnait que le <a> pour les hover... c est pourquoi tous mes <a> sont display:block et ont la meme taille et la meme hauteur que mes <li>...
 
Ca marche sur tous les autres navigateurs, sauf IE,il buggue avec les images : on dirait qu'il les recharge a chaque fois, help...
http://www.foxcss.com (a voir sur IE)
 
merci
 
 


Message édité par foxcssfox le 12-07-2004 à 16:31:29
n°794079
Ayuget
R.oger
Posté le 12-07-2004 à 23:36:43  profilanswer
 

j'suis désolé, je vois

Code :
  1. /*...............................
  2.   #menu-vertical li:hover {
  3.      background-color: orange;
  4.   }cela ne fonctionne pas avec IE
  5.   ...............................*/


Je te fais donc remarquer que c'est normal que ca ne marche pas avec IE [:spamafote]

n°1743797
monkeymonk
Posté le 09-06-2008 à 21:39:28  profilanswer
 

Bonjour, j'ai un problème similaire... voici mes sources:
Mon CSS (appelé avec un link):
[...]
#menu{
 position:relative;
 visibility:visible;
 text-align:left;
 top:40px;
 left:75%;
 width:200px;
 height:200px;
}
#lang{
 position:absolute;
 float:right;
 top:2px;
 right:5px;
 margin-left: auto;
 margin-right: auto;
}
[...]
ul{display:block;list-style-type:none;}
[...]
 
Ce qui est étrange, dans le cas ou IE ne prend pas en compte les hover autrement que sur les a, c'est qu'avec mes li et mes input cela fonctionne...
ex:  
input.btnsub {
 border:1px solid #e3bc06;
 background-image:url(subscribe.gif);
 height:16px;
 width:80px;
 font-family:Verdana;
 font-size:0px;
 font-weight:bold;
 color:white;
 cursor:pointer;
}
input.btnsub:hover {
 border:1px inset #e3bc06;
 font-weight:bold;
 color:white;
}
...balise ul li:
ul#lg{height:21px;margin:0;padding:0;list-style-type:none;}
ul#lg li{float:right;text-align:right;}
ul#lg li a.en{
 display:block;
 background:url(en1.gif) no-repeat 0 0 ;
 width:30px;
 height:21px;
 border:none;
}
ul#lg li a.en:hover{
 display:block;
 background:url(en2.gif) no-repeat 0 0 ;
 width:30px;
 height:21px;
 border:none;
}
ul#lg li a.fr{
 display:block;
 background:url(fr1.gif) no-repeat 0 0 ;
 width:30px;
 height:21px;
 border:none;
}
ul#lg li a.fr:hover{
 display:block;
 background:url(fr2.gif) no-repeat 0 0 ;
 width:30px;
 height:21px;
 border:none;
}
 
Voici mon code pour le div du menu (php):
echo ' <div id="lang"><ul id="lg"><li><img src="en3.gif" width="30" height="21"></li><li><a class="fr" href="index.php?act=home&lg=fr"><img src="_.gif" alt="Francais" width="30" height="21" /></a></li></ul></div>';
   echo '<div id="menu"><ul>
     <li><a href="index.php?act=news&lg=en">News</a></li>
     <li>&nbsp;</li>
     <li><a href="index.php?act=biography&lg=en">Biography</a></li>
     <li><a href="index.php?act=gallery&lg=en">Gallery</a></li>
     <li><a href="index.php?act=agenda&lg=en">Agenda</a></li>
     <li>&nbsp;</li>
     <li><a href="index.php?act=extra&lg=en">Extra</a></li>
     <li><a href="index.php?act=links&lg=en">Links</a></li>
     <li>&nbsp;</li>
     <li><a href="index.php?act=contact&lg=en">Contact</a></li>
    </ul></div>';
 
Voilà... je suis complètement perdu donc si qqun pouvait m'aider ce serait vraiment génial ! ^^
 
url du site http://palumboproject.ovh.org/
 
Merci !

n°1743798
monkeymonk
Posté le 09-06-2008 à 21:41:26  profilanswer
 

Oh ! J'ai oublié de préciser que le problème est que mon menu (id=menu) n'apparait absolument pas sous IE alors que tout fonctionne bien sous FF.
A noter que mon menu lang fonctionne correctement sous les 2 (IE et FF).
Merci !

mood
Publicité
Posté le 09-06-2008 à 21:41:26  profilanswer
 

n°1743804
monkeymonk
Posté le 09-06-2008 à 21:46:04  profilanswer
 

Bon... et bien j'ai réglé mon problème... pardon pour le dérangement ! (2 seconde 3/4 plus tard et je comprend le problème...hum)
En fait il s'agissait de mon #menu... mettre position:absolute... je suppose que sous IE il se placait derrière un élément... enfin bon !
Merci quand même ! ;)


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

  CSS : probleme de hover avec Internet Explorer

 

Sujets relatifs
Problème vb6, lire dans le registreVBA probléme données d'un select
Probleme lors de la creation de toolbar avec wxwidgetsProblème de mise en page (Access2000)
Problème d'url rewriting[Newbie] Problême d'iframe
[CSS] 100%-10px pas bon?pb avec un script de news qui à l'air d'avoir un problème
image et CSSproblème de CSS et arrière plan
Plus de sujets relatifs à : CSS : probleme de hover avec Internet Explorer


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