28172 sujets

CSS et mise en forme, CSS3

L'image remplassant les puces d'une liste qui disparait dans mail ?

Salut à tous Smiley cligne

Ma page web destinée à être envoyée par Mailing contient une liste dont les puces sont remplassées par une image.
Problème : dans certaines boites mails ces puces disparaissent ex : Hotmail

j'ai testé ces 2 méthodes trouvées sur ce forum Smiley smile :

<table Style="Font: 11px Arial;" width="356" height="119" border="0" cellpadding="20" cellspacing="0" bgcolor="#FFFFFF">
              <tr>
                <td style="border:1px solid #D2D2D2;" width="308">
			<p Style="color: #000;	font-weight: bold; font-size: 13px; ">TITRE<br>
                </p>
                  <ul>
                    <li Style="list-style-image:url(http://www.blabla.fr/IMG/puce.png);">Liste 01.</li>
                    <li Style="list-style-image:url(http://www.blabla.fr/IMG/puce.png);">Liste 02.</li>
                    <li Style="list-style-image:url(http://www.blabla.fr/IMG/puce.png);">Liste 03.</li>
                   </ul></td>
              </tr>
            </table>




<table Style="Font: 11px Arial; border-style:solid; border-color:#D2D2D2; border-width:1px;" width="356" height="119" cellpadding="20" cellspacing="0" bgcolor="#FFFFFF">
              <tr>
                <td width="308">
			<p Style="color: #000; font-weight: bold; font-size: 12px; ">TITRE<br>
                </p>
                <ul Style="list-style: none; margin: 0 0 0 30px; padding: 0;">
                    <li Style="background:url(http://www.blabla.fr/IMG/puce.png) top left no-repeat; padding-left: 20px;">Liste 01.</li>
                    <li Style="background:url(http://www.blabla.fr/IMG/puce.png) top left no-repeat; padding-left: 20px;">Liste 02.</li>
                    <li Style="background:url(http://www.blabla.fr/IMG/puce.png) top left no-repeat; padding-left: 20px;">Liste 03.</li>
                </ul></td>
              </tr>
            </table>


Dans le 1er cas les puces par défaut réapparaissent.
Dans le 2nd cas aucunes puces n'apparaissent.

Avez vous une idée à me proposer ? D'avance merci à ceux qui se pencheront sur mon problème Smiley biggrin
Je venais justement de tomber dessus ! lol

Encore merci pfoofen Smiley cligne
> Donc une image remplaçant les puces c'est pas top dans hotmail. Par contre est-ce normal d'avoir des puces aussi énormes ? Est ce possible de réduire leur taille par défaut ?

PS : j'en reviens tjs pas d'avoir écrit remplacer avec 2 s ! Smiley biggol
Merci pour les infos pfoofen Smiley cligne

Même si ça galère sous certains clients email, aprés plusieurs essais je suis arrivé à mes fins Smiley biggrin

upload/28418-Liste.jpg

Voici le code :

<table width="356" height="119" cellpadding="20" cellspacing="0" bgcolor="#FFFFFF" style="border-style:solid; border-color:#D2D2D2; border-width:1px;">
  <tr>
    <td width="308"><p style="color: #CD8111;	font-weight: bold; font-size: 12px; Font-family: Arial;">TITRE</p>
    
        <ul style="list-style-type: square; color: #CD8111; font-size:10px; Font-family: Arial;">
          	<li style="margin-bottom: 5px; padding-left: 10px;"><span style="font-size:10px; color: #000; Font-family: Arial;">Liste 01.</span></li>
 	<li style="margin-bottom: 5px; padding-left: 10px;"><span style="font-size:10px; color: #000; Font-family: Arial;">Liste 02.</span></li>
 	<li style="margin-bottom: 5px; padding-left: 10px;"><span style="font-size:10px; color: #000; Font-family: Arial;">Liste 03.</span></li>
 
        </ul>
    </td>
  </tr>
</table>


Par contre, je n'en connais pas vraiment la raison, mais le Doctype est indispensable sinon ça ne fonctionne pas :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


A+
Sujet clos
Aller à