Why does Outlook render my content in my mailing incorrectly?
With updates 2007 and up, Outlook uses Microsoft Word as its rendering engine. What this means is that, as opposed to most email clients that utilize a web-based rendering engine, Outlook is subjected to the limitations of your basic Word document.
Below are some common rendering issues for HTML Editor:
Outlook will sometimes render alignments center or left as a default. However, if you set the alignment, it will happily align as intended. Here is a good article on alignments in Outlook: HERE
Borders do not go above 10 pixels when utilizing them. Outlook reads borders as being both outside and inside the table cell at the same time and gets terribly confused once your borders get up to 11 pixels wide. It will add weird spaces to your email, shrink your table and content.
Buttons - Only the text is clickable:
In some clients, the buttons are only clickable on the actual text, and not on the entire button. The table acts somewhat like a solid object that can be linked, but if there's nothing "physical" (text or image) for the link to grab hold of, it might otherwise ignore anything containing the "physical code". It basically sees anything within the button that is not text or image as 'empty space", and does not recognize the "empty space" within the button.
Cellpadding and Columns:
If your side by side column is rendering one side slightly taller or shorter than the other, chances are the top and bottom padding are different on one cell. Rather than just lengthening the cell with lesser padding, Outlook thinks that means you want white space there.
Curved buttons will not appear as curved in Outlook. It is added with a radius attribute that Outlook ignores.
Header and Paragraph Tags:
Outlook does not render the spaces that are part and parcel to header and paragraph tags consistently. Sometimes there’s the expected space, or there’s no space, or there’s sort of space, but it’s kind of choppy and doesn’t look intentional. This is why we use <br> tags and avoid H1-H3 when possible.
Image is cropped:
Outlook has issues with particularly tall images and will crop the top off any image taller than 1727 pixels tall. We recommend that clients split their huge images into multiple smaller ones and arrange them together in an HTML table to ensure all images in their entirety appear correctly.
Images do not populate after being downloaded:
If the images aren't appearing, it may be because the image dimensions aren't specified in the HTML. Below is a sample of HTML code, in red shows how to define the image sizes, which forces it to appear in Outlook.
<img src="http://content.qgemailsolutions.com/quad-mc-sports/11-20-Insert-Booster2.png" width="600" height="2381" usemap="#rade_img_map_1479405711590" border="0">
Line spacing may not render. For example, the line spacing applied to text in the cell style panel of 1.4 to 14px text, and when viewed in Microsoft Outlook that line spacing of 1.4 doesn't appear.
Outlook does not render the spaces that are part and parcel to header and paragraph tags consistently. Sometimes there’s the expected space, or there’s no space, or there’s sort of space, but it’s kind of choppy and doesn’t look intentional. This is why we use <br> tags and avoid H1-H3 when possible
If your content renders with a random white space in the middle of the mailing, it is because Outlook has deemed the email too long, and has inserted a page break. The only way to really get around that is for your email to be cut up in separate tables stacked on top of each other versus sitting in one large one.
Tool Tips / ALT Tags do not appear when hovering over an image:
Tool tips, also known as "ALT tags", do not appear on images when hovered over with your cursor, and instead the URL appears. So for example, the image is linked, and instead of the hovered text saying, "Look at this cute puppy!" it's just the URL that appears. Outlook will not show Alt Tags unless images are turned off, and even then they prioritize the URL so people know what they're clicking through to.
URL displaying in front of Sub-header:
Outlook displays the URL for the "View as a Web page" link above the sub-header.