[résolu] Petit problem de bordures!!!

bonjour
j'ai voulu mettre une bordure sur des images avec un padding mais voilà çà ne marche pas sous IE (étonnant n'est-il pas!!) sinon cela fonctionne sous divers navigateurs (firefox,opera 7 et 8 et netscape 7)

pour mieux voir ce petit soucis.
c'est ici

et le code (dans la page test):

body {
 	margin: 0;
	padding: 0;
  background: #fff;
  color: #666;
  font-family: arial, verdana, sans-serif;
  font-size: 0.8em;
}														 
#centre {margin:20px 70px 20px 200px;}
img{
	border: 0;
	padding: 0;
	margin: 0;
}
p {
	text-align:justify;
	margin: 0 0 10px 0;
	}
  
a {
  text-decoration: none;
  color: #808B01;

}
a:hover{
	text-decoration: none;
  color: #B01;

}	
.imggauche{
	border: 3px solid #B6B6B6;	
	float: left;
	margin: 5px 10px 10px 0; 
	padding: 3px;
}
.imggauche:hover{
	border: 3px solid #808B01;
}
.ligneespacement{
	height: 10px;
	clear: left;
}

comment resoudre mon problème?
si quelqu'un pouvez m'éclairer ....
Merci
Modifié par dentnoir (04 Dec 2005 - 21:49)

bon! çà s'améliore un peu, en fait c'est en changeant de <doctype> que EI "encaisse" le padding .

j'avais mis( enfin c'est mon editeur : webexpert qui mets cela quand je crée une nouvelle page).

<?xml version="1.0" encoding="iso-8859-1"?>

voir ici
mais je n'ai pas résolu le fait qu'elle ne change pas (la bordure) lors d'un passage de souris mais je pense avoir fait un mauvais codage ! là si vous avez un astuce ...
Merci.
Modifié par dentnoir (04 Dec 2005 - 11:46)

Salut dentnoir,

Si je ne me trompe pas, il faut que tu indiques qu'il s'agisse d'un lien pour que ta bordure change. Je ne suis pas sûre qu'en définssant simplement une classe, cela fonctionne.

Je mettrais plutôt cela :

.imggauche a{
	border: 3px solid #B6B6B6;	
	float: left;
	margin: 5px 10px 10px 0; 
	padding: 3px;
}

.imggauche a:hover{
	border: 3px solid #808B01;
}

Tchao

Salut,

J'ai essayé ça et ça marche :
CSS

a.imggauche{
border:3px solid #B6B6B6;
float:left;
margin:5px 10px 10px 0; 
padding:3px;
}
a:hover.imggauche {
border:3px solid #808B01;
}

HTML

<a href="#" class="imggauche">
<img src="site001.gif" width="150" height="96" alt="projet site 1" title="projet site 1" class="imggauche" /></a>

je vous remercie pour vos réponses mais elles ne conviennent que partiellement:

cygnus. j'avais essayé, mais cela ne fonctionnait pas sous FireFox et consor... le problème vient de IE j'ai fini par trouver en re-re-re-lisant le memento de ce cher Raphaël (Goetter) je cite : IE ne reconnaît la pseudo-classe ":hover" que si elle est appliquée sur le selecteur de la balise "a".

papyjo. ton code marche bien sur IE par contre appliqué sous FireFox ou Opéra ou encore netscape, il crée un décalage plus important en bas de l'image. regarde cette nouvelle page ici avec FireFox par exemple ...

je crois que je vais être obligé de choisir soit l'un soit l'autre !!!

Merci encore pour votre aide.
Modifié par dentnoir (04 Dec 2005 - 17:05)

erreur de ma part !!je voulu editer et j'ai citer désolé...
Modifié par dentnoir (04 Dec 2005 - 17:04)

Salut dentnoir,

Tu peux aussi tester ca :

img {
  border: 0;
  display: block;
  padding: 3px;
}

a.imggauche {
  float: left;
  display: block;
  border:3px solid #B6B6B6;
  margin:5px 10px 10px 0;
}

a.imggauche:hover {
  border:3px solid #808B01;
}

A priori ca marche correctement sous Firefox et IE.

Et voilà une réponse qu'elle est bonne en s'y mettant à plusieurs on arrive au résultat Merci à tous

j'ai juste modifier légèrement la balise <img> pourqu'elle ne s'applique que sur ce type d'image sans affecter les autres images du site; comme ceci

a.imggauche img {
  border: 0;
  display: block;
  padding: 3px;
}

et tout est rentré dans l'ordre: resultat ici

encore Merci et @+
Modifié par dentnoir (04 Dec 2005 - 21:50)