Phpmailer - CSS does not appear

Question

Phpmailer - CSS does not appear

Asked 9 years ago

Viewed 1,625 times

5

Hi, I’m trying to set up phpmailer to send a html message with css, but it’s not recognizing css.

What is wrong?

$mail->Body = '
        <style type="text/css">
            .corpo {margin: 15px;padding: 15px;background-color: #FFF;}
            .body {background-color: #E1E1E1;font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;font-size: 16px;}
        </style>

        <div class="body">
            <div class="corpo">
                <p><img src="http://...../images/logoEmpresa.png" width="90" height="50"></p>
                <p>O conteúdo da nova tag div é inserido aqui</p>
            </div>
        </div>

';

You have to put inside the tags <head></head>.

– Diego Souza

2015/06/25 at 19:31
@Diegosouza Even so, it doesn’t work.

– Tiago

2015/06/25 at 19:35
Now the email is showing all the html

– Tiago

2015/06/25 at 19:37
How’s your email header ? text/html ?

– Diego Souza

2015/06/25 at 19:41
php or html header?

– Tiago

2015/06/25 at 19:42
To php this way header ('Content-type: text/html; charset=UTF-8'); html is as in the above code

– Tiago

2015/06/25 at 19:45
And by chance your Webmail or e-mail program is configured to read emails format HTML, Rich Text or Text ?

– Diego Souza

2015/06/25 at 19:50
I’m testing localhost for gmail.

– Tiago

2015/06/25 at 19:50
In Phpmailer you can configure the e-mail header. Put this too: $mail->CharSet = "text/html; charset=UTF-8;".

– Diego Souza

2015/06/25 at 19:51
I couldn’t do it either....

– Tiago

2015/06/25 at 19:54
You set up the right email ? You have to have Body. <html><head><style type="text/css">
 .corpo {margin: 15px;padding: 15px;background-color: #FFF;}
 .body {background-color: #E1E1E1;font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;font-size: 16px;}
 </style></head><body> <div class="body">
 <div class="corpo">
 <p><img src="http://...../images/logoEmpresa.png" width="90" height="50"></p>
 <p>O conteúdo da nova tag div é inserido aqui</p>
 </div>
 </div></body></html>

– Diego Souza

2015/06/25 at 19:56
I’m not sure about...

– Tiago

2015/06/25 at 20:04
Cara u enabled the right HTML?

– Hiago Souza

2015/06/25 at 20:05
Like, does phpmailer work? How is HTML when you receive the email?

– Hiago Souza

2015/06/25 at 20:06
html works like <H1>, but CSS that doesn’t work.

– Tiago

2015/06/25 at 20:15

Show 10 more comments

2 answers

1

Just like @Fernando said

I will leave my solution in collaboration, in case others have the same doubt:

<body style="margin:0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="50" style="background-color:#BCBCBC; margin:0px;"><tbody><tr><td height="331" valign="top">

    <table width="90%" border="0" align="center" cellpadding="50" style="background-color:#FFFFFF;"><tbody><tr><td>
          Aqui vai seu texto
    </td></tr></tbody></table>

</td></tr></tbody></table>

Final result:

inserir a descrição da imagem aqui

Now just work your message according to your need.

Browser other questions tagged php css html5 phpmailer

You are not signed in. Login or sign up in order to post.

by Fernando Leal • **9,770** points · Answer 1 · 2015-06-25T20:34:09+00:00

Well your problem has no relation any problem with PHP or with Phpmailer, but rather that, style CSS does not work for all email providers.

In your case the destination is gmail and this removes all <head>, <style> of your email.

So the only solution to create CSS-styled email that works with the vast majority of email providers is to go to CSS inline, there are even some tools for this (converts CSS style into inline CSS), such as CSS Inliner Tool, Inliner, Inline Styler.

This source quotes beyond the CSS inline, other techniques for your email to be properly interpreted by most providers. How:

Keep your code simple: Coding for HTML e-mail is different from coding for website. The simpler the code, the less room for errors.
Use CSS only for general style elements: You’ll get the best results if you use CSS for general elements such as fonts or colors.
Use inline CSS (in-line): Browser-based email applications, like Gmail, take tags <head> and <body> by default.

Another tip, which is not in the source cited, create the layout of your email within tables (<table>), do not save tables, create tables within table cells, forget Tableless, at the time of creating emails. Some providers (Outlook Desktop and Outlook Webmail) love not respecting the styles of their beautiful layout with Divs. (I recently had to refactor a complete layout for tables =().