28172 sujets

CSS et mise en forme, CSS3

Emailing : Ligne blanche sous un TD de texte

Bonjour,
Je suis entrain de faire un emailing pour que chaque personne de ma société puisse l'envoyé depuis son outlook en le personnalisant.
L'idée, une case de texte dans mon tableau afin que chacun écrive son message.
Le pb : Il me reste une ligne blanche (sous outlook) juste en dessous de cette case de texte... Comment l'enlever ?

Essai 1 : display:block - ne change rien
Essai 2 : align - ne change rien
Essai 3 : Table imbriquées de 2 & 3 niveaux
Essai divers : J'ai du tester 80% des propriété CSS d'alignement dispo dans DW

Voici le dernier code (en table imbriquée) qui fonctionne le mieux en rendu mais cette pu***n de ligne reste la !

Une idée pour me sortir de cette galère?

Merci d'avance à tous !

PJ : Img avec la ligne blanche
PJ2: Code

<table width="607" height="652" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">
	<tr>
		<td colspan="3" width="607" height="52">
			<img src="images/voeux2016-4_01.jpg" align="top" width="607" height="52" alt="1" border="0" style="display:block !important"></td>
	</tr>
	<tr><td><table width="607" height="101" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_02" style="display:block">
	<td width="154" height="101">
		<img src="images/voeux2016-4_02.jpg" width="154" height="101" alt="2" border="0" style="display:block !important"></td>
		<td width="195" height="101" cellpadding="0" cellspacing="0" align="top" border="0" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-size: 10px; font-weight: normal; display: block; border-collapse:collapse; max-height:95; max-width:195 padding:0; margin:0"><span style="text-align:left">Texte de base à remplacer</span></td>
		<td width="258" height="101" align="right">
			<img src="images/voeux2016-4_04.jpg" width="258" height="101" alt="3" border="0" style="display:block !important;"></td>
</table></tr></td>
	
  <tr><td><table width="607" height="499" border="0" align="top" cellpadding="0" cellspacing="0" id="Tableau_03" style="display:block">
		<td colspan="3" width="607" height="499" align="top" border="0">
		  <img src="images/voeux2016-4_05.jpg" width="607" height="499" alt="4" border="0" style="display:block !important"></td>
          </table>
	</tr></td>
</table>
upload/60642-2015-12-02.jpg
Modérateur
Salut Iaskoo,


Comment peux-tu voir quelque-chose dans ce tas de balise ?
Zero indentation... ca permet pourtant de relever des fautes graves comme un manque de <tr> dans tes tableaux de second niveau ou bien une fermeture de </tr> juste avant la fermeture de </td>...

<table width="607" height="652" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">
	<tr>
		<td colspan="3" width="607" height="52">
			<img src="images/voeux2016-4_01.jpg" align="top" width="607" height="52" alt="1" border="0" style="display:block !important">
		</td>
	</tr>
	<tr>
		<td>
			<table width="607" height="101" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_02" style="display:block">
				<td width="154" height="101">
					<img src="images/voeux2016-4_02.jpg" width="154" height="101" alt="2" border="0" style="display:block !important">
				</td>
				<td width="195" height="101" cellpadding="0" cellspacing="0" align="top" border="0" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-size: 10px; font-weight: normal; display: block; border-collapse:collapse; max-height:95; max-width:195 padding:0; margin:0"><span style="text-align:left">Texte de base à remplacer</span>
				</td>
				<td width="258" height="101" align="right">
					<img src="images/voeux2016-4_04.jpg" width="258" height="101" alt="3" border="0" style="display:block !important;">
				</td>
			</table>
		</tr>
	</td>
	<tr>
		<td>
			<table width="607" height="499" border="0" align="top" cellpadding="0" cellspacing="0" id="Tableau_03" style="display:block">
				<td colspan="3" width="607" height="499" align="top" border="0">
		  			<img src="images/voeux2016-4_05.jpg" width="607" height="499" alt="4" border="0" style="display:block !important">
		  		</td>
          	</table>
		</tr>
	</td>
</table>


Pour ton soucis de ligne blanche je n'ai pas de quoi testé sous la main mais il me semble qu'il faut mettre un line-height:0px; sur les balise img (mais vraiment pas sur...)
Modérateur
Hello,

Ce que j'ai appris de tous mes e-mailings, c'est de ne jamais forcer des Width/Height comme tu le fais sur tous les éléments.
Essaie en enlevant toutes ces tailles. Si ton image fait déjà 607*499, pourquoi reseter sa taille ?

Une fois que c'est fait, essaie peut-être un valign="bottom" sur les <td> de la première ligne et un valign="top" sur les <td> de la seconde ligne.

Si pas, tu enlèves le contenu de chaque <td> un à un pour savoir de quelles cellules et puis quel élément vient cet écart...

Tu es sur quelle version de Outlook ?
Merci à vous pour ces réponses !
J'avoue que le code est un peu bordelique mais ce n'est pas du tout mon job initial de faire cela Smiley smile
J'essayerai de m'améliorer pour la prochaine fois Smiley smile

Pou répondre à _laurent, J'ai déjà essayé et le problème vient du seul endoirt où je n'ai pas de balise image. Si je remplace l'endroit de texte avec une image et je fais un display:block, c'est bon, je n'ai plus de ligne. Mais par contre si je laisse une "case de texte", (ce qui va permettre aux salairés de mettre un mot perso dedans) et bien là j'ai la ligne qui apparait!
Ma question est de savoir comment, sur le td du texte, je peux retirer cette ligne... (donc l'idée de line-heigth:0px je ne sais pas où le mettre vu que je n'ai pas de balise img...)
Une autre idée _laurent ?

Yordi,
- Si je ne bloque pas les tailles dans les éléments,la créa part en sucettedonc c'est une solution que j'ai trouvée mais s'il y a mieux je suis prenneur! J'ai tout de même essayé ce que tu me propose et j'ai ajouté les valign bottom & top mais rien n'y fait !
- la version outlook est 2010 & 2013

Merci encore de votre aide !
Sujet clos
Aller à