Les images en CSS dans les mails HTML
Bonjour à tous
Je planche sur l'envoi de mail au format HTML pour mon site.
J'ai lu pas mal de truc sur le net et j'ai tenté d'appliquer les différentes "règles" que j'ai touvé.
Mais là je bloque sur un souci que je ne comprends pas : les images que je place avec la balise IMG s'affiche bien dans Outlook 2007 alors que les images qui sont appellées par du CSS (placé en parametre style du contrôle concerné) ne s'affiche pas, mais sont présentes. Je vois, subreptissement un cadre apparaitre puis disparaitre. L'une des images est même dans un lien A HREF et réagi bien (sauf qu'elle n'a pas la taille que je lui indique.
En prenant la source du mail que je reçois, je copie/colle ça dans une page HTML et j'ai tout bien.
En gros je ne sais à quoi j'ai à faire : un souci de codage de mon mail ou un problème d'option dans OutLook ?
Si vous pouviez m'aigiller, ça serait cool, ça fait deux jours que je planche sur le problème et je craque.
Pour l'exemple voici le codage complet de mon mail :
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Un Message de Bombamail</title></head>
<body style="background-color:#ffcb4f;background-image:url('http://www.bombamail.com/App_Themes/Bomba/FondBombamail.png');background-position:center top;background-repeat:no-repeat;">
<div id="ZoneRetourAccueil" style="width:1000;text-align:center;margin-left:auto;margin-right:auto;padding-top:80px;">
<a href="http://www.bombamail.com/Default.aspx" target="_self">
<img src="http://www.bombamail.com//App_Themes/trou.gif" height="150" width="600" alt="Retour sur Bombamail" style="border:none;" />
</a>
</div>
<div>
<table style="width:1000px;margin-left : auto;margin-right : auto;border:none;">
<tr><td align="center" valign="top"></td></tr>
<tr>
<td valign="top">
<div id="cadreMessage" style="background-image:url('http://www.bombamail.com/App_Themes/Bomba/CadreInscription.png');background-position:center top;background-repeat:no-repeat;padding-left:120px;padding-top:0px;padding-right:10px;vertical-align:top;height:400px;">
<div id="titreMessage" style="position:relative;top:35px;left:220px;color:#F30E0E;font-weight:bold;font-family:Times New Roman;font-size:40px;">Un message de Bombamail</div>
<div id="texteMessage" style="position:relative;top:70px;left:20px;width:700px;color:#F30E0E;">##corpsmail##</div>
</div>
</td>
</tr>
<tr><td valign="top"></td></tr>
<tr><td valign="top">
<table id="ctl00_tblBasPage" border="0" style="width:100%;">
<tr>
<td style="width:33%;text-align:center;padding-top:15px;">
<a id="ctl00_hlContact" title="Contactez-Nous" href="http://www.bombamail.com/Default.aspx?page=276">
<img alt="Contactez-nous" title="Contactez nous" src="http://www.bombamail.com/App_Themes/Bomba/BtnContact.png" style="border:none;" />
</a>
</td>
<td style="width:33%;text-align:center;padding-top:15px;">
<a id="ctl00_hlConditions" title="Conditions Générales d'Utilisation" href="http://www.bombamail.com/Default.aspx?page=275">
<img alt="Conditions Générales d'Utilisation" title="Conditions Générales d'Utilisation" src="http://www.bombamail.com/App_Themes/Bomba/BtnCGU.png" style="border:none;" />
</a>
</td>
<td style="width:33%;text-align:center;padding-top:15px;">
<a id="ctl00_hlMentions" title="Mentions légales" href="http://www.bombamail.com/Default.aspx?page=274">
<img alt="Mentions Légales" title="Mentions légales" src="http://www.bombamail.com/App_Themes/Bomba/BtnMentions.png" style="border:none;" />
</a>
</td></tr>
</table></td>
</tr>
</table>
</div>
</body>
</html> |
