Les bordures et autres espaces des tableaux

**lysandre** · 08/09/2007, 23h39

Bonjour a tous!

j'ai un probleme de différences d'interprétation du code html suivant les navigateurs, en ce qui concerne les bordures et autres marges des tableaux. Je sais que de tels problemes existent car les différents navigateurs prennent différentes valeurs par defaut et peuvent interpréter les bordures de maniere différentes (extérieur ou intérieur), j'ai donc défini les parametres border="0" cellspacing="0" cellpadding="0".
Et bien j'ai encore des problemes. Vous trouverez a l'adresse suivante
http://www.photo-illum.com/test.jpg
la capture d'ecran du probleme.
Explication: ici les zones vertes, jaunes, bleues et roses sont les cellules du tableau (que j'ai colorées avec bgcolor pour les visualiser). Le parametre valign de la cellule rose a été defini sur "bottom". On voit que le comportement de firefox et opera est celui attendu, alors que sous IE et Netscape il y a une marge que je ne m'explique pas.
Quelqu'un saurait pourquoi et aurait une solution pour eviter enlever cette marge?

Merci d'avance!

**Bisûnûrs** · 08/09/2007, 23h45

L'image est un élément en ligne (inline), donc le navigateur alloue de la place pour les caractères avec une queue (?), comme le "p", le "q", le "g", etc ...

Pour éviter cela, il faut transformer l'image en élément block :

Code :

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

<img src="monimage.jpg" style="display:block" />

**lysandre** · 09/09/2007, 00h35

Merci encore une fois bisûnûrs...
Cela marche tres bien, mais une chose tres bizarre m'etonne qui ne semble pas coller avec ton explication. Apres plusieurs expériences, j'avais trouvé ce qui produisait ce probleme (une des choses qui produisait ce probleme, car apparemment le fait que l'image soit inline provoque aussi le probleme)

Le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<html>
<head>
</head>
<body>
 
<table width="341" height="181" border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor=#FF0000 valign="bottom"><img src="images/logop.jpg"></td></tr></table>
 
</body>
</html>

ne provoque pas cette marge en bas (et pourtant l'image est inline) alors que ce code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
<head>
</head>
<body>
 
<table width="341" height="181" border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor=#FF0000 valign="bottom"><img src="images/logop.jpg">
</td></tr></table>
 
</body>
</html>

provoque le probleme. La différence: un retour a la ligne dans le code htlm apres l'image!
Je croyais que les retours a la ligne n'etaient pas pris en compte??

**Bisûnûrs** · 09/09/2007, 00h40

Dans le cas où ton code est sur une ligne, le navigateur voit bien qu'il n'y a pas d'autre élément à côté de l'image.

Dans le cas d'un retour à la ligne dans ton code, cela créé un espace à l'affichage dans ton navigateur, donc du texte à côté de l'image, donc possibilité qu'il y ait des caractères à queue.

Par exemple, si tu écris une phrase dans ton code comme ça :

Code :

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

1
2
3
4
5
6
7
B
o
n
j
o
u
r

ça va apparaître comme ça :

B o n j o u r

et non comme ça :

Bonjour

**lysandre** · 09/09/2007, 00h48

ah oui effectivement j'aurais du me douter que le retour a la ligne introduisait un espace et donc confirmait ce que tu disais...
Grand merci et... bonne nuit!

Les bordures et autres espaces des tableaux

HTML

Vue hybride

Discussions similaires

Partager

Partager