Layout letters. Bugs again

Image by Eva Galesloot

Hello!

First of all, I want to apologize to the address mail.ru and personally Andrew Sumin AndrewSumin for the post written in the heat of the moment. The problem with the layout of letters has become pretty painful, but in some places it’s not as bad as it seemed. There are problems.
')
Regarding mail.ru at the moment almost no complaints. Laying out letters for this webmord is as pleasant as for guglopochty. It is very nice to see that Russian webminds began to support background images.

Do you know what really lacks? Fichlista from developers of mail clients and webmord. It would be very cool to learn first-hand what features were put into circulation, and which, on the contrary, were cut. This would ease the designer's headache, and the user would stop receiving crooked letters. Yes, this is very important information.

Below are some new bugs that should be taken into account when preparing letters, and developers - to close them.

Mail.ru

As I said, these guys are great, except for one small BUT. If we specify a phone number in the letter (just text), this same number is transformed into a pseudo link, blue, when clicked, we will make a call via mail.ru web agent.

<span class="js-phone-number highlight-phone" title="  -">+7(952)123 45 67</span> 

Everything would be fine, but how to stylize it is a big question. Header styles don't help here.

Yandex Mail

There are many more disorders. In order:

1. Table frames

 <table width="400" cellpadding="0" cellspacing="0" style="border-collpase:collapse;"> <tr> <td width="50%" style="border-bottom:#999999 1px dashed;"></td> <td width="50%"></td> </tr> </table> 

What do we expect to see? It's simple. The left cell of the table should have a dashed lower bound. What do we actually get? The left cell gets a solid border, and the right one - dashed. Why? It is not clear.

2. line-height

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important;" href="#"></a></td> </tr> </table> 

All mailers except the mailbox will send the button as intended. In the case of our hero, the line-height will be significantly overestimated. The fact is that the default line-height in the mail is initially set to large:

 .b-message-body { line-height: 1.4; } 

, than it is accepted in browsers (1.2em). But here it is not so simple.

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important; line-height:1.2em;" href="#"></a></td> </tr> </table> 

Does not solve the problem. And so it works:

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td style="line-height:1.2em;"><a style="color:white !important;" href="#"></a></td> </tr> </table> 

3. cellspacing
It's all more interesting. Previously, this attribute in the mail worked crookedly. The table just fell apart. The developers did very interesting :) They just turned it off like this:

 .b-message-body__content TABLE { border-collapse: collapse; } 

This is very cool, but the decision is bad. If we do not need the indents between the cells, we can simply specify cellspacing = "0" and everything will be fine. But it was not there. The guys from Microsoft as always special. For desktop outlook, it is necessary to collapse the table in order to avoid a single-pixel gap between the table cells. Therefore, I have a convincing request to the developers of e-mail: "Please correct this misunderstanding." I will be glad if this post is noticed by Roman Komarov kizu , because I was unable to contact him on these issues.

Little nothings of life

Here the request to the above developers: Could you introduce support for headers styles, at least for links? With pseudo-classes:: link,: hover,: visited. The fact is that the links in the letter look dead. It would be great to change the color of the link when hovering over it, or to remove text-decoration;

And one more detail. How about the css max-width property? Mainly because of his absence, most often you have to write media_queries.

Thank you, I have everything.