Discussion :

[Gruik]

Bonjour,

J'ai un probleme avec les hauteurs de cellules de tableau et je me suis aperçu que le problème apparaissait que si on indiquait un DTD XHTML (en HTML classique, il n'y a pas de probleme).

Je voulais simplement faire des boites avec un tableau de 9 cases (chose courante j'imagine) où les coins sont des cellules contenant une image et les bordures sont des cellules vides avec une image de fond repetée.
J'ai fait en sorte que la taille des images des coins correspondent avec les tailles des images des bordures de telle sorte qu'il n'y ait pas repetition du fond sur les bordures.

Alors que je n'ai pas de probleme de largeur pour les bordures gauche et droite (la largeur appliquée est celle de l'image de coin), celles du haut et du bas sont agrandies en hauteur.
Je me suis aperçu que ces lignes prenaient la hauteur de la police, meme si ya pas de texte dans les cellules (j'ai pu le constater en diminuant la police de ces cellules. Mais c'est une bequille qui n'est pas forcement une bonne solution, et vu que mes coins font 3x3 pixels, meme à 1pt en police, la hauteur est toujours plus de 3px.

Le phenomene se presente sous Firefox, en specifiant le DTD XHTML donc.

Merci

[Strab]

As-tu mis un espace dans la cellule ? Les éditeurs mettent souvent   automatiquement. Un espace est considér comme du texte, cela vient peut-être de là ?

Strab

[Gruik]

Non, pas d'espace

Au pire, je peux enlever la repetition en y de l'image et l'aligner en bas (ou en haut), mais les cellule seront toujours agrandies

html (dsl pour le manque d'indentation)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<table style="margin-top: 0px; margin-bottom: 16px">
<tr><td class="c"><img src="img/ulc.png" alt="coin" /></td><td class="u"></td><td class="c"><img src="img/urc.png" alt="coin" /></td></tr>
<tr><td class="l"></td><td class="in">blablabldsfsdfa<br />bla<b>azeazeaz</b> blabla</td><td class="r"></td></tr>
<tr><td class="c"><img src="img/llc.png" alt="coin" /></td><td class="d"></td><td class="c"><img src="img/lrc.png" alt="coin" /></td></tr>
</table>

css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
table {
	border-collapse : collapse;
	width : 100%;
}
 
td.c, td.u, td.d, td.l, td.r {
	padding : 0;
}
td.c {
	width : 3px;
	height : 3px;
}
 
td.u { background : url('img/wu.png') }
td.d { background : url('img/wd.png') }
td.l { background : url('img/wl.png')}
td.r { background : url('img/wr.png'}

[Strab]

Est-tu sûr que les images font bien 3x3 px ? Ou alors le XHTML impose de spécifier la taille des images. Je n'en sais rien je ne connais pas trop les différences entre les différentes spécifications.
Quoi qu'il en soit, je crois avoir obtenu ce que tu voulais en précisant la taille des images dans la balise. Evidemment je n'ai pas testé avec les images, donc à vérifier.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<table style="margin-top: 0px; margin-bottom: 16px" cellspacing=0>
   <tr>
      <td class="c"><img src="img/ulc.png" alt="coin" width="3" height="3"/></td>
      <td class="u"></td>
      <td class="c"><img src="img/urc.png" alt="coin" width="3" height="3"/></td>
   </tr>
   <tr>
      <td class="l"></td>
      <td class="in">
         blablabldsfsdfa<br/>
         bla<b>azeazeaz</b> blabla
      </td>
      <td class="r"></td>
   </tr>
   <tr>
      <td class="c"><img src="img/llc.png" alt="coin" width="3" height="3"/></td>
      <td class="d"></td>
      <td class="c"><img src="img/lrc.png" alt="coin" width="3" height="3"/></td>
   </tr>
</table>

Je n'ai pas modifié le CSS.
En espérant que ça soit ça...

Strab

[Gruik]

Ca ne change rien

En fait je m'aperçois que c'est pas une histoire de XHTML ou HTML, c'est une histoire de Strict ou Transitional. C'est en Strict que ya ce pb de hauteur.

Sinon je peux empecher la repetition de la bordure comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

td.u { background : url('img/wu.png') repeat-x bottom; }

Mais après j'ai des problemes pour les images des coins car elles ne sont pas "plaquées" dans leur angle. Pour le positionnement en x, ça va (attribut text-align de la cellule les contenant), mais pour le positionnement en y ya un bug, j'ai essayé toutes les valeurs de vertical-align sur la cellule contenant l'image mais l'image n'arrive pas a etre bien plaquée contre le bas de la cellule.

J'ai trouvé ça aussi : line-height, mais meme en la mettant à 3px, les cellules font toujours plus de 3px de haut

[Gruik]

Bon, c'est pas grave, je vais prendre un dtd transitional
Merci ,)

[Gruik]

Non c'est bon j'ai trouvé, voici en résumé :

En HTML Strict, XHTML 1.0 Strict ou XHTML 1.1, les cellules ont une certaine hauteur minimale, même si elles ne contiennent rien.
Voici comment reduire cette hauteur minimale de telle sorte qu'une toute petite image occupe toute la cellule :

• Padding de la cellule à 0
  Font-size à 0pt
  Line-height à 0

[Strab]

Merci d'avoir fait passer l'info. En effet c'est à retenir. Un jour faudrais que je me fasse un topo sur les différences entre tous les standards...

Pense au tag résolu

Strab