28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS dans mail

Bonjour à tous,

j'ai un problème de CSS dans les mails que j'envoie en PHP, il n'est pas pris en compte (notamment les balises <p> ce qui fait que mon texte est collé, tout à la suite). Ce qui est étrange c'est que le float: right et le </br> sont pris en compte. Quelqu'un sait-il pourquoi?

Merci et bonne journée


$message_html = "<html>
<head>
<style>
#logo
{
	border-radius: 5px;
}

#hibou
{
float:right;
}

#twitter
{
margin-left: 20px;
}


section
{
text-align:justify;	
margin-top: 20px;
border: 2px solid #22427c;
border-radius: 10px;
padding: 10px;
}


#liensite
{
border-radius: 3px;
background-color: #22427c;
color: white;
text-decoration: none;
padding: 3px;	
}

</style>
</head>
<body>
<header>
<img id='logo' src='data:image/png;/code des images que j'ai coupé car très long>
<img id='hibou' src='data:image/png /code des images que j'ai coupé car très long/>
</header>

<section>
Bonjour,

<p>blabalbalblablablablablabla</p>

</br>Merci et bonne journée, 

</section>

<footer>
</br>
<a href='http://www.facebook.fr'><img id='facebook' src='data:image/png</a>
<a href='http://www.twitter.fr'><img id='twitter' src='data:image/png;</a>

</footer>
</body></html>";
Ça dépend beaucoup des logiciels de messagerie. GMail en particulier semble avoir des difficultés à interpréter du "vrai HTML".
Dans ce genre de situation je suis revenu au style le HTML des années 2000, pas de CSS en dehors de style="..." dans les balises.
@bibi67 merci mais ça ne change rien, @papyjp j'aimerais juste faire en sorte que le texte soit plus aéré, pas tout en tas, actuellement voici ce que cela donne.

Quelqu'un aurait-il une suggestion? Merci!
upload/57560-mailcss.png
maud01 a écrit :
@bibi67 merci mais ça ne change rien, @papyjp j'aimerais juste faire en sorte que le texte soit plus aéré, pas tout en tas, actuellement voici ce que cela donne.

Quelqu'un aurait-il une suggestion? Merci!
upload/57560-mailcss.png

Comme je l'ai dit dans mon message précédent tu peux mettre du CSS dans les balises: 

<p style="margin:10px 0;">......</p>

devrait marcher.
Mais plutôt mettre un margin-bottom dans la balise qui précède le texte et un margin-top dans le footer
Il faut penser que ces produits utilisent de vieilles versions de navigateurs HTML pour interpréter les parties HTML des messages.
Méfie toi des nouvelles balises HTML5, il n'est pas sûr que tous les outils de messagerie les comprennent. Je me cantonne au style HTML des années 2000, Ca semble éviter les problèmes.
Modifié par PapyJP (26 May 2015 - 08:34)
Sujet clos
Aller à