[CSS] probléme avec a:hover sur IE (mais bon sous FF)

Version imprimable

Bonjours tout le monde,

J'ai un petit probléme avec un effet que je voudrais avoir sur cette page :

http://untildeath.free.fr/septcordes.html

Sous Firefox j'ai l'effet voulus, (petit décalage vers la gauche et encadrement qui passe au gris) mais sous IE rien ni décalage ni changement de cadre.

Je pense que cela viens de ma css, c'est la 1er fois que j'essaye de faire un site avec ca donc ^^ voila quand meme le code qui coince sous IE et marche sous Firefox:

CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 div#miniature a img { text-align: center; border: 0.1em solid #ffffff; margin-bottom : 5px; float: right; } div#miniature a:hover img { text-align: center; border: 0.1em solid #605f5f; margin-right : 10px; margin-bottom : 5px; float: right; }
HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="miniature"> <a href="#" onclick="ouvrir(750,1006,'miniatures/g_folk_7c_tete.html')"> <img src="images/folk_7c_a.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> </a> </div> <div id="miniature"> <a href="#" onclick="ouvrir(750,500,'miniatures/g_folk_7c_sillet.html')"> <img src="images/folk_7c_b.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> </a> </div>
Merci d'avance !

02/04/2006, 11h53
AlphaYoDa
Salut,

Essaie de le faire en donnant une classe au lien et en jouant sur celle-ci, c'est peut-être un problème d'adressage.

Personnellement :
Code:

1 2 /* CSS RollOver */ a.rollOver:hover img { filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; }
Modifie pour essayer, celui-ci ajoute de la transparence à l'image ;)

Pourquoi mettre des divs de partout ?
Et puis un id ne peut se répéter, tu dois utiliser une classe
Essaye comme ca, je n'ai pas testé...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.miniature  a img 
      {    
         text-align: center; 
         border: 0.1em solid #ffffff; 
         margin-bottom : 5px; 
         float: right; 
      }    
.miniature  a:hover img 
      {    
 
         text-align: center; 
         border: 0.1em solid #605f5f; 
         margin-right : 10px; 
         margin-bottom : 5px; 
         float: right; 
      }

Code:

1
2
3
4
5
6
7
8
9
10
 
 
<a href="#" class="miniature" onclick="ouvrir(750,1006,'miniatures/g_folk_7c_tete.html')"> 
      <img src="images/folk_7c_a.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a> 
 
 
<a href="#" class="miniature" onclick="ouvrir(750,500,'miniatures/g_folk_7c_sillet.html')"> 
<img src="images/folk_7c_b.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a>

Citation:

Envoyé par blueice

Pourquoi mettre des divs de partout ?
Et puis un id ne peut se répéter, tu dois utiliser une classe
Essaye comme ca, je n'ai pas testé...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.miniature  a img 
      {    
         text-align: center; 
         border: 0.1em solid #ffffff; 
         margin-bottom : 5px; 
         float: right; 
      }    
.miniature  a:hover img 
      {    
 
         text-align: center; 
         border: 0.1em solid #605f5f; 
         margin-right : 10px; 
         margin-bottom : 5px; 
         float: right; 
      }

Code:

1
2
3
4
5
6
7
8
9
10
 
 
<a href="#" class="miniature" onclick="ouvrir(750,1006,'miniatures/g_folk_7c_tete.html')"> 
      <img src="images/folk_7c_a.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a> 
 
 
<a href="#" class="miniature" onclick="ouvrir(750,500,'miniatures/g_folk_7c_sillet.html')"> 
<img src="images/folk_7c_b.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a>

J'ai encore beaucoup a apprendre des css et j'suis sur que la css que j'ai fait la est trés mauvaise :s j'essayerai d'amélioré ca tout de meme !

Sinon, impéccable ! les deux marchent parfaitement ! Merci à vous deux !

02/04/2006, 18h36
AlphaYoDa

Une 'tite guitare en guise de bonne volonté ? :oops: :oops:

:lol:

PS: juste par rapport à l'effet de décaler la vignette à gauche.. je ne trouve pas ça très joli ,)

Bonne suite !

Bonjour, je me permets de reprendre ce fil car j'ai un problème similaire;

j'affecte une image a deux effets (up et down) de 200px de large, le but etant d'afficher l'une ou l'autre partie de l'image;(j'affecte cette image via un background dans un autre fichier css car c'est un png transparent) voici le code

css:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .btnCaddie span{ display:block; position:absolute; overflow:hidden; float:left; width:100px; height:29px; top:0px; left:0px; cursor:pointer; } .btnCaddie a:hover span{ left:-106px; padding-left:106px; }
et le html (qui est en fait une génération via php):
Code:

1 2 3 4 5 6 <div class='addCart'> <div class='btnCaddie'> <a href='#'><span></span></a> </div> </div>
ça marche nickel sous FF mais pas IE et le plus étonnant c'est que j'ai fait cet effet sur mon menu et pas moyen de le reproduire; pour voir c'est ici c'est le bouton "commander"

Merci de votre aide

12/02/2009, 15h55
leFred

Bon je viens de voir que le hover est bien pris en compte (je lui rajoute une bordure et ça la rajoute effectivement), mais ça ne me décale pas mon image pour obtenir l'effet désiré ?