Problème FF/IE avec des images en liens

Salut à tous,

sous FF, les vignettes sont encadrées de jaune, avec transformation en orange lorsque la souris passe dessus; sous IE, les images sont encadrées de violet sans que rien ne se passe au survol...une idée? merci d'avance!

Le HTML:

<div class="corps2">

<a href="pmfa1.html" class="lien1">
<img src="image/pendules/faience/berticv.jpg" width="100" height="96" alt="Le Bertic" /></a>
<a href="pmfa2.html" class="lien1">
<img src="image/pendules/faience/delficv.jpg" width="100" height="98" alt="Le Delfic" /></a>
<a href="pmfa3.html" class="lien1">
<img src="image/pendules/faience/formicv.jpg" width="100" height="93" alt="Le Formic" /></a>
<a href="pmfa4.html" class="lien1">
<img src="image/pendules/faience/spiricv.jpg" width="100" height="80" alt="Le Spiric" /></a>
<a href="pmfa5.html" class="lien1">
<img src="image/pendules/faience/mitricv.jpg" width="100" height="98" alt="Le Mitric" /></a>
<a href="pmfa6.html" class="lien1">
<img src="image/pendules/faience/sevricv.jpg" width="100" height="82" alt="Le Sevric" /></a>
<a href="pmfa7.html" class="lien1">
<img src="image/pendules/faience/soficv.jpg" width="100" height="85" alt="Le Sofic" /></a>
<a href="pmfa8.html" class="lien1">
<img src="image/pendules/faience/terricv.jpg" width="100" height="99" alt="Le Terric" /></a>
<a href="pmfa9.html" class="lien1">
<img src="image/pendules/faience/printicv.jpg" width="100" height="91" alt="Le Printic" /></a>
<a href="pmfa10.html" class="lien1">
<img src="image/pendules/faience/rhonicv.jpg" width="100" height="97" alt="Le Rhonic" /></a>
<a href="pmfa11.html" class="lien1">
<img src="image/pendules/faience/sarricv.jpg" width="100" height="95" alt="Le Sarric" /></a>


</div>

La CSS:

 a.lien1:link {
color: #ffcc66;
text-decoration: none;
}

a.lien1:visited {
color: #cccc99;
text-decoration: none;
}
a.lien1:hover {
color: #ff6600;
text-decoration: none;
}
a.lien1:active {
color: #ffcc66;
text-decoration: none;
}

tu as spécifié des couleurs de texte, pas des background, serait-ce la cause ...?

J'ai lu il y a peu que le background est par défaut transparent...
Modifié par bouquins (19 Apr 2005 - 07:57)

Désolé de faire un up là-dessus, mais j'ai cherché ce matin, revu ma css et mon html; fait des tests; je ne vois rien qui cloche...Pourtant, ça semble bien bête...si quelqu'un a une idée, je suis preneur! Merci!

tu as essayé le border=0 sur tes images?

En mettant border=0, tu supprimes les bordures d'images sous FF et IE; or sous FF, les bordures sont comme je les souhaite (et comme déclarées dans la css), à savoir jaune, et lorsque tu passes la souris sur l'image, elles deviennent orange. Sous IE, elles sont bleues, et fixes...merci quand même!

Essayes ca tu me dit si cela te convient : (en même temps je ne sais pas si j'ai bien compris le problème)

img{
  border: 0;
}
a.lien1:link {
text-decoration: none;
border: 2px solid #fc6;
}

a.lien1:visited {
color: #cccc99;
text-decoration: none;
}
a.lien1:hover {
color: #ff6600;
text-decoration: none;
border: 2px solid #f60;
}
a.lien1:active {
color: #ffcc66;
text-decoration: none;
}

Edit : l'idée c'est de dire je ne veux pas de bordure sur mes images(cela enleve le cadre bleu/violet de ie) par contre j'en veux sur mes liens
Modifié par gilles6975 (19 Apr 2005 - 16:30)

Salut Gilles, merci pour ton aide; le problème c'est que:

a écrit :
sous FF, les vignettes sont encadrées de jaune, avec transformation en orange lorsque la souris passe dessus

Ca, c'est ce que je veux sous FF ET sous IE...ma css semble conforme; je ne vois pas ce qui cloche!

Gilles, je précise que je ne veux pas de bordure sur les liens; je veux juste qu'en ce qui concerne les vignettes, elles apparaissent encadrées de jaune, et que lorsque la souris passe dessus, elles deviennent orange...je ne sais pas si je suis très clair
Modifié par bouquins (19 Apr 2005 - 16:44)

Essaye avec le code CSS que je t'ai mis cela semble correspondre à tes souhaits.

Je ne pense pas qu'il y ait d'autres méthodes car il me semble que le img: hover ne marche pas sur ie.

Sur le css que je t'ai donné la bordure est orange a l'état incatif et passe au rouge quand on survolle. Cela marche sur ie et sur FF il me semble.

Merci Gilles, j'ai essayé; mais sur FF, cela ne fonctionne pas...

En fait sous FF si tu veux que le lien est une "taille" il faut le la lui donner et lui dire de faire un block.

Grosso modo il faut rajouter dans la propriété de lien

display: block
width: 
height:

Tu risques cependant d'avoir un problème. Il faudrait que tu puisses nous dire pour quel type de mise en page cela doit servir ! (menu image ; en vrac sur la page ; dans du texte ; etc..)

Une bonne photo valant largement mille mots, dit-on...

http://microsillon.free.fr/css/pmf.html

Encore merci!

Après plusieurs bidouillages je n'arrive pas a grand chose
Je n'arrive pas a avoir à la fois le rollover sur FF et sur IE (sachant que ce rollover doit faire apparaitre un cadre autour d'une image lien !
Je ne sais pas s'il ne faudrait pas faire un vrai rollover avec 2 images (une normale encadrée par le CSS et l'autre qui se chargerait avec le hover).
Bon je te mets la version qui marche sous FF (mais avec un code allégé !) et qui met un cadre orange non réactif sous ie.
Je suis désolé de ne pas arivé a faire marché cela sur FF et IE mais bon ...

Pour ton menu a gauche j'ai retouché en faisant une liste cela te permettra de changer ce menu aisement ! Ca n'etait pas la question mais puisque je l'ai fait je te le donne

le CSS que j'ai changé :

.gauche {
position: absolute; top: 4em; left: 0;
padding: 1em;
font-size: 100%;
color: #fc6;
width: 10em;
}
.gauche ul{
list-style-type: none;
}
.gauche li a{
color: #fc6;
text-decoration: none;
}
.gauche li a:hover{
color: #f60;
}
.gauche li a:visited{
color: #999;
}
.gauche li a:active{
color: #fc6;
}

.pendule img{
margin: 5px;
padding: 2px;
border: 2px solid #fc6;
}
.pendule img:hover{
border: 2px solid #f60;
}

Puis le XHTML allégé :

<div class="gauche">
  <ul>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="collection.html">Ma collection</a></li>
  <li><a href="origine.html">Les origines de Jaz</a></li>
  <li><a href="photos.html">Galerie de photos</a></li>
  <li><a href="technique.html">Le côté technique</a></li>
  <li><a href="publicite.html">La publicité</a></li>
  <li><a href="tirages.html">Les "tirages limités"</a></li>
  <li><a href="divers.html">Divers objets Jaz</a></li>
  <li><a href="recherche.html">Mes recherches</a></li>
  <li><a href="contact.html">Ecrivez-moi!</a></li>
  <li><a href="liens.html">Liens</a></li>
  </ul>
</div>

<div class="corps2">

<div class="pendule">

     <a href="pmfa1.html"><img src="images/berticv.jpg" alt="Le Bertic" /></a>
     <a href="pmfa2.html"><img src="images/delficv.jpg" alt="Le Delfic" /></a>
     <a href="pmfa3.html"><img src="images/formicv.jpg" alt="Le Formic" /></a>
     <a href="pmfa4.html"><img src="images/spiricv.jpg" alt="Le Spiric" /></a>
     <a href="pmfa5.html"><img src="images/mitricv.jpg" alt="Le Mitric" /></a>
     <a href="pmfa6.html"><img src="images/sevricv.jpg" alt="Le Sevric" /></a>
     <a href="pmfa7.html"><img src="images/soficv.jpg" alt="Le Sofic" /></a>
     <a href="pmfa8.html"><img src="images/terricv.jpg" alt="Le Terric" /></a>
     <a href="pmfa9.html"><img src="images/printicv.jpg" alt="Le Printic" /></a>
     <a href="pmfa10.html"><img src="images/rhonicv.jpg" alt="Le Rhonic" /></a>
     <a href="pmfa11.html"><img src="images/sarricv.jpg" alt="Le Sarric" /></a>

</div>
</div>

Quelques remarques :
- pas besoin de spécifier la taille des images si celle ci ne subissent pas de modification de taille par rapport à la source
- je t'ai mis les codes couleurs abrégés : une couleur #ff6600 s'abrege en #f60
- faire attention on crée une class lorsqu'un élément sert plusieurs fois par page sinon on met une id (pour en tête menu pied etc..)
- pour le menu comme dit plus haut j'ai mis une list cela te permettra de la skinner aisement en topuchant seulement au CSS
- attention aux élément hérités : pas besoin de dire text-decoration: none pour hver visited ou active si a: link a deja cette propriété et que tu veux la conserver.

Bon je reste en alerte pour te trouver une solution au problème initial mais à mon grand regret je seche

Salut Gilles,

merci pour tes conseils de rédaction; l'essentiel pour moi est d'apprendre de nouveaux trucs! Pour le problème de différence FF/IE, pas de problème: ça restera en l'état. Je pensais que cet imbécile d'IE saurait gérer un truc basique comme celui-ci, mais non!!! Enfin, c'est pas grave.

Encore merci pour tout!!

Salut,

je pense qu'il faut mettre tes images dans une liste ordonnée et tu gères les couleurs des liens via une class;

comme fait par exemple ici

Salut Alex,

merci pour le truc; je vais me pencher dessus! Une petite question: comment faire pour avoir trois vignettes alignées horizontalement avec une liste? J'imagine qu'une liste va me placer les vignettes les unes sous les autres, mais pas les unes à côté des autres...

pour que les éléments de ta liste soient placés les uns à côtés des autres il faut utiliser:

display:inline;

*

Deux articles intéressant:

Sur les listes en lignes (chapitre 4)

Sur les flux (normal ou en ligne)
Modifié par alex_br (20 Apr 2005 - 13:11)

Ok Alex, j'irai voir ça plus tard.

Merci!

J'ai vu le lien d'Alex en effet cela est l'effet recherché.

Par contre en regardant un peu je ne comprends pas du tout coment cela marche !

Si ALex tu avais compris parceque personellement je seche. J'avais essayé la piste des listes mais impossible de faire un rollover sur les images.

N'y aurait il pas un hack pour ie dans cette page. Mais je t'avouerais que je ne comprends pas trop.

Edition : en fait je viens de regarder il y a des hacks en fonction des navigateurs (notamment la propriété feature et la propriété clearfixe).
Cela dépasse quelque peu mes compétences. On trouve des trucs bizarre que je n'avais jamais rencontré du style :

<div id="clientsMain" class="clearfix">  [biggol] 

Je ne savais même pas que cela était possible d'écrire cela !
Modifié par gilles6975 (20 Apr 2005 - 17:16)