Probleme border sur table

Bonjour a tous,

j'ai un soucis avec un border.
http://img135.imageshack.us/img135/9419/tabletr6.gif

comme vous pouvez le voir en 1, j'ai une image arrondi en background.
Si je fais un table border 1, ca ne va pas, car il y a toujours un pixel d'écart entre un background image et un border normal.

Donc j'ai décidé de mettre un border-left sur les ligne en bleu clair, ca marche bien, mais je dois séparé toutes mes TD d'une bordure blanche !
donc j'ai fais ceci :

.border_tdgauche{
	border-top:1px solid  #FFFFFF;
	background-image : url(/images/border_panier.gif);
	background-position:  left top ;
	background-repeat:  repeat-y;
	background-color:#dbf3f5;
}

Comment faire pour cacher le pixel en "2" de mon border-top blanc entre les border-left bleu ??
Modifié par Joe Le Mort (01 Mar 2007 - 10:46)

as tu essayé en parametrant le bloc ".border_tdgauche" avec un margin-top de 1px ? sa simulerai une bordure d'1 px comme si ct une vrai bordure puisque (SI le fond est bland)

sinon t'enleve les bordures dans les case ou y'a le panier et tu les dans ton background
t'auras juste besoin de dessiner la bordure du haut et de laisser un pixel transparent a gauche comme sa t sur qu'en haut et au milieu sa se repete proprement et sa laisse apparaitre ta bordure bleu

++

dsl le coup du pixel transparent sa sert a rien puisque le backround reste a l'interieur normalement
donc encore plus simple a gerer

en passant, sa marche pas les z-index pour faire passer des bordures par dessus?

En fait l'ordre de superposition des bordures suit la hiérarchie des balises : table -> tr -> td

si tu applique les bordures blanches aux <tr> et les bordures bleues aux <td> tu devrais obtenir ce que tu veux

voilou

J'ai passé une bordure d'un pixel banc en background sur le TR
puis pareil avec le pixel bleu sur le TD et cela fonctionne :yaisse2:

je vous met le code :

#panier .ligne1{
	background-color: #e8f4f5;
	background-image : url(/images/common/panier/border_panier_blanc.gif);
	background-position:  right top ;
	background-repeat:  repeat-x;
}
.border_tdgaucheligne1{
	background-image : url(/images/common/panier/border_panier.gif);
	background-position:  left top ;
	background-repeat:  repeat-y;
	
}

Modifié par Joe Le Mort (01 Mar 2007 - 15:50)

Alors nouveau probleme... très facheux, ca marche sous FF mais IE7 n'aime pas ca !

CSS de la ligne

#panier .ligne1{
	background-color: #dbf3f5;
	background-image : url(/images/common/panier/border_panier_blanc.gif);
	background-position:  right top ;
	background-repeat:  repeat-x;
}

css de la cellule a gauche pour le border left bleu

.border_tdgaucheligne1{
	background-image : url(/images/common/panier/border_panier.gif);
	background-position:  left top ;
	background-repeat:  repeat-y;
	border-right:1px solid  #FFFFFF;
	
}

Bonjour,

La propriété border-collapse pourrait t-elle être utile ?

border-collapse: collapse;

Igor a écrit :
Bonjour,

La propriété border-collapse pourrait t-elle être utile ?

border-collapse: collapse;

oui elle est tres utile, mais pas dans mon cas

La gestion des border et padding sur les éléments d'un tableau (en particulier pour tr il me semble) n'est pas évidente. Chaque navigateur a ses propres restrictions à ce sujet.

Une solution peut-être intéressante : utiliser la bordure du table, et pour les coins faire une image type <img src="coin-gauche.png" alt="" /> que l'on positionnera en relatif pour la décaler de 1px vers le haut et 1px vers la gauche (en supposant qu'elle est tout en haut à gauche de la cellule).

Florent V. a écrit :
Une solution peut-être intéressante : utiliser la bordure du table, et pour les coins faire une image type <img src="coin-gauche.png" alt="" /> que l'on positionnera en relatif pour la décaler de 1px vers le haut et 1px vers la gauche (en supposant qu'elle est tout en haut à gauche de la cellule).

Bonne idée, je reviendrai vous détaillez ca si ca fonctionne !
Merci