28172 sujets

CSS et mise en forme, CSS3

Table dans un Div : bordures confondues sous Firefox

Bonjour a tous Smiley smile

J'ai essayé de réduire mon problème a sa plus simple expression
pour plus de clarté.
Alors voila : J'ai un tableau à l'intérieure d'un Div.

Le code HTML :
<div id="tableau">
	<table>
		<tr>
			<td>A</td>
			<td>B</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
	</table>
</div>


et le CSS :
div#tableau {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 300px;
	height: 300px;
	border: 1px solid black;
	margin: 0;
	padding: 0;
}
table {
	border: 1px solid red;
	border-collapse: collapse;
}
td {
	border: 1px solid red;
	width: 100px;
	height: 100px;
}


Mon problème : dans ie7, opera et safari les bords haut et gauche du tableau se "collent" contre le bord du Div.
Dans Firefox, les bords haut et gauche du tableau sont confondus avec le bord du Div.

Quelqu'un connaitrait-il une technique permettant d'avoir un positionnement identique du tableau vis-a-vis du Div ?

Et surtout, quelqu'un aurait-il une explication ? Je suis assez familier des problèmes de positionnement entre les
navigateurs, et je n'avais jamais entendu parler de ce problème la. A moins bien sur que je sois passé à coté d'un truc bête ....

Merci d'avance !
Modifié par Tieumitaz (05 Apr 2008 - 23:02)
Salut,

Je ne suis pas persuadé de ce que tu cherche à faire, mais :
Tu as un conteneur (div) de 300px de large sur 500px de haut. A l'intérieur, tu mets un tableau de deux ligne et deux colonnes, donc les largeurs et hauteurs cumulées (sans la bordure), sont respectivement de 200px et 200px. Le tableau est donc plus petit que son conteneur.
Dans la mesure ou tu spécifie que ton conteneur ne possède aucunes marges intérieures (padding: 0), il n'est pas étonnant que ton tableau soit positionné en haut à gauche de son conteneur, sachant que le point de référence des coordonnées de placements est justement le point en haut à gauche. Smiley cligne

Comme je ne sais pas trop ce que tu cherches à faire, même si j'envisage un centrage horizontal ou un centrage vertical, je pense que mon énoncé devrait t'aiguiller sur ce qui te pose problème. Smiley cligne
Bonjour,

Mikachu, je crois que tu as loupé une partie du descriptif que Tieumitaz donne de son problème. Ce n'est pas le positionnement en haut à gauche qui pose problème. Le problème, c'est que Firefox positionne le tableau (bordure incluse) par dessus la bordure du conteneur. Si on utilise overflow: hidden ou overflow: auto sur le conteneur, alors la bordure du conteneur recouvre la bordure du tableau. Si on utilise un margin: 1px sur le tableau, les bordures se touchent mais ne se recouvrent plus... sous Firefox, car bien entendu les autres navigateurs n'ont pas ce problème.

6l20, il ne s'agit pas ici d'un problème de fusion des marges.

Tieumitaz, ma seule explication est qu'il s'agit d'un bug de Firefox, qui intervient dès que l'on utilise border-collapse: collapse. Le positionnement absolu ou les dimensions n'ont rien à voir: tu peux tester avec un conteneur div avec pour seule instruction CSS border: 1px solid black, tu auras le même problème. Tu aurais d'ailleurs pu encore épurer ton exemple, en utilisant simplement le code CSS suivant:
div#tableau {
	border: 1px solid black;
}
div#tableau table {
	border: 1px solid red;
	border-collapse: collapse;
}


Pas de solution à proposer pour ma part.
Florent V. a écrit :

6l20, il ne s'agit pas ici d'un problème de fusion des marges.

Ben zut alors Smiley confused
Il me semble pourtant avoir déjà "collapsé" des bordures de tableaux sans que cela ne perturbe plus que cela Firefox... Smiley sweatdrop
Un padding de 1px sur div#tableau me donne, semble-t-il, et sauf erreur de ma part, un rendu sous Firefox identique à celui obtenu sous IE7, d'où mon aiguillage sur la "fusion des marges"...

Disappointed je suis Smiley decu
Il ne pouvait pas y avoir de fusion des marges à cause de la bordure de div#tableau. De plus, le table n'avait pas de marges. Smiley cligne
Florent V. a écrit :
Il ne pouvait pas y avoir de fusion des marges à cause de la bordure de div#tableau. De plus, le table n'avait pas de marges. Smiley cligne


Vas-y, enfonce-moi... Smiley bawling
Smiley cligne
Tout d'abord merci pour vos réponses rapides.

Après avoir exploré plus en profondeur les spécifications css, je pense avoir compris a peu près le problème.

Pour les intéresses, je vais tenter une petite explication :

Lorsque le rendu se fait sur le modèle des bordures fusionnés (border-collapse: collapse), le tableau est construit à partir d'une sorte de grille virtuel dont le tracé résulte des dimensions données ou calculées. Les bordures sont alors placés centrés sur le tracé de cette grille. Ainsi une bordure de largeur 1px occuperait en théorie 0.5 pixel a droite de la ligne de la grille et 0.5 pixel a gauche. En pratique le navigateur doit placer cette bordure sur les pixels réels de l'affichage, et procède donc par arrondi par rapport à la grille virtuel. Il semblerais que Firefox ne fasse pas les arrondis de la même manière que les autres dans ce cas.

Ainsi en mettant dans le css du Div (étrange mais permis) :
padding-left: 0.5px;
padding-top: 0.5px

le positionnement de la bordure du tableau en haut a gauche devient identique sur Firefox, IE7, Opera ou Safari.

Malheureusement cela ne résout pas vraiment mon problème puisque si la bordure gauche du tableau se place pareil dans FF que dans les autres, la bordure droite se retrouve un pixel trop à droite sur FF. Le problème se retrouve donc déplacé de l'autre coté .....

Voila voila ou j'en suis de mon enquête. Le plus étonnant c'est que comme le dis 6l20 j'ai fait un paquet de tableau dans ma vie sans être tombé sur ce problème ... !

Pour info mon point de départ pour ma théorie :
Le modèle des bordures fusionnées
L'illustration montre la "grille" dont je parle plus haut.
Sujet clos
Aller à