28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'essai de créer une signature à intégrer dans mes mails , mais j'ai un léger souçis avec IE ce qui je pense posera problème avec outlook.
La structure via tableau et image n'est pas un choix mais plus une obligation pour une compatibilité maximal avec les différents clients mail.

Bref j'ai un soucis avec IE qui induit un décallage dans mon tableau.
La seconde cellule du tableau à sous ie une hauteur de 20px malgres la présence d'un line-heigh :0 . JE n'arrive pas à réduire cette taille qui devrait être de 2px.


<table style="text-align: left; width: 635px;" border="0" cellpadding="0" cellspacing="0">
	<tbody>
	<tr>
		<td colspan="1" rowspan="4">
			<img style="width: 8px; height: 139px;" alt="" src="001.jpg">
		</td>
		<td style="line-height:0;vertical-align: top;height:2px;padding:0;margin:0;" height="2px" colspan="2" rowspan="1">
			<img style="width: 578px; height: 2px;" alt="" src="003.jpg" height="2px" align="top">
		</td>
		<td colspan="1" rowspan="4">
			<img style="width: 49px; height: 139px;" alt="" src="002.jpg">
		</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="1">
			<span style="color: rgb(192, 28, 24); font-family: Arial; font-weight: bold;">Nom Prénom</span>
			<br style="color: rgb(192, 28, 24); font-family: Arial;">
			<div style="margin-left: 30px;border-bottom:1px solid #593319; ">
				<small><span style="color: rgb(192, 28, 24); font-family: Arial; font-style: italic;">Fonction</span></small>
			</div>
		</td>
	</tr>
	<tr>
		<td style="color: rgb(51, 51, 51); font-family: Arial;"><small>Tél : xx xx xx xx xx<br><a href="mailto:testr@test.com">mail@mail.com</a></small></td>
		<td style="font-family: Arial; color: rgb(51, 51, 51);"><small><span style="font-weight: bold;">Société</span><br>Adressse 1<br>Adresse 2 - France</small></td>
	</tr>
	<tr>
		<td style="vertical-align: bottom;" colspan="2" rowspan="1">
			<img style="width: 578px; height: 1px;" height="1px;" alt="" src="004.jpg"></td>
	</tr>
	</tbody>
</table>


Du coup cette celulle de 20px me décalle celle du bas.
Il est possible de voir une idée du problème ici : http://ftpgrunk.free.fr/signature/sign2.html

Si vous avez une idée je suis preneur Smiley smile

Ps : Dans la version final les chemins des images sont du type file:///C:/...
Modifié par grunky (15 Apr 2009 - 16:40)
Salut,

Si sur IE il te reste toujours un espace, c'est parce que même sans contenu il alloue l'espace nécessaire à une éventuelle ligne de texte, donc la hauteur de tes cellules égale la hauteur d'une ligne de texte.
Problème dans ton cas, le line-height seul ne permet pas de définir la taille d'une ligne, il faut en plus renseigner la taille de la police. Donc si tu rajoutes un font-size:0, ça devrait marcher.

Attention, on ne sait pas ce que ça peut donner sur Outlook sans le vérifier par soi-même. En effet, si le moteur de rendu de Outlook utilisait celui de IE jusqu'à peu, depuis la version 2007 ce n'est plus le cas. Le moteur de rendu étant celui intégré à .... Word.
Merci pour ta réponse,
J'ai toujours le décalage en bas mais mon contenu est bien remonté , je devrais donc m'en sortir Smiley smile

a écrit :
depuis la version 2007 ce n'est plus le cas. Le moteur de rendu étant celui intégré à .... Word.

Ca promet Smiley biggol
Pour le décalage en bas, tu peux le corriger en mettant un vertical-align:bottom sur tes images gauche et droite (celles de la première ligne, dans les cellules avec un rowspan="4").
Modifié par Agylus (15 Apr 2009 - 17:10)