Hotmail and Outlook.com Drop Support for Margin. You may have noticed your emails looking a little cramped in Hotmail and Outlook.com recently.
The culprit? Discontinuation of support for the margin property in these email clients. Rather than honoring your carefully spaced paragraphs and images, Hotmail and Outlook.com are now completely stripping margin from paragraph tags, leaving default values (0 for the top, right and left; 1.35em for the bottom, to be exact) in their place. That’s right: Hotmail and Outlook.com no longer support the following CSS properties: marginmargin-topmargin-rightmargin-bottommargin-left Since Hotmail and Outlook.com previously had support for margin-right, margin-bottom and margin-left, it’s anyone’s guess as to why they decided to kill support for margin entirely.
Personally, I’ve never been a fan of using paragraph tags or margin in email. Brock was a champion: he tested all sorts of combinations, slipping <span> tags inside his paragraphs, fiddling with <div>, and swapping margin for padding. A Guide to Rendering Differences in Microsoft Outlook Clients. Microsoft has a long and complicated history with the email world.
From founding the first free webmail service to building several variations of desktop mail programs, the tech giant’s influence on both business and consumer email messaging is vast. Over the years, Microsoft has expanded the “Outlook” brand to encompass nearly every email project it touches, leaving email industry pros puzzling over seemingly dozens of products using similar naming conventions—not to mention their associated rendering and support quirks. Consistent use of the “Outlook” brand name has given Microsoft a ton of exposure (of both the positive and not-so-positive variety); conversely, it’s also caused a lot of confusion.
Outlook 2003, Outlook 2007, Outlook 2010, Outlook for Mac and Outlook.com are just a handful of the Outlook products available to businesses and consumers. Oddly enough, all of these “Outlooks” do not render the same (that would be too easy!). Outlook.com and Background Images. Posted in CSS Help, Interactive Email by Justin On January 28, 2014 A well placed background image can make all the difference in an email.
If you have an image that you’d like to use as the background, use a table cell background to get it to work in Outlook.com (Hotmail).This is effective because Outlook.com strips background-image styles. For example Outlook.com will strip the background-image from this div element. <div style="width:300px; height:200px; background-image:url( Content </div> However if the background is set using the background attribute, Outlook.com will leave it as is, for example: <table border=0 cellpadding=0 cellspacing=0><tr><td width="300" height="200" background=" Content </td></tr></table> Client Support.
17 Must-Know Tricks for Outlook 2007, 2010 and 2013. Designing for Outlook is like chasing the ever elusive White Whale.
We spend hours pursuing it, tracking down bugs and glitches, trying to achieve pixel perfection in a distinctly imperfect environment. Here are 17 tips to improve your outlook on Outlook. 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: Or add the additional spacing to the image itself (in pixels). 2. If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style: In the example below, #3 does not have word break and #4 does. Outlook 2013 doesn't respect height in empty table cells - Campaign Monitor. If you're already testing your email newsletters in Outlook 2013 Preview, then you may have noticed a little more whitespace than expected.
While Outlook 2013 may have much in common with its predecessors, Outlook 2010 and 2007, the differences are starting to appear. In this case, empty table cells (or cells containing a & nbsp;) now have a minimum height of roughly 15px, regardless of what you've set a cell's height attribute to be. This can be particularly irritating if you've used empty table cells to create margins/padding between paragraphs of text and around images (for clients that do not support these CSS properties), or when creating 'bulletproof' horizontal rules.
However, there is a rather strange solution. For example, say you have an empty cell with height="1" like this: Unfortunately, Outlook 2013 will give this cell a height of 15px or so by default, unless you add... Yes, adding a font size to your inline CSS styles fixes this bug.