Gros souci de 1px environ sur un tableau avec image

Version imprimable

19/05/2008, 10h40
gus02

[RESOLU]Gros souci de 1px environ sur un tableau avec image

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 !:yaisse2:
19/05/2008, 11h48
copin

Salut,

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

Blop!
19/05/2008, 12h35
Er3van

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

voila un peu de code

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

Code:

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>

19/05/2008, 13h48
copin
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:

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.
19/05/2008, 13h48
Er3van

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... )
19/05/2008, 14h25
4R416N33

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:

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

Code:

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

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

Code:

<td height="heightTd"><div style="height:heightTdpx;">Contenu de ton td</div></td>
19/05/2008, 16h37
gus02

merci

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 :mouarf:
19/05/2008, 16h50
Erwan31

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

Code:

border-collapse: collapse;
20/05/2008, 08h42
gus02

b non

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 ...
20/05/2008, 10h10
gus02

et bien non

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

Alors a moins que ce soit moi qui merdouille :D ce qui est possible mais je ne vois vraiment pas de ou sa peu venir ! :cry::cry:
20/05/2008, 11h14
Erwan31

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:

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...
20/05/2008, 12h43
Candygirl

Peut-être un petit display:block; sur tes images ?
21/05/2008, 13h36
gus02

et b non

Et bien malheureusement rien ne fonctionne je ne comprend plus rien :P
Bon b merci pour vos reponses et si une idée vous viens n'hésiter PAS !!! merki :king:
21/05/2008, 13h55
Auteur
le problème est dans le retour à la ligne après la balise img
Code:

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:

1 2 <td colspan="3"><img src="images/Test_homme/tete.png"></td>
2- Forcer à aligner l'image en bas de la cellule
Code:

1 2 3 4 <td colspan="3" style="vertical-align: bottom"> <img src="images/Test_homme/tete.png"> </td>
21/05/2008, 14h47
Candygirl

Citation:

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:

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 ?
21/05/2008, 17h29
Auteur

Citation:

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 :ccool:
21/05/2008, 18h51
Erwan31

Citation:

Envoyé par Auteur

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

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.
26/05/2008, 10h10
gus02

merci

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:king:

Fuseau horaire GMT +2. Il est actuellement 12h11.