CODEWITHSUNDEEP
htmlcssnewsletter
Azukah
Azukah

Reputation: 227

space between rows w/images in hotmail email newsletter

I'm doing a email newsletter using HTML and CSS only. it's all in tables no divs or copy or margins or padding. It works fine in gmail but when testing in hotmail, i get a space between rows. All my rows have images in their cells and most of them links to a site. i tried different css like display:block and collapsing but no luck... any ideas?

here's my code:

<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */

/* Reset Styles */
*, body {
    padding:0;
    margin:0;
    border:0;
    border:none;
    outline:none;
    font-size: 0px;
}
img, a img  {
    border:0;
    border:none;
    text-decoration: none;
    padding:0;
    margin:0;
    display:block;
}
table tr, table td, table th { border: 0; margin: 0; padding: 0; }
table, table td {
    border-collapse: collapse;
}
#backgroundTable {
    height: 100% !important;
    margin: 0;
    padding: 0;
    width: 100% !important;
}
p {
   margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
   color: black !important;
   line-height: 100% !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: blue !important;
}

h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
       color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
   }

h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
   color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
   table td {
   border-collapse:collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;} 

/* Template Styles */
body, #backgroundTable {
    background-color: #000000;
}

</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-HEADER.png" alt="Header" /></a></td>
  </tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-PROMO.png" alt="Content" /></a></td>
  </tr>

  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-NOTE.png" alt="Note" /></a></td>
  </tr>
    </table></td></tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600">
      <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="469"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-FOLLOW.png" alt="Follow Us" /></td>
       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="30"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-FACEBOOK.png" alt="Facebook" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="33"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-TWITTER.png" alt="Twitter" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="30"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-YOUTUBE.png" alt="YouTube" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="38"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-SPACE02.png"  alt="Follow Us" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-RIGHTS.png" alt="Copyright" /></td>
  </tr>
   </td>
  </tr> 
  </table>
  </td>
  </tr>
</table>
</center>
</body>
</html>

Upvotes: 0

Views: 2805

Answers (4)

Barnee
Barnee

Reputation: 3399

When I had similar problems I added to the td: 

valign="top" align="left"

and to the img:

style="border:none; vertical-align:top"

Here is an example:

<td valign="top" align="left"><a href="#"><img style="border:none; vertical-align:top" src="#" /></a></td>

I hope this helps.

Upvotes: 2

scrappedcola
scrappedcola

Reputation: 10572

You will have better luck writing inline css rather than placing it in a style tag. IE strips out the header and will add it's own elements during rendering. Code like it is 1990. A good way to test is to open up your email in Outlook and then "Save As" a web page and open in a browser. You can see exactly the havoc outlook has wrought.

msdn.microsoft.com/en-us/library/office/… the official word on how to use css with outlook (aka "how much MSFT hates web developers")

Upvotes: 1

Epik
Epik

Reputation: 3357

I have checked your code and there have been a few things i would like to flag for you that you should have a look at.

Property, Support/Unsupported clients

  1. width CSS property RISKY Outlook 07, Notes 6, Eudora
  2. background-color CSS property POOR Notes 6, Eudora
  3. margin CSS property RISKY AOL 9, Notes 6, Eudora, Live Mail, Hotmail
  4. padding CSS property POOR Notes 6, Eudora
  5. border CSS property POOR Notes 6, Eudora
  6. border-collapse CSS property RISKY Entourage 2004, Notes 6, Eudora
  7. height CSS property RISKY Outlook 07, Notes 6, Eudora, Old GMail
  8. display CSS property POOR Outlook 07, Eudora

I would suggest you remove all your embedded styles as some are not picked up in various browsers/email clients and place them inline. Inline styles work better and are more stable for cross browser use, and seems email templates are generally only used once or altered slightly for varying EDM's. This means that is is very safe to put al your styles inline:

e.g.

<div style="color:red; width:100px; border:1px solid green;"></div>

Hope this helps.

Upvotes: 2

rogchap
rogchap

Reputation: 983

scrappedcola is right... you need to use inline styles for an eDM.

Some helpful information on what is supported by different email clients are listed here: http://www.campaignmonitor.com/css/

You also may want to run a litmus test to make sure your email displays correctly for all major email clients: http://litmus.com/

Upvotes: 2

Related Questions