All geek questions in one place

Gmail messed up my mail fonts

I am sending an email at php / html to gmail. The email appears in Outlook and other clients, but when I use the gmail web interface, the fonts do not display correctly. For example, 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 blue by default. In my line of the table, the color is displayed correctly, but the font size is larger (it looks like gmail changed it to the standard size)

THX!

+4
source share
4 answers

Here's an interesting and updated list of CSS features for the most popular web-based email readers. Check it out first, this is a good start.

On the other hand, consider that GMail is actually a web page, therefore it is obvious and assumes that external attributes will not be used. Consider finding a CSS based solution.

If you want to make sure attr is in the final source, use FireBug to see the latest HTML used in the web client. There is no better strategy because you are definitely looking at what the HTML browser gives to the browser.

Good luck

+3
source

You put your CSS for the links in the body tag, which Gmail will share because the body tag has already been created by the Gmail interface around your email. The only solution is to use inline CSS in the <a> tag, for example:

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

Unfortunately, you cannot create active and visited links using inline CSS.

+1
source

Currently, it seems that Gmail does not support CSS <style> tags or link/visited/active/hover CSS selectors.

However, you can try to model this behavior using JavaScript:

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

eg:.

 <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 the visited style, but when you reload the page, it will reset and you will need to save it (temporarily) - perhaps by replacing the onMouseOut event handler with the style.color event.

I have not tried this code in Gmail, I will leave it to you :)

+1
source

With the same problem. Instead of px, use the font size in pt , this worked for me.

0
source

Source: https://habr.com/ru/post/1340545/

More articles:


All Articles