Gros souci de 1px environ sur un tableau avec image

**gus02** · 19/05/2008, 10h40

Bonjour a tous et a toutes,
VOici mon probleme,

j'ai un tableau découpé en trois parties :

-la tete
-le corps
-les pieds

probleme il y a un tout petit espacement entre la tete et le corps et le corps et les pieds !!! impossible de le retirer.(cellpadding=0 cellspacing=0)
Si sa vous est deja arrivé ... OU si vous avez une idée un parametre a ajouter dans image, dans table ....??

Merci a vous !

**copin** · 19/05/2008, 11h48

Salut,

Tu peux donner un peu de code, s'il te plait.
Ca sera plus simple pour t'aider.

Blop!

**Er3van** · 19/05/2008, 12h35

D'une : sous quel navigateur as-tu testé ?

De deux : du code !

C'est peut-être simplement que la bordure des tables n'est pas nulle, malgré le cellpadding et cellspacing ça génère un espacement

Mais sans code...

**gus02** · 19/05/2008, 13h31

Voila mon code simplifier (j'ai enlever le texte le formulaire....)

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
	<table cellpadding=0 cellspacing=0>
	<tr >	
		<td colspan="3">
		<img src="images/Test_homme/tete.png">
		</td>
	</tr>
 
	<tr>
		<td align="left">
			<img src="images/Test_homme/gauche.png">
		</td>
 
		<td bgcolor="#F1EFE2" align="center">
			TEXTE
			<table border="0" width="100%" cellpadding=0 cellspacing=0>
				<tr>
					<td align="left" width="7">
					IMAGE
					</td>
					<td>
						<table cellpadding=0 cellspacing=0>
							<tr>
								<td>FORMULAIRE</td>
							</tr>
							<tr>
								<td>TEXTE</td>
							</tr>
							<tr>
								<td>LIEN</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
 
		<td align="right" width="9">
			<img src="images/Test_homme/droit.png">
		</td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/Test_homme/pied.png">
		</td>
	</tr>
	</table>

**copin** · 19/05/2008, 13h48

Re,

Comme Er3van le dis si bien la bordure des tables n'est pas nulle, malgré le cellpadding et cellspacing ça génère un espacement...

Donc essaie,

Code :

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

1
2
 
<table cellpadding="0" cellspacing="0" border="0">

Si cela ne résoud pas le problème.

Etant donné qu'on a pas tes images sur nos pc, on a un peu de mal a reproduire le probleme. Si elles sont stockées sur un serveur donne le chemin d'accès pour qu'on voit ce que ca donne.

**Er3van** · 19/05/2008, 13h48

En testant avec ton bout de code sur IE6 je n'ai aucune marge...

Ca vient peut-être d'ailleurs...

Sinon, trois tables incluses ??? ^^'
Tu peux réduire à une seule en te servant de colspan et rowspan ( quoique ça puisse générer des bugs sous FF paraît-il... )

**4R416N33** · 19/05/2008, 14h25

rowspan et colspan pas conseillé comme tu le disais.

Maintenant, ces deux bouts de codes devraient régler ton problème :

Tout d'abord :

Code :

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

<body marginheight="0" marginwidth="0">

Code :

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

<table cellpadding="0" cellspacing="0" border="0">

De plus, pense à donner un attribut height à ton td, et pour ton td

Code :

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

<td height="heightTd"><div style="height:heightTdpx;">Contenu de ton td</div></td>

**gus02** · 19/05/2008, 16h37

Merci pour vos réponse je test et je vous dit quoi

(Ps : l'image est OK il n'y a pas un pixel qui déspasse !!! et elle n'est pas en ligne désolé)

En tout cas gros merci

**Erwan31** · 19/05/2008, 16h50

A vue de nez il faut fusionner les bordures de cellules:

Code :

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

border-collapse: collapse;

**gus02** · 20/05/2008, 08h42

Alors j'ai testé border-collapse: collapse; (que je ne connaissais pas) j'ai bien mis la meme classe a tous les <td> mais sa ne change scritement rien mais je n'ai pas encore testé <body marginheight="0" marginwidth="0">

Donc merci a vous je vais continuer a chercher mais si vous avez d'autre idée ...

**gus02** · 20/05/2008, 10h10

hé b non sa ne fonctionne pas
"<body marginheight="0" marginwidth="0">"

Alors a moins que ce soit moi qui merdouille

ce qui est possible mais je ne vois vraiment pas de ou sa peu venir !

**Erwan31** · 20/05/2008, 11h14

Je suis pas sûr que tu aies procédé comme ce qui suit alors pour info le
border-collapse n'est applicable qu'aux table et non aux td:

Code :

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

table {border-collapse: collapse}

Si tu veux avoir des chances d'avoir une réponse rapidement, il faudrait mettre une page en ligne. Le code n'est pas toujours suffisant.

PS: attention à ton orthographe...

**Candygirl** · 20/05/2008, 12h43

Peut-être un petit display:block; sur tes images ?

**gus02** · 21/05/2008, 13h36

Et bien malheureusement rien ne fonctionne je ne comprend plus rien

Bon b merci pour vos reponses et si une idée vous viens n'hésiter PAS !!! merki

**Auteur** · 21/05/2008, 13h55

le problème est dans le retour à la ligne après la balise img

Code :

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

1
2
3
4
 
		<td colspan="3">
		<img src="images/Test_homme/tete.png">
		</td>

IE en tient compte, d'où l'espace entre l'image et la bordure...

deux solutions :
1- tout écrire sur une ligne (ce qui n'est pas terrible)

Code :

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

1
2
 
		<td colspan="3"><img src="images/Test_homme/tete.png"></td>

2- Forcer à aligner l'image en bas de la cellule

Code :

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

1
2
3
4
 
		<td colspan="3" style="vertical-align: bottom">
		<img src="images/Test_homme/tete.png">
		</td>

**Candygirl** · 21/05/2008, 14h47

Envoyé par Auteur

le problème est dans le retour à la ligne après la balise img

Tout dépend de la présence ou non du doctype et du choix entre transitionnel ou strict.

Ta proposition de tout coller ne va pas règler le problème sur FF ou opera en strict.

Il me semble que le vertical-align devrait plutôt être attribué sur l'image que sur le td:

Code :

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

td img {vertical-align:bottom;}

Cela permet de règler le problème mais tant que la hauteur de l'image est supérieur au line-height...

Par contre attribuer le display:block aux images est censé règler le problème dans tous les cas.

@gus02
Ne peux-tu pas héberger ta page ou la donner en fichier joint, ou, au pire, donner le code complet pour voir ce qui te pose exactement problème ?

**Auteur** · 21/05/2008, 17h29

Envoyé par Candygirl

Tout dépend de la présence ou non du doctype et du choix entre transitionnel ou strict.

Ta proposition de tout coller ne va pas règler le problème sur FF ou opera en strict

Je croyais que ce problème n'existait que sous IE indépendamment du doctype. Merci pour l'info

**Erwan31** · 21/05/2008, 18h51

Envoyé par Auteur

Je croyais que ce problème n'existait que sous IE indépendamment du doctype. Merci pour l'info

Salut,
je crois que CandyGirl veut faire référence à l'espace sous les images présent
en mode Strict (sous FF, Opera et Safari) et non aux espace non significatifs
présents quant à eux uniquement sous IE.
En présence d'un doctype Transitionnal, ces 3 navigateurs déclenchent le
mode almost standard (presque standard pour ceux qui n'aiment pas l'anglais)
qui a pour effet de supprimer l'espace sous les images.

Ce mode a été inventé par Mozilla pour pallier précisément à ces espaces inférieurs qui
peuvent s'avérer problématiques lorsque l'on utilise des tableaux avec des images à l'intérieur.

IE en mode strict se comporte à ce niveau là comme le mode almost standard
de ces 3 navigateurs.

**gus02** · 26/05/2008, 10h10

Merci a tous et a toutes pour vos reponses en faisant un mixte sa marche j'ai surtout utiliser des <div> et beaucoup de patience ! lol merci a tout le monde vous etes super

Gros souci de 1px environ sur un tableau avec image

HTML

Discussions similaires

Partager

Partager