Les bordures et autres espaces des tableaux

Version imprimable

08/09/2007, 23h39
lysandre

Les bordures et autres espaces des tableaux

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!
08/09/2007, 23h45
Bisûnûrs

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:

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

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:

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:

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??

09/09/2007, 00h40
Bisûnûrs
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:

1 2 3 4 5 6 7 B o n j o u r
ça va apparaître comme ça :

Citation:

B o n j o u r

et non comme ça :

Citation:

Bonjour
09/09/2007, 00h48
lysandre

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!