28172 sujets

CSS et mise en forme, CSS3

Border-collapse et caption

Bonjour,

J'ai un tableau à faire avec bordure au tableau , au td et au caption.
Mon problème est sous firefox 2. Avec le doctype Xthml 1.0. Notez que si je ne met pas le border-collapse; mon problème disparait. Mais j'ai besoin de le garder.

Il y a un léger décalage sur la bordure à gauche du caption... comme s'il y avait un margin-left:1px;

Voici mon style, rien de bien compliqué.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Titre</title>
 
<style type="text/css">
table {border-collapse:collapse; border:1px solid red; width:300px;}
td {border:1px solid red;}
caption {border:1px solid red;}
</style>
</head>

<body>
  
<table>
<caption>Titre du caption</caption>
<tr>
<td>ici contenu</td>
</tr>
</table>

</body>
</html>


Merci
Modifié par britanicus75 (15 Apr 2008 - 15:26)
Modérateur
Bonjour Britanicus75,

En attendant que je découvre une explication logique à ce décalage, une solution qui semble bien fonctionner dans Firefox et IE6 est de mettre une marge de -1px au caption.


margin-left:-1px;


À tester dans IE7 et les autres navigateurs...
Effectivement cela corrige le problème... je ne sais pas si je dois mettre résolu...
Mais j'aimerais bien comprendre ce comportement bizarre.
Modérateur
J'ai trouvé cet article (anglais) qui en parle.

a écrit :
Since the caption lies within the table itself and we've not assigned a specific width to it, its width is equal to the total width of the table. Since a 1px border has been specified for the table, and the total table width includes half the border, the computed caption width ends up being 1 pixel less (1/2 from the left and right borders respectively), resulting in the 1 pixel difference. Since a 1/2 pixel cannot be rendered on-screen, Firefox adds the two half pixels together and stick the resulting pixel space on the left border.


À noter que la solution que j'ai proposé semble poser problème à Opéra.

Je vais lire l'article en profondeur car il semble proposer une autre solution.
Modifié par Tony Monast (14 Apr 2008 - 22:28)
Modérateur
Dans l'article, il est question d'un hack pour Opera. Je ne suis pas très à l'aise avec ce type de hack. Je vais poursuivre mes recherches et d'ici là, peut-être qu'un autre membre connaîtra une solution propre.

Ce sujet m'intéresse plus que jamais. Ce problème m'est arrivé souvent et je croyais que la marge de -1px règlait le problème. Je vais devoir réviser quelques-uns de mes sites sous Opera et Safari... Smiley kc
a écrit :
Dans l'article, il est question d'un hack pour Opera. Je ne suis pas très à l'aise avec ce type de hack. Je vais poursuivre mes recherches et d'ici là, peut-être qu'un autre membre connaîtra une solution propre.


Peut-être une liaison d'une feuille de styles spécifique avec pour type "text/nonsense" ? Smiley cligne Je n'assure pas qu'il s'agisse de la méthode la plus propre mais va savoir Smiley smile .
britanicus75 a écrit :


Oups je voulais juste ajouter le type sur le style... je peux éditer un message déjà en ligne?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Titre</title>
 
<style type="text/css">
table {border-collapse:collapse; border:1px solid red; width:300px;}
td {border:1px solid red;}
caption {border:1px solid red;}
</style>
</head>

<body>
  
<table>
<caption>Titre du caption</caption>
<tr>
<td>ici contenu</td>
</tr>
</table>

</body>
</html>


Merci

Modifié par britanicus75 (15 Apr 2008 - 15:26)
Modérateur
Bonjour britanicus75,

Tu peux en tout temps modifier tes messages déjà en ligne. Une fois identifié, il y a un bouton Éditer en haut à droite de chaque message, près du bouton Citer.
Sujet clos
Aller à