Let’s gather our knowledge

1. Outlook ignores margin and padding on images.

Outlook 2007-13 do not support the margin or padding CSS properties when placed within an image.

Try using hspace and/or vspace:

<img src="http://www.emailonacid.com/example.jpg" align="left" vspace="10" hspace="10" />

Or add the additional spacing to the image itself (in pixels).

2. Text doesn’t wrap automatically in Outlook.

If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style:

<td style="word-break:break-all;">

3. Outlook adds a 1px border to tablecells.

If you are using a background color in your table cell, you’ll see a 1px white border around the contents of the TD. To fix, simply add the following to your embedded styles:

table td { border-collapse: collapse; }	
Or you can add it inline:
<td style="border-collapse: collapse;">... </td>  

4. Outlook sometimes ignores link styling.

Outlook 2007 and 2010 do NOT support inline styes IF the “a” tag does NOT include an “href” attribute.

For example:

<a style="font-size: 20px; color: #004990;">Shop Flooring </a>
Should be changed to:
<a href="http://www.test.com" style="font-size: 20px; color: #004990;">Shop Flooring </a> 

5. If spacing is important, avoid using lists.

The safest way to get consistent results is to use a table instead:

<table cellpadding="2" cellspacing="2" border="0"> 
    <tr>
        <td valign="top">•</td>
        <td>Test</td>
    </tr>
    <tr>
        <td valign="top">1.</td>
        <td>Test</td>
    </tr>
</table> 

6. Use cellpadding and cellspacing with tables.

Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.

If you are using an align attribute on your table, for example:

<table align="left"> 

7. Outlook sometimes removes padding.

Outlook 07 and 2010 have been known to convert divs and headings to paragraphs with nested spans. This changes the HTML container from a box element to an inline element.

For example this:

<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
   NEW FASHIONS
</h2>
Will get converted to:
<p class=MsoNormal style='mso-outline-level:3'>
   <b>
     <span style='font-size:11.5pt'>NEW FASHIONS<o:p></o:p></span>
   </b>
</p> 

8. Use MSO to control line height.

Try adding “mso-line-height-rule:exactly” just before your line-height declaration.

For example:

<td style="mso-line-height-rule:exactly; line-height:50px;">
This fix ONLY works on block elements. So trying to achieve the same effect inside a font or span tag will not work. Since this is a Microsoft only CSS property, it should not interfere with any other email client.

9. Outlook interprets tables literally.

Be sure your rowspan attributes within your TDs are set to the correct value. Most web browsers are very lenient if you have a higher value than required but Outlook 07 and 2010 will interpret them even if the additional rows do not exist in your table.

10. Outlook sometimes ignores the width and height of HTML elements.

Box elements with a fixed width and height may not display correctly. If horizontal and vertical spacing is determined by spacer graphics (as opposed to the email’s content), be aware that customized spacing and alignment may be impossible in some cases. For best results, try using a combination of transparent spacer images and the HTML height attribute on the table cell.

11. Outlook sets TDs at a minimum of 2 pixels high.

Outlook 2007 and 2010 impose a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your ‘horizontal line’ will appear thicker than expected.

12. Image backgrounds in Outlook require VML.

In some versions of Outlook (07/10/13) image backgrounds won’t work without using Vector Markup Language (VML). VML is a deprecated, XML-based file format for two-dimensional vector graphics which is part of the Office Open XML standards. This is a complicated problem to fix, so check out this blog about how to use VML to create functional image backgrounds.

You can also try Stig’s Bulletproof Email Background Images tool (http://emailbg.net/) which does a lot of the work for you.

13. Outlook converts some divs to paragraphs.

Outlook often converts your DIVS to paragraphs. To date, we have not been able to detect a rhyme or reason for why it converts DIVs when it does, if you know, please feel free to share it with us below.

14. Outlook uses the Word rendering engine.

Within its viewer, Outlook 2007 uses “text boundaries” which differ slightly from “page breaks.” Text boundaries are used to separate elements within the web layout for purposes of printing and don’t actually output any HTML code.

From our research, we learned that text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before it automatically inserts a partition line and creates a new text boundary. Therefore, If you have any tables that are higher than 23.7 inches within your email, it will get broken up into multiple, stacked text boundaries.

15. Tall images will be cropped in Outlook.

Outlook truncates the upper portion of all images higher than 1728px from the top-down. So, if your image is 250px longer than the 1728px limit, 250px will get cropped off the top.

We’ve also seen Outlook re-scale an image so that it’s max height is 1728px.

We suggest that you crop your images and stack them on top of each other.

16. Images with dimensions defined in HTML may render incorrectly.

Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should have their correct dimensions in the file properties. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout.

17. Animated GIFs aren’t supported by Outlook.

Outlook does not support animated GIFs, instead it only shows the first slide of your animation so make sure the most important call to action is on that slide.

 

Copyright from: http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13

I’m having a strange issue with Yahoo, where my email is not centered and goes way to the left.

yahoo-mail-template-not-center-position

 

 

 

 

 

 

Where other Mail services is doing good with centered position as my expectation.

However, Finally I have worked out a neat little fix to ensure the email is centered okay. To set up that, I add the following style to the main “table 100% width & height, align – center, table-layout: fixed”  that able wraps around my content:

<table height="100%" width="100%" cellpadding="0" cellspacing="0" 
border="0" align="center" style="table-layout:fixed;">


yahoo-mail-template-center-position

 

 

 

 

 

 

 

Thanks! for reading. Good Day :)

There are a few ways to remove that space, thous are as following:

Solution 1: No Space Between Elements

The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
Of course this is a mess to maintain but it's practical, logical, and most importantly...reliable.

Solution 2:  font-size: 0 on Parent

The best white-space solution is to set a font-size of 0 on the parent to the inline block elements.  So if you had a <UL> with inline-block <LI>’s, you’d do this:

.inline-block-list { /* ul or ol with this class */
	font-size: 0;
}

.inline-block-list li {
	font-size: 14px; /* put the font-size back */
}

To counteract the parent font-size setting, you must set a font-size for the list items, but that’s usually fairly simple.   The only time it wouldn’t be simple is if you’re in a wicked cascade of relative units you can’t easily calculate.  In most cases, however, this will be exactly what you need. Update: unless you care to support Android WebKit.

Solution 3:  HTML Comments

This solution is a bit gangsta but also works.  Using HTML comments as spacers between the elements works just as placing no space between elements would:

<ul>
   <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

In a word…gross.  In two words…really gross.  In three words…well, you get it.  But it works!

Solution 4:  Negative Margin

Much like solution two, this is regrettable.  You can take advantage of inline-block’s flexibility to use a negative margin to negate the space:

.inline-block-list li {
	margin-left: -4px;
}

This is the worst solution because you have to account for variable, sometimes unpredictable spacing.  Avoid at all costs.

Solution 5:  Dropping Closing Angle

Another HTML-based hack solution is to simply place the closing > next to the start of the next tag:

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Not as ugly as the HTML comment hack but I know I’d probably remove that whitespace and not think about why it was there originally.

good day :)

Source: http://davidwalsh.name/remove-whitespace-inline-block

Instead of using the IE-based HTML rendering engine, Outlook 2007/2010 use the MS Word HTML rendering engine.

Following things won’t work in Outlook 2007/2010:

  1. No background images in DIV tags and TABLE cells.
  2. No nested background colors. A background color in a DIV or TABLE cell displays fine. However, if you nest another TABLE or DIV within the element, the background color vanishes.
  3. No FLOAT or POSITION attribute in DIV tags. In other words, CSS-based layouts won’t work in Outlook 2007. (As far as possible, avoid DIV tags in your html; use TABLE instead)
  4. No animated .gif files or Flash content. Animated .gif files just won’t animate. With Flash, you’ll just get a big red X.
  5. Text alignment will be justified to the left
  6. Text will have double spacing
  7. Forms will not work in the emails sent to Outlook 2007 and Outlook 2010
    Email clients consider email forms to be a security risk. While some email clients simply warn you of potential danger, others like Outlook 2007 outright disable the forms. Given the sporadic support for forms in emails, we recommend linking to a form on a website rather than embedding it in the email.

    Copy right from (http://www.benchmarkemail.com/help-FAQ/answer/what-are-common-issue-with-outlook-2007) :)

Following are some points that should think to use image in Email Template

Avoid background images
Outlook will not recognize background images. Instead, use a background color, and use images in other ways in your email.

Use absolute image paths
If you upload an image to an individual email using the HubSpot image library, this automatically happens for you. If including an image in an email template, host the image on your website. You could upload the image to your HubSpot file manager. Then make your image paths point to the full URL, such as: http://www.yoursite.com/yourimage.jpg.

Declare image width and height
This will ensure that your email design will maintain its structure when images are turned off by email clients.

Use ALT text
Some email clients block images by default, so each image should have compelling ALT text that is compelling.

using-images-in-emails

 

 

 

 

Optimize image size
Make your image file sizes as small as possible without losing their visual integrity. This will prevent long email load times.

Avoid using PNG images 
Lotus Notes does not support PNG image formats. Use a format such as JPG or GIF instead.

Avoid using image maps
Hotmail will not recognize image maps.

Use Gmail and Hotmail glitch fix 
When using multiple images, this insline CSS property eliminates a white gap in between adjacent images.

<img src="http://www.yoursite.com/yourimage" width:"10px" height: "10px" style="display:block">


 copy right from (http://help.hubspot.com/articles/Best_Practice/email-templates-design-code:)

The best practices of designing and coding email templates. Following are the basic tips and tricks:

Keep it simple

Email campaigns should focus more on message, not the look and feel of email.  Just like it is with website, content will always be king. Though Email design is not always easy, but if you stick with a basic table layout and pretend that you’re designing an older web page, you should have a much greater degree of success. Try to maintain a higher text-to-image ratio, because email programs look for that and you don’t want your email to end up in spam due to too many images. They also look at the overall HTML character count, so try to limit the template to a few articles, and don’t throw in a bunch of span tags or spaces that just add unnecessary characters.

Use in-line styles

In-line styling is a must when it comes to designing HTML emails. Of course, adding external CSS is way more efficient and time-saving, but since there’s such limited support for that in the different email programs, styling your elements in-line is the best way ensure that your intended design will display correctly. If you want to see what types of CSS are currently supported in the popular email programs, take a look at the Email Standards Project website, as they have a comprehensive list of which CSS (Cascading Style Sheets) properties work reliably and which ones don’t. Bottom-line though – code your emails like you would an old webpage from the ’90s. This means using basic HTML tags and in-line styling.

7a675edf-b139-42bd-9688-a1f359abaa2b
 

 

 

Keep email width under 650 pixels

This ensures that users of email clients such as Outlook can view your email in their vertical preview pane. Hubspot’s default email templates are already within this max width, so feel free to duplicate one of those templates as a starting point.

Abide by CAN-SPAM rules
You must include an unsubscribe option in every email, as well as your company name and address. In HubSpot, you cannot save an email template unless it includes this element.

Use code-friendly software
When editng your template code, use software like Sublime Text 2, Dreamweaver, or Notepad, or even HubSpot’s email template creator. Word and other WYSIWYG editors typically add extra code that will cause your email to display poorly in certain email clients.

Design with tables
While it’s no longer best practices to design web pages with tables, they’re essential when designing emails. It’s the only way to have your design render correctly across multiple email clients.

Avoid complex colspans and rowspans
These will make revisions a nightmare as you try to reuse templates. Use these very sparingly, and never together on the same table unless you know that the content itself will be consistent in future emails.

Avoid body attributes
Some email clients ignore body attributes. If, for example, you want to make your email background blue, use a 100% width table with a blue background and next your content in the table.

Avoid CSS shorthand

  • An example of CSS shorthand: <p style=”font: italic 14px Verdana; color: #000”></p>

  • An example of correct CSS:  <p style=”font-style: italic; font-size: 14px; font-family: Verdana; color: #000000”></p>

Avoid external or internal CSS classes or IDs
Anything that starts with <style> will have mixed results across email clients. Instead, use inline CSS.

Avoid Javascript or other dynamic scripts
Even if a SPAM filter allows your email through, most email clients will not allow these scripts to function.

Avoid Flash or video embeds
The ability to view rich media in email is turned off by default in most email clients. Instead, include an image of your video player (with a play button) that links to the rich media on a website page.

Use plain text-style bullet points
In addition to images, another element that tends to break in HTML email renderings are HTML-style bullets. To avoid the recipient seeing invisible or wonky bullets, use a plain text alternative such as asterisks (*) or dashes (—) that are more likely to show up no matter what.

Use Hotmail glitch fix
If you want to center an email on a solid colored background, Hotmail will not render this properly unless you include the following code:

.ReadMsgBody {width: 100%}
.ExternalClass {width: 100%}

 copy right from (http://help.hubspot.com/articles/Best_Practice/email-templates-design-code) :)

5 tips for writing better CSS

True, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.

In this article I want to talk about 10 different tips you can write proper and clean css code as well as to start improving yours, as quickly and efficiently as possible.

1. Start with a CSS Reset

Seriously, always use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, or my reset css ;) just use something. It can be as simple as removing the margin and padding from all elements:

* { margin: 0; padding: 0; } 
html, body, div, span, p, form, label, fieldset, legend, table, caption, tbody, tfoot, thead, tr, th, td h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, a, applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, strong, em, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
text-align: left;
vertical-align: baseline;
font:Tahoma, Times, serif;
}
body {line-height:1.5;}
ol, ul {list-style: none;}

2. Comments your CSS block

You should keeping organize your stylesheet clean and easy to read, comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code. For example, this is how I structure my stylesheets:


/*****Reset*****/  
Remove margin and padding from elements  
  
/*****Basic Elements*****/  
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.  
  
/*****Generic Classes*****/  
Define styles for simple things like floating to the sides, removing a bottombottom margin on elements, etc  
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently   
  
/*****Basic Layout*****/  
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site  
  
/*****Header*****/  
Define all elements in the header  
  
/*****Content*****/  
Define all elements in the content area  
  
/*****Footer*****/  
Define all elements in the footer  
  
/*****Etc*****/  
Continue to define the other sections one by one  

3. Use Useful Naming Conventions

Name your elements based on what they are, not what they look like. For example, .xyzPart is much less versatile than .commentPart, and .postContent is more limiting than .header.

4.Stay consistant

Whatever way you decide to code, stick with it. I am sick and tired of the whole 1 line vs. multiple lines for your CSS debate. There is no debate! Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet. Personally, I use a combination of both. If a selector is going to have more than 3 properties, I break it to multiple lines:

div.header { float: left; width: 100%; }  
div.header div.column { border-right: 1px solid #ccc; float: rightright; margin-right: 50px; padding: 10px; width: 300px; }  
div.header h1 { float: left; position: relative; width: 250px; } 

It works for me because 3 properties is about what fits on 1 line in my text editor before wrapping to another line. So just figure out what works for you and be consistent.

5. Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.
This:

h1, h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

much moreefficient than this

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

You should also make use of shortcuts whenever possible. Always be on the lookout for opportunities to group elements and use declaration shortcuts.
You can accomplish all of this:

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

with only this

h1{
margin: 10px 30px 15px 15px; 
font: bold 12px Arial;
} 

It’s very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. A big clockwise circle, starting at noon.

Follow

Get every new post delivered to your Inbox.