Quite often have to make regular mailings with the news. Send text or simple HTML mailings layout is almost always not satisfied. Designers showing creativity, and we then fills bumps during the layout of their models with correct display in a variety of email clients.
Below is a list of the problems we encountered and their solutions.
- For not to be encoding issues you need to impose in UTF-8, in the HEAD to specify <meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>;
- Some mail portals cut out all the css, so it is necessary to impose using HTML3.2;
- Others make great margins for the elements to fix it have to wrap a mail by <div id=«mailsub»>;
- And others transforms indentation (\t) in the code into to fix it your code should not been formatted using tabs.
- In the text version can not use html entities, because it is a text version, and not HTML. Also, in the text version can not use unicode characters that are not in the windows-1251, as some mail server transcodes the body of the message in this encoding;
- Outlook 2007 at elements of type «div» makes the the field above. In the «table» with «cellpadding = 0 cellspacing = 0" is not such fields;
- Outlook 2007 does not use background images. We really found one hack - you can specify a background-image for the body. Then Outlook will display the background. But the hack does not work if we use the background-position or the background-repeat. In the web client that background will not be shown, so to duplicate his instructions - in the style at body for Outlook, and in the background at the "root" table for web clients;
- In the latest Pixar mailings we had to completely abandon the use of background images. because in this case there were problems with the positioning of images on top of the background and do the basic layout consists of a set of pictures inside the table. The text at the same time is also included in the pictures, links are arranged by areamap, but areamap can not be used because Gmail in these links can not be clicked. It is necessary to cut an image and store the table;
- In Gmail, if the image that is unique in the cell of the table, there is a 3px bottom padding, it can be eliminated by specifying style = «display: block» for this image;
When I mention the name of any host that mail then refers to his web interface