Bordure de div qui se chevauchent

Bonjour,

voilà mon soucis,

j'ai un div container qui contient plusieurs div image et je voudrais mettre un cadre autour de chaque div image, voilà mon code css :

.container{
width:970px;
overflow:auto;
}


.image{
float:left;
position: relative;
border-bottom: solid 1px grey;
border-top: solid 1px grey;
border-left: solid 1px grey;
border-right: solid 1px grey;

}

J'ai bien un cadre autour de chaque div image mais le problème c'est que les bordures se chevauchent entre elles et du coup j 'ai une différence d'épaisseur de bordure . C'est moche !

Je fais appel à vos connaissances pour résoudre ce problème . Mes recherches n'ont pas abouti à une solution

Merci pour votre aide

Essaie de rajouter une marge entre chaque image. La propriété border ajoute des pixels donc forcément si tes images sont collées, les bordures vont se chevaucher. Sinon tu peux utiliser la propriété outline qui rajoute une bordure à l'intérieur de l'image.

.image {
float:left;
border: 1px solid grey;
margin-left:1px;
}

.image:first-child {
float:left;
border: 1px solid grey;
margin-left:0;
}

Modifié par MattBPA (21 Sep 2012 - 12:01)

Hello.

Je ne suis pas sûr de bien comprendre. Par chevauchement, tu veux dire que les bordures se superposent? Car théoriquement, ce n'est pas le cas : une page de test.

Justement sur ton exemple on voit le problème

http://dabblet.com/gist/3760746

Les bordures extérieures et les bordures intérieures n'ont pas la même taille , elles sont plus épaisses à intérieures

Oui donc ce n'est pas vraiment un chevauchement, c'est juste que les bordures sont collées.

Donc soit tu espaces tes images pour enlever cet effet de double bordure, soit tu divises par deux tes bordures intérieures.

Ok ca va être compliqué mais je pense que c'est la seule solution , merci !