All geek questions in one place

HTML email in 2013. How to control the spacing between elements such as paragraphs and images?

I have currently reworked some HTML email templates that I have not done for several years at this depth.

I created my template in an HTML file, which I test locally in a browser, and everything looks fine.

  • I use tables for layout
  • The only other tags I use are <p> <a> and <img>
  • CSS is in the <style> tag after the <body> tag is opened, but I convert it to inline styles before posting using the MailChimp CSS Inliner Tool . I just put it in a style tag so you can see CSS easier here. In any case, this has nothing to do with a large number of customers for testing purposes.

Now, when I send test emails from my PHP application, I try to get them to contact my email client (s), which looks just like my layout.

The main thing is that I notice that the margin / padding styles seem to be either ignored (e.g. Outlook 2007) or additional add-ons / fields are added in things like <td> , which makes everything softer than I said (e.g. Hotmail).

Example Source

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <body> <style type="text/css"> td {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444;} a {color:#056DA5;} p {margin:0; padding:6px 0 6px 0;} .tel {font-weight:bold; color:#056DA5;} #wrapper {padding:10px;} #signoff {padding:18px 0;} #signoff #questions {padding-bottom:18px;} #signature {padding-top:20px; border-top:1px solid #EEE;} #signature td {font-size:12px; color:#777;} #signature #logo {padding-bottom:12px;} #signature #contact p {padding:3px 0 3px 0;} #signature #contact a {text-decoration:none; font-size:13px; font-weight:bold; color:#C00;} #signature #contact .tel {padding-top:6px; color:#777;} #signature #social {padding:20px 0 20px 0;} #signature #social a {margin-right:8px;} #signature #address {font-size:11px; color:#999;} </style> <table id="wrapper" width="100%" bgcolor="#FFFFFF"> <tr> <td> <table> <!-- ROW 1 --> <tr> <td>[CONTENT]</td> </tr> <!-- ROW 2 --> <tr> <td id="signoff"> <p id="questions">If you have any questions, email us at <a href="mailto: support@example.com "> support@example.com </a> or call <span class="tel">01234567890</span>.</p> <p>Thanks,</p> <p>Company</p> </td> </tr> <!-- ROW 3 --> <tr> <td id="signature"> <table cellpadding="0" cellspacing="0"> <tr> <td id="logo" colspan="3"> <img src="http://www.example.com/images/email/logo.gif" alt="Company" /> </td> </tr> <tr> <td id="contact"> <p><a href="http://www.example.com">www.example.com</a></p> <p><a href="mailto: support@example.com "> support@example.com </a></p> <p class="tel">01234567890</p> </td> </tr> <tr> <td id="social"> <a href="https://www.facebook.com/"><img src="http://www.example.com/images/email/facebook.gif" alt="Facebook" /></a> <a href="https://twitter.com/"><img src="http://www.example.com/images/email/twitter.gif" alt="Twitter" /></a> </td> </tr> <tr> <td id="address">Company, address, city, post code</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

Try viewing the HTML in your browser and try emailing it to find out what I mean.

What am I doing wrong, and how can I send an email using the assigned CSS?

+4
source share
3 answers

Use CSS inline styles whenever possible (not the <style> tags on the page, but style="" ). Use HTML attributes ( bgcolor , width , height , etc.) whenever possible, instead of CSS styles, as there is wider and more consistent support. Define styles separately for each element - do not rely on inheritance or cascade.

By this I mean manually setting the width, height, indentation, margins, etc. using attribute or inline style on all td and tr etc.

Unfortunately, you will never achieve anything that is vaguely reminiscent of general consistency - I usually try to make it look good in Gmail, Mac Mail and Outlook, and this is the best you can really do. HTML emails still lag behind CSS support, and the extreme difference between the HTML rendering engines used by different email clients means that developing modern sites compatible with IE6 is literally less than a headache than writing a good one, template.

I always refer people to the "Optimized Client Compatibility Chart by Email" when this question was asked. They also have an excellent reference for encoding HTML emails .

+11
source

You have problems with spacing mainly because you use paragraph tags. You need to nullify the fields in the <p> tags. See this Email on Acid article

Personally, I never use <p> tags because they are less consistent than double <br> -ing.

Filling works on tables reasonably sequentially - it can be destroyed if someone forwards your email. The same thing happens with empty table cells if you do not put &nbsp; . I suggest always using empty cells with nbsp, unless that is structurally important.

In addition, another note about the declaration of your add-on, you will need to write the top / bottom / left / right separately and will not be able to put them together in one css padding:; declaration padding:; .

Also, your color declarations must be hexadecimal hexadecimal, and embed everything before sending.

+3
source

For emails, you need to use the built-in CSS super special CSS, as all email clients love to do their job when it comes to providing email. It can be more painful than, I dare say, to develop for IE! By the super special I mean, don't assume anything! Set everything explicitly.

0
source

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

More articles:


All Articles