Rendu HTML d'un MailMessage

Version imprimable

Bonjour à tous,

je poste ici car je pense que les problématiques de mail sont plus récurrentes sur les applications web.

Je suis en train de développer un petit module qui envoie toutes les X heures un mail à un ou plusieurs destinataires.

Ce mail est basé sur un template HTML assez basique, sauf pour une partie dans laquelle je construis un graphique à barres via une TABLE ou une liste [UL].

Lorsque j'ouvre le résultat dans Outlook (ou Outlook sur tablette Android), le format de ma table n'est pas du tout respecté.

Le HTML utilisé est basé sur des exemples disponibles sur cette page
Le rendu HTML dans une page web est correct, tout comme dans Outlook Web Acess si j'ouvre le mail (auquel cas son contenu est affiché dans un TextAera)

Le MailMessage est construit comme ceci :
Code:

1 2 3 4 MailMessage mail = new MailMessage(); mail.Body = MailBody; mail.BodyEncoding = Encoding.UTF8; mail.IsBodyHtml = true;
Le HTML rendu ressemble à cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <ul id="graph"> <li class="tr" id="1">2007 <ul> <li class="bar" style="height:71px;"> <p>143</p> </li> </ul> </li> <li class="qtr" id="q2">2008 <ul> <li class="paid bar" style="height:111px;"> <p>223</p> </li> </ul> </li> </ul>
Avez-vous une idée de la manière dont je peux "forcer" (même si je doute fort que ce soit possible) la prise en compte du HTML par Outlook ?

D'avance merci pour vos conseils.

25/02/2013, 22h04
Immobilis

Salut,

Il y a quelques contraintes au rendu HTML des mails. En pratique les contenus externes ne sont pas téléchargés. Il faut donc en mettre un max dans le corps du mail. Si tu utilises des styles, il faut les inclure dans l'en-tête. Le js doit aussi être bloqué.

A+
26/02/2013, 08h50
calagan99

Merci Immobilis.
Pas de contenu externe, pas de js, les styles sont pour la plupart dans une balise style dans le head du template et globalement, tout est correctement rendu excepté ce graphique qui ne présente pourtant pas de spécificité particulière.
26/02/2013, 09h09
Skalp
Plutôt que dans le head, essaye de mettre le style carrément dans les balises html.
Code:

1 2 <ul id="graph" style="..."> ...
26/02/2013, 10h06
calagan99
Citation:
Envoyé par Skalp

Plutôt que dans le head, essaye de mettre le style carrément dans les balises html.

Code:

1 2 <ul id="graph" style="..."> ...
Merci Skalp.
Malheureusement, pas mieux.
Le rendu est toujours mauvais. Le style des balises imbriquées <UL><LI><UL><LI></LI></UL></LI></UL> est mal géré par Outlook.

à, je sèche...
26/02/2013, 10h44
Immobilis

On peut voir le détail des styles?

@Immobilis :

le HTML généré (version simplifiée) :

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
47
48
49
50
51
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
 
</head>
<body>
<style>
  .bordertop{ border-top:1px solid black; }
  .borderbottom{ border-bottom:1px solid black; }
  .borderright{ border-right:1px solid black; }
  .borderleft{ border-left:1px solid black; }
  .border{ border:1px solid black; }
  .margintop{ margin-top:20px; }
  .bold{ font-weight:bold; }
 
  #q-graph {position: relative; width: 480px; height: 300px;   margin: 1.1em 0 3.5em; padding: 0; background: #DDD; border: 2px solid gray; list-style: none; font: 9px Helvetica, Geneva, sans-serif;}
  #q-graph ul {margin: 0; padding: 0; list-style: none;}
  #q-graph li {position: absolute; bottom: 0; width: 80px; z-index: 2; margin: 0; padding: 0; text-align: center; list-style: none;}
  #q-graph li.qtr {height: 298px; padding-top: 2px; border-right: 1px dotted #C4C4C4; color: #AAA;}
  #q-graph li.bar {width: 60px; border: 1px solid; border-bottom: none; color: #000;}
  #q-graph li.bar p {margin: 5px 0 0; padding: 0;}
  #q-graph li.paid {left: 10px; background: #9D9; border-color: #CDC #9B9 #000 #BFB;}
  #q-graph #q1 {left: 0;}
  #q-graph #q2 {left: 80px;}
  #q-graph #q3 {left: 160px;}
  #q-graph #q4 {left: 240px;}
  #q-graph #q5 {left: 320px;}
  #q-graph #q6 {left: 400px; border-right: none;}
</style>
<table>
	<tr>
		<td colspan="2" align="center">
			<h2>FICHE</h2>
		</td>
	</tr>
	<tr>
	  <td colspan="2">
		<table style="width:100%">
		  <tr>
			<td valign="top" align="center"><TABLE style="margin: 1.1em 0 3.5em;" BORDER=1><TR ALIGN='CENTER'><TD><B>Index</B></TD><TD><B>Date Index</B></TD><TD><B>Consommation</B></TD></TR><TR ALIGN='CENTER'><TD>23</TD><TD>06/12/2012</TD><TD>23</TD></TR><TR ALIGN='CENTER'><TD>0</TD><TD>21/09/2012</TD><TD>0</TD></TR><TR ALIGN='CENTER'><TD>579</TD><TD>21/09/2012</TD><TD>136</TD></TR><TR ALIGN='CENTER'><TD>443</TD><TD>09/01/2012</TD><TD>0</TD></TR><TR ALIGN='CENTER'><TD>443</TD><TD>09/01/2012</TD><TD>89</TD></TR></TABLE></td>
			<td valign="top" align="center"><ul id="q-graph"><li class="qtr" id="q1">2012<ul><li class="paid bar" style="height:0px;"><p>0</p></li></ul></li><li class="qtr" id="q2">2012<ul><li class="paid bar" style="height:89px;"><p>89</p></li></ul></li><li class="qtr" id="q3">2012<ul><li class="paid bar" style="height:0px;"><p>0</p></li></ul></li><li class="qtr" id="q4">2012<ul><li class="paid bar" style="height:136px;"><p>136</p></li></ul></li><li class="qtr" id="q5">2012<ul><li class="paid bar" style="height:23px;"><p>23</p></li></ul></li></ul></td>
		  </tr>
		</table>            
	  </td>
	  <td>                        
	  </td>
	</tr>
</table>
</body>
</html>

26/02/2013, 12h11
Immobilis

Une piste: http://msdn.microsoft.com/en-us/libr...dCSSProperties

La balise "style" ne serait pas supportée mais l'attribut oui.
26/02/2013, 12h19
calagan99

C'était la proposition de Skalp.
J'ai essayé de ramener toutes les propriétés CSS dans un attribut "style" mais ça n'a rien changé.

Code:

1 2 3 4 5 6 7 8 <table> <tr> <td colspan="2" align="center"> <h2>FICHE</h2> </td> </tr> <tr> <td colspan="2">
Le deuxième colspan est en trop.

Ajoute un espace insécable dans la deuxième cellule de la deuxième ligne
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <table> <tr> <td colspan="2" align="center"> <h2> FICHE</h2> </td> </tr> <tr> <td> Ton tableau </td> <td>   </td> </tr> </table>
Ca résoudra peut-être pas le pb mais ce sera un peu plus d'équerre.

26/02/2013, 13h37
calagan99

Immobilis, j'avais zappé le colspan en trop, dans le HTML complet, il était nécessaire. J'ai juste mis en ligne une version allégée.
26/02/2013, 23h52
Immobilis

J'ai jamais eu besoin de faire des graph dans un mail. J'ai testé de mon côté et effectivement le rendu n'est pas bon du tout. Sachant que c'est l'application cliente qui gère le rendu cela reste tout de même aléatoire.

Essaye avec des tables... :? Générer un fichier attaché... Voir ici: http://www.campaignmonitor.com/resou...rk/guidelines/

A+
27/02/2013, 08h55
calagan99

@Immobilis : j'ai également essayé avec des tables mais ce n'est pas beaucoup mieux.
Et je ne veux pas passer par une PJ. Au pire, je vais me passer du graph.

C'est quand même complétement hallucinant que Word soit le moteur de rendu HTML d'Outlook et, pire, que Word soit si mauvais pour la manipulation du HTML...
27/02/2013, 12h34
Immobilis

Citation:

Envoyé par calagan99

Word soit si mauvais pour la manipulation du HTML...

Ben ce n'est pas non plus son usage. Word a des fonctionnalités bien différentes de celles qu'on peut avoir avec une page HTML.
27/02/2013, 13h57
calagan99

Citation:

Envoyé par Immobilis

Ben ce n'est pas non plus son usage. Word a des fonctionnalités bien différentes de celles qu'on peut avoir avec une page HTML.

C'est sûr.
C'est tout de même regrettable que ce soit ce moteur qui soit utilisé dans Outlook.