Share/Save/Bookmark

Forum

Got questions? We’ve got answers...

     
Outlook.com additinal spacing issue
Posted: 14 July 2013 05:15 AM   [ Ignore ]  
Newbie
Rank
Total Posts:  5
Joined  2011-07-15

Hi, I’m creating a set of email templates that need to be as consistent as possible across the various email browsers. However, I’m running into a problem with Outlook.com as it is adding additional spacing to every section of text.

I’ve read all the various solutions to this on here and the searched the web, but none of the solutions have made any difference except changing the p tags to span tags - but this then messed up the text in various other browsers. So I need another solution.

The p tags have margin-bottom: 3px in them which I know Outlook.com ignores, but I’ve tested it without the margin-bottom: 3px style and it still adds the space. So I’m convinced it’s an issue in the p tag, with outlook.com adding it’s own default styling to it?

So below is the code for a small sidebox from the template, and I’ve included the full head styles that I’m using.

I hope someone can help?

Cheers

David

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html >
<
head>
    <
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <
title>Mention Newsletter</title>
    <
style type="text/CSS">
    @
media screen { 
    
/*font import stuff*/
    
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
    
}
    
/**This is to overwrite Outlook.com’s Embedded CSS************/
    
table {border-collapse:separate;}
    
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass {line-height100%}  
    
.ExternalClass {width:100%;
    
/*The .yshortcuts {color: #F00;} is for Yahoo Classic and Yahoo New. Set this to be the color you prefer for your links.*/
    
.yshortcuts {color#009ee3;} 
    
p {margin:0padding:0margin-bottom:0;/*optional*/
    
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#003399 !important; font-family: 'Open Sans', trebuchet ms, sans-serif;} /*This is for Outlook 2007, 2010 and Hotmail*/
    
aa:linka:visited {color:#009ee3;} /*optional*/
    /*The iPhone and iPad auto scales small fonts up to 12px, and Android phones scale the fonts as well. This bit of code makes text display as intended.*/ 
    
divpalitd, * -webkit-text-size-adjust:none}
    body {margin
:0;padding:0;background-color#222222;}
    
</style>
</
head>

<
body>
    <
table width="180" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF">
        <
tr valign="top">
            <
td style="padding-top: 10px; padding-right: 0;padding-bottom: 10px;padding-left: 0;border: 1px solid #DDDDDD;">
                <
table width="150" border="0" cellspacing="0" cellpadding="0" align="center">
                    <
tr>
                        <
td valign="top" style="padding-top: 0; padding-right: 0;padding-bottom: 5px;padding-left: 0;">
                            <
h2 style="font-size: 22px; font-family: 'Open Sans', trebuchet ms, sans-serif; font-weight: 600; margin-top:0; margin-right:0; margin-bottom: 3px; margin-left:0; padding:0; color: #003399;text-align: left;"><span style="color: #003399;">Estiusc iditat</span></h2>

                            <
p style="font-size: 11px; font-family: 'Open Sans', sans-serif; line-height: 18px; margin-top:0; margin-right:0; margin-bottom: 3px; margin-left:0; color: #444444;text-align: left;"><img src="#" alt="picture" width="83" height="82" align="left" style="display:inline;" />Giae nonsect aeperepti dionse nihillat aut ipsamofficimite eatemolupta am audistion core volori vellore prestorpos eturLigenturtem de etuntsit lamsimenimo eventi rent quos dolorep erspelibus es evellaut labore aliquae et. <a target="_blank" href="#" style="color:#009ee3"><strong>Read more</strong></a></p>
                        </
td>
                    </
tr>
                </
table>
            </
td>
        </
tr>
    </
table>
</
body>
</
html
Profile
 
 
Posted: 14 July 2013 06:41 AM   [ Ignore ]   [ # 1 ]  
Newbie
Rank
Total Posts:  12
Joined  2012-05-19

Hi David. I tend to build emails without the p tag. I find outlook annoying adding its own spacing amount after each ‘p’.

The spacing I use can be controlled by div’s with a font size and line height which suits. It seems to give me more control. But as you say, the emails are templates so if the client is populating the email themselves, then this maybe an issue as Im sure the client wont to delve into the code.

example
<div style=“font-size: 10px; line-height: normal;”></div>

rob

Profile
 
 
Posted: 14 July 2013 10:11 AM   [ Ignore ]   [ # 2 ]  
Newbie
Rank
Total Posts:  5
Joined  2011-07-15

Thanks Rob, using the div instead of a p tag worked a treat and removed the extra space in Outlook.com, so I’ve applied that to all of the p tags now.

Profile
 
 
Posted: 17 July 2013 12:55 PM   [ Ignore ]   [ # 3 ]  
Newbie
Rank
Total Posts:  1
Joined  2013-07-17
artwork79 - 14 July 2013 10:11 AM

Thanks Rob, using the div instead of a p tag worked a treat and removed the extra space in Outlook.com, so I’ve applied that to all of the p tags now.

You should be careful with DIV tags - they are still unreliable in HTML email. Gmail completely ignores DIV tags, and coverage in Hotmail is spotty. Definitely not best practice to use them.

You should also definitely not be using P tags for email! Use 2 BR tags for a line space.

Unfortunately, as cumbersome as it is, the best practice for spacing in HTML emails is still the use of tables…  To create a line space, say 10 pixels high, use a TD with a blank gif image… This will hold up everywhere, guaranteed, and will not add extra space (unless there are other issues with your code).

You can even use the blank gifs to create borders around table cells, etc. This is best practice as well, as the border attributes will not render everywhere.

Good luck!

Profile
 
 
   
 
 
x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!