CODEWITHSUNDEEP
htmlcssemailgmail
user_78361084
user_78361084

Reputation: 3908

Gmail messes up my email fonts

I am sending an email via php/html to a gmail address. The email displays fine in outlook & other clients but when I use the web interface of gmail, the fonts don't display correctly. For instance, I have this:

<html><body link="#00CCFF" vlink="#000000" alink="#000000">
<table width="100%">
<tr align="left" style="color:#000000"; height="25px"><td>Col0</td><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
<tr align="left" style="color:#00CCFF; font-size:9px;"><td><a href="http://www.example.com">click</a></td><td colspan="4">row1</td></tr>
<tr align="left" style="color:#00CCFF; font-size:9px;"><td><a href="http://www.example.com">click</a></td><td colspan="4">row2</td></tr>
</table>
</body></html>

Gmail changes the color of my hyperlinks to their default blue. In my table row, the color displays correctly but the font size is bigger (looks like gmail changed it to a standard size)

thx!

Upvotes: 4

Views: 8454

Answers (4)

Alon Brontman
Alon Brontman

Reputation: 61

At present, it seems that Gmail doesn't support <style> tags or link/visited/active/hover CSS link-state selectors.

However, you can try to simulate this behavior with JavaScript:

  • simulate a:link with the onMouseOut event in combination with style="color:#XXX;".
  • simulate a:hover with the onMouseOver event.
  • simulate a:active with the onMouseDown event.

e.g.:

<a href="http://www.example.com"
   style="color:#00CCFF;" onMouseOut="this.style.color='#00CCFF'"
   onMouseOver="this.style.color='#FFFF00'"
   onMouseDown="this.style.color='#FF0000'">click</a>

You can probably use the click event to set a "visited" style, but it'll reset when the page reloads, and you'll need to persist it (temporarily) - possibly by replacing the onMouseOut event handler's style.color value.

I haven't tried this code in Gmail, I'll leave that to you :)

Upvotes: 1

Mike
Mike

Reputation: 11

You've put your CSS for the links in the body tag, which Gmail will strip because the body tag is already created by the Gmail interface around your email. Your only solution is to use inline CSS in the <a> tag, like this:

<a href="#" style="color: #123456;">text</a>

Unfortunately, you cannot style active and visited links via inline CSS.

Upvotes: 1

Vasco
Vasco

Reputation: 259

Having the same problem. Instead of px use the font-size in pt, it worked for me.

Upvotes: 0

Gonzalo Larralde
Gonzalo Larralde

Reputation: 3541

Here's an interesting and updated list of CSS capabilities of the most popular web/desk based email readers. Check it out first, it's a good start.

On the other hand, consider that GMail is actually a web page, so it's obvious and expected that body attrs will not be used. Consider looking for a CSS based solution.

If you want to make sure that the attr is into the final source, use FireBug to see the final HTML used in the web client. There's not any better strategy, because you're watching exactly what the HTML filter gives to the browser.

Good luck!

Upvotes: 3

Related Questions