je suis confronté à un petit problème de mise en forme d'un tableau où chaque cellule accueille une image de fond. J'ai travaillé un graphisme sur Photoshop que j'ai ensuite découpé avec des dimensions précises afin de placer chaque image dans une cellule de même dimension que l'image reçue.
En gros, par exemple, j'ai une image de 35 X 35 px, et une cellule de tableau de même taille, mais lorsque je place l'image en "background" celle-ci semble être réduite (ses dimensions deviennent 33 X 35 px). Ce qui évidemment occasionne des décalages (en apparence seulement) entre chaque cellule.
Je précise que dans le style CSS appliqué j'ai défini la propriété "border-collapse : collapse;" au tableau afin qu'il n'y ait pas d'espaces entre les cellules, mais rien n'y fait.
Pour régler le problème il a fallu que je diminue la taille des cellules (sans réduire la taille des images) pour que l'ensemble s'affiche correctement.
Le problème serait résolu si je n'étais pas du genre pointilleux, mais voilà... Ca m'horripile lorsque des choses basiques et en théorie logiques n'ont pas le comportement attendu.
Dernière précision : j'ai testé mon code sur Firefox 2.0.0.11 et IE 6 et le comportement est identique.
Pour vous aider à y voir plus clair, voici le code en question :
La feuille de style :
Code : Tout sélectionner
table#menu {
border-collapse : collapse ;
border : 0 ;
}
span#title {
color : #312201 ;
font-weight : bold ;
font-size : 14px ;
line-height : -2px ;
}Code : Tout sélectionner
<table id="menu">
<tr>
<td background="images/mn_corner_lt.jpg" width="33" height="35">
</td>
<td background="images/mn_top.jpg" width="128" height="35">
<center><span id="title">Questionnaires</span></center>
</td>
<td background="images/mn_corner_rt.jpg" width="33" height="35">
</td>
</tr>
<tr>
<td background="images/mn_left.jpg" width="33">
</td>
<td background="images/mn_bg.jpg" width="128">
<!-- <a href="#">Ajouter un questionnaire</a><br />
<a href="#">Modifier un questionnaire</a><br />
<a href="#">Supprimer un questionnaire</a><br />
<a href="#">Consulter les réponses</a> -->
</td>
<td background="images/mn_right.jpg" width="33">
</td>
</tr>
<tr>
<td background="images/mn_corner_lb.jpg" width="33" height="35">
</td>
<td background="images/mn_bottom.jpg" width="128" height="35">
</td>
<td background="images/mn_corner_rb.jpg" width="33" height="35">
</td>
</tr>
</table>Donc ma question est la suivante : est-ce un comportement normal des navigateurs de réduire la taille des images dans le sens de la largeur ?
PS : beaucoup de monde trouve démodé l'utilisation de tableaux pour la mise en forme d'un site, cela dit j'ai longtemps travaillé avec les div mais les différences de comportements entre les différents navigateurs (FF, IE, Safari, Opera, ...) m'ont découragé de travailler de cette façon. Je n'ai pas du saisir encore toutes les subtilités. Quoi qu'il en soit si les tableaux me posent autant de soucis, je vais certainement revenir aux div...
Je propose une chose : lançons une pétition pour que les différents navigateurs adoptent les mêmes standards, sauvons mon crâne de la calvitie !
