HTML e-mail signature is disaplayed differently by gmail
Question
I am using Thunderbird as my primary work mail client. I have just created a new HTML signature, which shows correctly in the Thunderbird, in Opera and in an online HTML Viewer but not on GMail. I would be very grateful if anyone could point me in the direction of what the problem is about. I have attached the .html signature file.
EDIT: I realized that I didn't specify the problem: when I inspect the elements in Opera on the GMail web inbox I see that the whole text is formated to Arial, 12.8 px while losing the different color on the first line (class = .name).
My CSS is very rusty so I suspect the error is on my side...
EDIT 2: code below as corrected by Tim Gerhard (thanks a lot!)
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal{font-family:"Arial"; font-size:9pt; line-height:1.25; color:#606060; font-weight:400}
.name{font-size:10.5pt; color:rgb(119,187,65); font-weight:700;}
.link{color:rgb(17,85,204)}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span></br>
Obchodní zástupce</br></br>
<a style="link"; href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</br>
<a style="link"; href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
</br></br>
IQ Budovy s.r.o.</br>
<a style="link"; href="[map link]">Mečířova 5, 612 00 Brno</a></br></br>
<img alt="IQ_Logo" src="[image address]">
<br><br><br>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2018-03-26 11:52:57
Edit:
You can use inline stylings to style your E-Mail as classnames aren't fully supported (as far as I', concerned). Use style="color:red" instead of classes. Inline should work with every Mail program.
Your html was full of errors which probably caused the issue.
I took the time to fix it and this is the (now correct) markup:
<html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <style type="text/css"> .normal { font-family: "Arial"; font-size: 9pt; line-height: 1.25; color: #606060; font-weight: 400; } .name { font-size: 10.5pt; color: rgb(119, 187, 65); font-weight: 700; } .link { color: rgb(17, 85, 204); } </style> </head> <body> <div class="normal"> <span class="name">Rostislav Janda</span><br/> Obchodní zástupce<br/> <br/> <a class="link" href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</a><br/> <a class="link" href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a> <br/> <br/> IQ Budovy sro<br/> <a class="link" href="[map link]">Mečířova 5, 612 00 Brno</a><br/> <br/> <img alt="IQ_Logo" src="[image address]"/> <br><br><br> </div> </body> </html>
What was wrong?:
- You use the
<br>tag wrong. It's<br/>and not</br> - One of your image tags was not closed properly
- One of your hyperlinks (
<a>) was not closed - You use style="" instead of class=""
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.