Les images en CSS dans les mails HTML

zooffy · 04/02/2011, 10h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Vil'Coyote · 04/02/2011, 11h41

alors je me trompe peut être mais en général pour la réalisation de mail html il faudrait éviter au possible les balise div etc ...
ainsi que les style trop développé car les clients de messageries ne dispose pas de moteur html très ressent voir même développé.

donc pour moi, ce n'est ni une erreur dans ton code ni une option de outlook juste une conception peut être à revoir.

zooffy · 04/02/2011, 12h28

Bon, donc en gros, c'est la mouise et je vais pas m'en sortir comme ça !!!

Alors, si je suis ton raisonnement :
- je n'utilise pas de DIV, donc je mets des TABLE. Mais on m'a dit que les TABLE c'est le Mal et que le DIV c'est la lumière du Standrad W3C
- je n'utilise pas de CSS et je fais comme je peux pour faire du beau. Mais on m'a dit que le CSS et le paramettre STYLE (voire carrément le Fichier CSS) c'est le standard W3C, le REste c'est le Mal.

Donc en gros, je code un truc super sioux pour faire du standard compatible IE, FF et Chrome sur mon site et je fais une bouillie sans nom pour envoyer mes mails ?

Je comprends plus rien. J'ai lu encore des trucs depuis mon premier message, c'est infernal, chaque client messagerie fait comme il veut et un mail qu'on voit sur Hotmail, on le voit pas sur Gmail et à moitié sur Outlook.

En gros, si je capte bien tout ce que j'ai lu, les mails, c'est du texte et basta !!!
Moi, je voulais faire du beau...............

Merci pour ton aide. Si toi, ou quelqu'un voit une porte de sortie dans cet imbroglio, je suis preneur. C'est le dernier point qui me reste à gérer avant de faire la mise en prod.

Pour un Vendredi, c'est cool...................

Vil'Coyote · 04/02/2011, 13h43

oui le css c'est le standard w3c mais un mail n'est pas un standard d'ou les problème d'incompatibilité.

le style est exploitatable mais certaines fonction trop poussé pour les interpréteur html des différents client de messageries ne fonctionnent pas.

zooffy · 04/02/2011, 13h59

Alors la parade c'est bien de coder comme en 1998 ?
Je me lance dans un recodage de mon mail avec les balises de l'époque, j'en chie....

Avec ça, je vais bien me garantir une compatibilité maximale ?
Et je dis bien maximale et pas totale, je me doute qu'il y aura toujours des irréductibles.
Mais si j'arrive à afficher dans OutLook, Hotmail, GMail et Yahho, je pense couvrir une bonne partie des clients.

Mais du coup, faut que j'aille dans le forum HTML pour leur demander des précisions sur des paramettres, je trouve même plus de doc pour les balises compatilbe IE 6.0 !!!!

Vil'Coyote · 04/02/2011, 18h02

ouep je sais c'est pour ça que je fait deux versions en générale.

une version image envoyé par mail avec dans le corps un lien vers un formulaire html en indiquant "pour voir la version html cliquez ici" après cela dépend des gens et des habitudes.

pour mon cas ma boite utilise lotus nots donc j'ai pas 36 choix possibles.

04/02/2011, 12h28	#3
zooffy Membre Expert Erick OZOUF Développeur Web Inscription : août 2004 Messages : 3 378 Détails du profil Informations personnelles : Nom : Erick OZOUF Âge : 42 Localisation : France, Morbihan (Bretagne) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : août 2004 Messages : 3 378 Points : 1 330 Points : 1 330	Bon, donc en gros, c'est la mouise et je vais pas m'en sortir comme ça !!! Alors, si je suis ton raisonnement : - je n'utilise pas de DIV, donc je mets des TABLE. Mais on m'a dit que les TABLE c'est le Mal et que le DIV c'est la lumière du Standrad W3C - je n'utilise pas de CSS et je fais comme je peux pour faire du beau. Mais on m'a dit que le CSS et le paramettre STYLE (voire carrément le Fichier CSS) c'est le standard W3C, le REste c'est le Mal. Donc en gros, je code un truc super sioux pour faire du standard compatible IE, FF et Chrome sur mon site et je fais une bouillie sans nom pour envoyer mes mails ? Je comprends plus rien. J'ai lu encore des trucs depuis mon premier message, c'est infernal, chaque client messagerie fait comme il veut et un mail qu'on voit sur Hotmail, on le voit pas sur Gmail et à moitié sur Outlook. En gros, si je capte bien tout ce que j'ai lu, les mails, c'est du texte et basta !!! Moi, je voulais faire du beau............... Merci pour ton aide. Si toi, ou quelqu'un voit une porte de sortie dans cet imbroglio, je suis preneur. C'est le dernier point qui me reste à gérer avant de faire la mise en prod. Pour un Vendredi, c'est cool................... __________________ Mon blog de création d'univers : Qualhiryann Mon site qui parle de moi moi.ozouf.com
	00

04/02/2011, 13h59	#5
zooffy Membre Expert Erick OZOUF Développeur Web Inscription : août 2004 Messages : 3 378 Détails du profil Informations personnelles : Nom : Erick OZOUF Âge : 42 Localisation : France, Morbihan (Bretagne) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : août 2004 Messages : 3 378 Points : 1 330 Points : 1 330	Alors la parade c'est bien de coder comme en 1998 ? Je me lance dans un recodage de mon mail avec les balises de l'époque, j'en chie.... Avec ça, je vais bien me garantir une compatibilité maximale ? Et je dis bien maximale et pas totale, je me doute qu'il y aura toujours des irréductibles. Mais si j'arrive à afficher dans OutLook, Hotmail, GMail et Yahho, je pense couvrir une bonne partie des clients. Mais du coup, faut que j'aille dans le forum HTML pour leur demander des précisions sur des paramettres, je trouve même plus de doc pour les balises compatilbe IE 6.0 !!!! __________________ Mon blog de création d'univers : Qualhiryann Mon site qui parle de moi moi.ozouf.com
	00

04/02/2011, 11h41	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	alors je me trompe peut être mais en général pour la réalisation de mail html il faudrait éviter au possible les balise div etc ... ainsi que les style trop développé car les clients de messageries ne dispose pas de moteur html très ressent voir même développé. donc pour moi, ce n'est ni une erreur dans ton code ni une option de outlook juste une conception peut être à revoir.
	00

04/02/2011, 13h43	#4
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	oui le css c'est le standard w3c mais un mail n'est pas un standard d'ou les problème d'incompatibilité. le style est exploitatable mais certaines fonction trop poussé pour les interpréteur html des différents client de messageries ne fonctionnent pas.
	00

04/02/2011, 18h02	#6
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	ouep je sais c'est pour ça que je fait deux versions en générale. une version image envoyé par mail avec dans le corps un lien vers un formulaire html en indiquant "pour voir la version html cliquez ici" après cela dépend des gens et des habitudes. pour mon cas ma boite utilise lotus nots donc j'ai pas 36 choix possibles.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email