CSS dans les mail - Habillage de liste

**LeBernie** · 19/08/2009, 16h02

Je dois réaliser des gabarits de mail utilisé dans thunderbird par notre service presse.
Je travaille entre html à l'ancienne et css.

Dans la css, l'habillage des puces d'une liste se fait au moyen d'une image, l'image s'affiche correctement lors de la composition du mail mais n'est pas reçue par les clients mails (ex thunderbird)...

Code CSS :

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

1
2
3
4
5
6
7
8
9
li {
	margin-left:25px;
	margin-right:20px; 
	margin-top:10px; 
	margin-bottom:10px;
	text-align:left;
	vertical-align: middle;
	list-style:disc url(..extras/img_mail/bulle.gif);	
}

Je pense que cela viens du fait que mon image n'est pas "incorporée" au mail ?

Quelqu'un a-t-il une solution ?

**HiRoN** · 19/08/2009, 16h14

Bonjour,

Sauf erreur de ma part, Thunderbird désactive par défaut les images...

Code CSS :

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

list-style:disc url(..extras/img_mail/bulle.gif);

À mettre de la forme :

Code CSS :

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

list-style:disc url(http://www.monsite.com/extras/img_mail/bulle.gif);

(en style en ligne sur le(s) li)

**LeBernie** · 19/08/2009, 16h22

J'ai essayé aussi avec une url complète, mais ça ne s'affiche toujours pas lors de la réception mais bien lors de la composition :

Code CSS :

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

1
2
3
4
5
6
7
8
9
li {
	margin-left:25px;
	margin-right:20px; 
	margin-top:10px; 
	margin-bottom:10px;
	text-align:left;
	vertical-align: middle;
	list-style:disc url(http://monsite/intranet/extras/img_mail/bulle.gif)
}

**HiRoN** · 19/08/2009, 16h29

L'url donnée affiche bien l'image ?
Utilises-tu bien des "style en ligne" dans tes balises ?
Sous Thunderbird, l'image s'affiche-t-elle après avoir cliqué sur "Afficher les images distantes" (ou une phrase dans le genre) ?

**LeBernie** · 19/08/2009, 16h43

je vais te paraître ignare, mais que sont les style en ligne ?

**HiRoN** · 19/08/2009, 16h49

Envoyé par LeBernie

je vais te paraître ignare, mais que sont les style en ligne ?

Normalement, les clients mails ne respectant pas les normes, la façon la plus simple de faire un email compatible sur un maximum d'entre eux et d'utiliser les styles en ligne dans les balises.

Code HTML :

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

<div style="border:1px solid red; margin:15px;">Par exemple</div>

Et donc, ne pas utiliser un fichier CSS externe (certains clients mails zappant totalement le code normalement placé avant le <body>).

Il me semble que developpez à un cours / tutoriel CSS traitant du sujet mais je n'arrive pas à remettre la main dessus...

**12monkeys** · 19/08/2009, 20h16

Salut

Envoyé par HiRoN

Il me semble que developpez à un cours / tuto traitant du sujet mais je n'arrive pas à remettre la main dessus...

C'est pas ça que tu cherches ? http://a-pellegrini.developpez.com/tutoriels/css/email/

**LeBernie** · 20/08/2009, 12h01

Ok, il fallait mettre le style dans la balise <li> directement (en ligne donc) et placer le fichier sur un serveur web et pas un serveur interne comme j'avais fait la 1° foi.

Merci !

Et merci pour le liens, je connaissait le tableau sur un autre site mais celui-ci est d'enfer !