28173 sujets

CSS et mise en forme, CSS3

Lien avec border sur image, bug IE

Hello à todos,

je voudrai donner un effet de changement de couleur de bordure à certaines images qui sont en lien.

Cela marche très bien sous FF mais pas du tout sous IE (pour changer Smiley fache ).

Style :
.contenu-bloc-pdt a img{
border:3px solid #a2acb6;
}

.contenu-bloc-pdt a:hover img{
border:3px solid #e7007c;
}


Page :

<div class="contenu-bloc-pdt">
<a href="#"><img src="image.gif" alt="image" width="39" height="39" /></a>
</div>


Merci pour le coup de pouce
Modifié par dldstyle (28 Aug 2006 - 10:23)
Salut

ça fonctionne si tu appliques la bordure au lien, et non à l'image qui se trouve à l'intérieur :
a img {
        border: 0; /* Pour supprimmer la bordure bleue par défaut */
        }
	.contenu-bloc-pdt a {
        border:3px solid #a2acb6;
        }
    .contenu-bloc-pdt a:hover {
        border:3px solid #e7007c;
        }
Merci pour ta réponse Sopo mais ça ne fonctionne pas plus.
Moins bien en fait car il n'y a même plus la bordure sur le lien non survolé Smiley eek
Pu**** d'IE
Bizarre, j'ai testé en local et ça fonctionne chez moi ... tu n'as pas un exemple en ligne ?

Voilà le code complet de ma page de test : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
    a img {
        border: 0;
        }
	.contenu-bloc-pdt a {
        border:3px solid #a2acb6;
        }
    .contenu-bloc-pdt a:hover {
        border:3px solid #e7007c;
        }
</style>
</head>

<body>
	<h1><a href="#" title="">Test</a></h1>
    <div class="contenu-bloc-pdt">
    <a href="#"><img src="image.gif" alt="image" width="39" height="39" /></a>
</div>
</body>
</html>

Modifié par Sopo (28 Aug 2006 - 11:04)
moi je le fait de cette manierre..et cela marche.

.css

img { margin: 5px; padding:0;}
a img {border:2px solid #000;}
a:hover img {margin: 5px;padding:1px;border-width:1px;}

.imgrose{background-color: #FF00FF;}

.html

<a href="#"><img src="tonimage.."  class="imgrose" /></a>
Sujet clos
Aller à