All geek questions in one place

CSS does not work for anchor tag in Outlook mail

CSS used for link in Outlook does not work

HTML:

<tr> <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;"><td style="background-color:#000;height:40px;width:475px;">Click Me</td></a> </tr>

it displays a link to the text "Click Me" not to everyone

Note. It should display a link to all td i.e. width: 475 and height: 40

Please help me

thanks

+4
source share
6 answers

You can use Outlook HTML to fix this.

 <div><!--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" stroke="f" fillcolor="#556270"> <w:anchorlock/> <center> <![endif]--> <a href="http://stackoverflow.com" style="background-color:#556270;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Show me the button!</a> <!--[if mso]> </center> </v:rect> <![endif]--></div>

Also link to http://buttons.cm/ for creating bulletproof email buttons :)

+6
source

Try

 <tr> <td style="background-color:#000;height:40px;width:475px;"> <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;">Click Me</a> </td> </tr>
+4
source

Do you mean that style should apply to all td?

Well, if so, what you did doesn't work, what you did is called the css inline style, which will only apply to this particular element.

if you want it to be applied to all td, then you will need to have the so-called css inner style:

 <html> <head> <style> td{ //your code here } </style> </head> <body> //your code here </body> </html>

and by the way, your code nesting is not correct,

u has an opening tag "a" and then an opening tag "td", then closes the tag "a" and then closes the tag "td" ...

You must either have it as:

<td><a></a></td> or <a><td></td></a>

to try:

 <tr> <td style="background-color:#000;height:40px;width:475px;"> <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;">Click Me</a> </td> </tr>
+1
source

The obvious problem is that your link should be in your table cell:

 <table> <tr> <td style="background-color:#000;"> <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;">Click Me</a> </td> </tr> </table>

I also checked the Microsoft manual for creating Outlook CSS and HTML support, because there are many errors: http://msdn.microsoft.com/en-us/library/office/aa338201(v=office.12).aspx . In general, avoid block elements and float in the direction of table layouts. Also, Outlook email only supports the CSS1 specification.

+1
source

I also had this problem, so I found this. Just use a border style with the same background color so your snap is snapped.

 <a href="http://www.google.com" style="background-color:#000;height:40px;width:475px; border:1px solid #000; color:#FFF;height:40px;width:475px;display:block;">Click Me</a>
0
source

As stated in the ProfileTwist comments, the hierarchy should be:

  • <tr><td><a href=link>text</a></td></tr>

I see that this is an old post, however, contrary to other answers, perhaps the intention was made to make the table white (FFF) and the text black (000).

0
source

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

More articles:


All Articles