Getting borders to display in Hotmail

Hi all,

I am having trouble in getting some borders to display in my Hotmail account. The borders display fine in our major email clients we test, such as AOL Mail, GMail, Outlook 2003/3007 and Yahoo Mail. My code is as follows:

<tr><td align="center" valign="bottom" style="border-left:solid 1px #666666; border-right:solid 1px #666666; border-bottom:solid 1px #666666; padding:0px 3px 10px 3px;">

<p style="font-size: 14px; margin:0px 0px 0px 0px; color: #000000; line-height: 20px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#"> <strong>Play with<br />colleagues</strong></a></p>

<p style="font-size: 12px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;">&nbsp;</p>

<p><a href="#"><img src="image.jpg" alt="#" width="80" height="84" border="0" /></a><br /><br /></p>

<p style="font-size: 12px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;">Test your nerve, precision and finger power against your colleagues.</p></td></tr>

I can't seem to work out where I am going wrong? Can someone help?

Many Thanks
Jody

davidaf davidaf, 6 years ago

Hi Jody,

What browser are you viewing your hotmail on? What borders are not displaying? I tested your code snippet in hotmail and the borders showed up fine for me in FF on Win7.


The Campaign Monitor Blog – HTML email smarts to go with your good looks
jodygibbons, 6 years ago

Hi Davida,

Thankyou for your reply. I see, thats good it displayed fine when you tried it. I have just tried it again and it doesn't for me for some reason. The browsers I am using are Firefox 3.6.3 and Internet Explorer 8. Maybe its some of the surrounding code that is conflicting with this snippet I previously sent. Here is all the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>Untitled email</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
        
<style media="all" type="text/css">
a:link, a:visited {
color:#000000;
text-decoration:none;
}
        
#keyline {
border: #58585A 1px solid;
}

#tdTitle{
border-top:1px solid #58585A;
border-bottom:1px solid #58585A;
}
       
#tdTitle{
font-family:Calibri, Verdana, Arial, Sans-serif;
font-size:26px;
vertical-align:middle;

}
#tdFooter {
border-top: #58585A 1px solid; 
border-bottom: #58585A 1px solid;
margin: 0px 0px 0px 0px; 

}
#tdFooter img {
margin: 10px 0px 0px 0px; 
}

#rhColumnBar {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
margin-left: 10px;
}
        
.copy {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: bold;
}

.olink {    
color: #E5173F;
text-decoration:none;
}

.play {    
color: #003257;
text-decoration:none;
font-size: 18px;
font-weight: bold;
text-align: right;
}
         
</style>
</head>
    
<body>
<div align="center">
<table id="keyline" cellspacing="0" cellpadding="0" style="padding:0px 40px 40px 40px; border: #58585A 1px solid;">

<tbody>
<tr>
<td valign="top" style="text-align: left;"><table cellspacing="0" cellpadding="0" width="600" style="margin: 0px 0px 0px 0px;">
<tbody>
<tr>
<td width="150" valign="top" style="text-align: left;">&nbsp;</td>
<td valign="middle" width="300" style="text-align: right; color: #58585A; font-family: verdana, arial, helvetica, sans-serif; font-size:9px; margin:0px 0px 0px 0px;"></td>
<td valign="middle" width="150" style="text-align: right; color: #58585A; font-family: verdana, arial, helvetica, sans-serif; font-size:9px; margin:0px 0px 0px 0px;"><a href="http://[@ShowAsWebPageLink]" style="text-decoration:none; color: #58585A;">View as web page</a> </td></tr>

<!--    MAIN HEADER IMAGE    -->
<tr id="trHeader">
<td valign="top" colspan="3" style="text-align: left;"><a href="#"><img src="#" alt="Access: consulting | software | solutions" width="600" height="56" style="margin: 10px 0px 0px 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;" /></a></td></tr>
<!--    END MAIN HEADER IMAGE    -->

<!--    TITLE IN TRAMLINES    -->
<tr id="trTitle">
<td valign="top" colspan="3" id="tdTitle" style="text-align: left; border-top:solid 1px #58585A; border-bottom:solid 1px #58585A; font-family:Calibri, Verdana, Arial, Sans-serif; font-size:30px; vertical-align:middle; margin: 0px 0px 10px 0px;"><a href="#" style="color:#000000; text-decoration:none;">The ultimate 2010 penalty shootout from Access<br />
Can you beat today's top score?</a><a href="#" style="color: #E5173F; text-decoration: none;"> Play here &raquo;</a></td></tr>
<!--    END TITLE IN TRAMLINES    -->

<!--    AMAZON OFFER BOX    -->
<tr><td width="150" align="left" valign="top" class="competitionheader" style="padding-top: 20px;"><table width="130" height="320" border="0" cellspacing="0" cellpadding="0">

<tr><td><img src="#" style="padding:0; margin:0" width="130" height="10" /></td></tr>

<tr><td width="130" height="320" align="center" valign="top" style="border-left:solid 1px #666666; border-right:solid 1px #666666; border-bottom:solid 1px #666666; padding:0px 3px 10px 3px;"><br />
<p style="font-size: 14px; margin:0px 0px 0px 0px; color: #000000; line-height: 20px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color: #000; text-decoration: none;"><strong>Win a &pound;70 <br />Amazon Voucher</strong></a></p>

<p><a href="#"><img src="#" width="105" height="50" border="0" /></a></p>

<p style="font-size: 11px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color: #000; text-decoration: none;">Play the game <br />
  to enter the<br />
  prize draw</a></p>

<p style="font-size: 11px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;">&nbsp;</p>

<p style="font-size: 10px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;">&nbsp;</p>
<p style="font-size: 10px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;">&nbsp;</p>
<p style="font-size: 10px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;">&nbsp;</p>
<p style="font-size: 10px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color: #000; text-decoration: none;">Terms &amp; conditions</a></p>
</td></tr></table></td>
<!--    END OF AMAZON OFFER BOX    -->

<!--    CENTRAL FOOTBALL BOX    -->
<td width="300" valign="top" style="text-align: left; border-right: #FFFFFF 2px solid; border-top: #FFFFFF 2px solid; padding-top: 20px; margin: 0px; "><a href="#><img src="#" alt="Click here to play" width="300" height="200" style="margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px"  border="0"/></a>
<p style="font-size: 11px; margin:10px 0px 7px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><strong>Join in the World Cup fun</strong> <br />
All you have to do is score as many goals as quickly as you can.  If your name is on our leaderboard by midnight on  the <strong>12th July</strong> you'll be entered into a prize draw  to win a <strong>£70 Amazon Voucher</strong>.</p>

<p style="font-size: 14x; margin:10px 15px 7px 0px; color: #E5173F; line-height: 20px; font-family: verdana, arial, helvetica, sans-serif;"><strong><a href="#" style="color: #E5173F; text-decoration: none;"> Play here &raquo;</a></strong></p></td>
<!--    END OF CENTRAL FOOTBALL BOX    -->

<!--    VIRAL PASS ON BOX    -->
<td width="150" align="right" valign="top" style="padding-top: 20px;"><table width="130" height="320" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="#" style="padding:0; margin:0" width="130" height="10" /></td></tr>
            
<tr><td width="130" height="320" align="center" valign="top" style="border-left:solid 1px #666666; border-right:solid 1px #666666; border-bottom:solid 1px #666666; padding:0px 3px 10px 3px;"><br />
<p style="font-size: 14px; margin:0px 0px 0px 0px; color: #000000; line-height: 20px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color: #000; text-decoration: none;"> <strong>Play with<br />
    colleagues</strong></a></p>

<p style="font-size: 11px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;">&nbsp;</p>
<p><a href="#"><img src="#" alt="World Cup Football" width="80" height="84" border="0" /></a><br />
      <br /></p>
<p style="font-size: 11px; margin:0px 0px 0px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color: #000; text-decoration: none;">Test your nerve, precision and <br />
    finger power against your colleagues</a></p></td></tr></table></td></tr>
<!--    END OF VIRAL PASS ON BOX    -->

<tr><td>&nbsp;</td></tr>

<!--    THREE OFFERS BOX    -->
<tr><td colspan="3" align="center" ><table width="600" border="0" cellspacing="0" cellpadding="0">
<!--    END OF THREE OFFERS BOX    -->

<!--    THREE OFFERS BOX CURVED TOP EDGES    -->
<tr><td width="200"><img src="#" alt="keyline" style="display: block; width:200; height:10" /></td>

<td width="200"><img src="#" width="200" height="10" align="absbottom" style="display:block; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" /></td>

<td width="200"><img src="#" width="200" height="10" align="absbottom" style="display:block; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" /></td>
</tr>

<!--    END OF THREE OFFERS BOX CURVED TOP EDGES    -->
              
<!--    FIRST OFFER BOX    -->
<tr><td width="200" align="center" valign="top" bgcolor="#808080" style="border-left: solid 1px #666666;border-bottom: solid 1px #666666;border-right: solid 1px #666666;padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"">

<p style="font-size: 11px; margin:0px 0px 10px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color:#000000; text-decoration:none;"><strong>World class software</strong><br />
   Find a perfect match:<br /> 
   top tips for selecting <br />
   business software</a></p>
<p style="font-size: 11px; margin:0px 0px 10px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#"><img src="#" border="0"/></a></p></td>
<!--    END OF FIRST OFFER BOX    -->


<!--    SECOND OFFER BOX    -->
<td width="200" align="center" valign="top" bgcolor="#ededed" style="border-left: solid 1px #666666;border-bottom: solid 1px #666666;border-right: solid 1px #666666;padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

<p style="font-size: 11px; margin:0px 0px 10px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color:#000000; text-decoration:none;"><strong>Winning iPhone App</strong> Timesheets, expenses, reports: 
  score big with our free productivity app</a></p>
<p style="font-size: 11px; margin:0px 0px 10px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#"><img src="#" border="0"/></a></p></td>
<!--    END OF SECOND OFFER BOX    -->
                

<!--    THIRD OFFER BOX    -->
<td width="200" align="center" valign="top" bgcolor="#e5173f" style="border-left: solid 1px #666666;border-bottom: solid 1px #666666;border-right: solid 1px #666666;padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><p style="font-size: 11px; margin:0px 0px 10px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#" style="color:#000000; text-decoration:none;"><strong>Managers’ choice<br />
</strong>Stay ahead of the game: <br />
top tips for selecting<br /> 
software functionality</a></p>
<p style="font-size: 11px; margin:0px 0px 10px 0px; color: #000000; line-height: 18px; font-family: verdana, arial, helvetica, sans-serif;"><a href="#"><img src="#" border="0"/></a></p></td>

</tr></table>&nbsp;</td></tr>
<!--    END OF THIRD OFFER BOX    -->

<!--    BOTTOM LOGO IMAGE    -->
<tr><td valign="top" id="tdFooter" colspan="3" style="text-align: left; border-top: #58585A 1px solid; border-bottom: #58585A 1px solid; margin: 0px 0px 0px 0px;"><a href="#7"><img src="#" alt="Access: consulting | software | solutions" width="600" height="56" style="margin: 10px 0px 0px 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;" /></a></td></tr>
<!--    END OF BOTTOM LOGO IMAGE    -->

<!--    BOTTOM DETAILS    -->
<tr><td valign="top" colspan="3" style="text-align: left;"><p style="margin: 10px 0px 0px 0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8px; color: #58585A; text-align: left;">xxxxxxxxxx., a company registered in England and Wales, with registered number xxxxxx and with its registered office at xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>

<p style="margin: 10px 0px 0px 0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8px; color: #58585A; text-align: left;">xxxxxxxxxxxxxxxxxx, a company registered in Ireland, with registered number xxxxxxxxx and with its registered office at xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

<p style="margin: 10px 0px 0px 0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8px; color: #58585A; text-align: left;"><strong>Terms and conditions</strong> 1. This prize draw is open to entrants in the UK and the Republic of Ireland only. Employees of xxxxxxxx and their immediate families can take part in the penalty shoot out game, but are not eligible for entry into the prize draw. 2. Entrants who successfully complete the penalty shoot out competition and are entered onto the leader board shall be asked to complete their registration details.  All entrants listed on the leader board as at 00:59pm on 12th July 2010 shall be entered into the prize draw. 3. Registrations received from residents/companies located outside the UK and Republic of Ireland or those containing incomplete online registration details are exempt from participation. 4. The prize draw will take place on 13th July. The name of one entrant will be drawn at random from all those that enter the leader board. The first name drawn will be the winner. The winner will be notified by email or phone by 14th July.  The judges’ decision is final and no correspondence will be entered into with entrants. 5. The prize will be a £70 (GBP) Amazon Voucher. 6. No cash alternative is available. 7. The prize draw closes at midnight on 12th July. 8. xxxxxxxxx will not accept responsibility for late or lost entries due to (but not limited to) computer malfunctions, server problems or any of IT related faults occurring on either xxxxxxxxxxx computer systems or a third party’s computer system.  For the avoidance of doubt, proof of sending is not proof of receipt. 9. Entries are limited to one per contact. There is no cost to partaking. 10. No purchase is necessary. 11. Results can be obtained by sending a stamped, self addressed envelope, and quoting xxxxxxx, after the closing date to: xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx.</p>
<p style="margin: 10px 0px 0px 0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8px; color: #E5173F; text-align: left;"><a href="http://[@UnsubscribeLink]" style="text-decoration: none; color: #E5173F;">Click here to instantly unsubscribe from this email</a></p></td></tr></tbody></table></td></tr></tbody></table>
<!--    END OF BOTTOM DETAILS    -->
    
</div>
</body>
</html>
NickoLabs NickoLabs, 6 years ago

It seems to be displaying correctly (appart from the broken images) in Hotmail with IE8, 64bits edition, on Win7
I took a screenshot.
http://img443.imageshack.us/img443/1488/testtz.th.gif
What software are you using for your hotmail test?


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn
jodygibbons, 6 years ago

Hi NickoLabs,

Thanks for your reply. I had a look at your screenshot and that is more or less what I'm after, but I haven't had it display like this - mine is always minus the borders around the boxes: ''Win a £70 voucher' and 'Play with colleagues'. Also the three bottom offer boxes: 'World Class software', 'Winning iPhone App' and 'Manager's choice'.

I have an image at the top of each of these boxes which gives them a curved edge. This could be what conflicting with the border? The software I am using to send test emails to the various email clients is MailDirect.

Cheers
Jody

NickoLabs NickoLabs, 6 years ago
jodygibbons :

I have an image at the top of each of these boxes which gives them a curved edge. This could be what conflicting with the border? The software I am using to send test emails to the various email clients is MailDirect.

Hi Jody

My guess is that it's relative to the way MailDirect handles inline CSS.
I looked deeper into your code and saw a few typos... I corrected some of them but you might wanna take a look yourself, since you may do some modification afterwards.

I did more test with the version Campaign Monitor generates, and it looks great on Gmail (Firefox 3.6), Hotmail (IE8, Win7) and Outlook 2007 (Win7). I guess the issue was somewhere along the importation...

In any cases, here is the "clean", CM generated, version. Beware: CSS was MOVED INLINE... therefore it's gonna be painful to look at!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled email</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<style media="all" type="text/css">
a:link, a:visited {
    color:#000000;
    text-decoration:none;
}
#keyline {
    border: #58585A 1px solid;
}
#tdTitle {
    border-top:1px solid #58585A;
    border-bottom:1px solid #58585A;
}
#tdTitle {
    font-family:Calibri, Verdana, Arial, Sans-serif;
    font-size:26px;
    vertical-align:middle;
}
#tdFooter {
    border-top: #58585A 1px solid;
    border-bottom: #58585A 1px solid;
    margin: 0px 0px 0px 0px;
}
#tdFooter img {
    margin: 10px 0px 0px 0px;
}
#rhColumnBar {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    margin-left: 10px;
}
.copy {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}
.olink {
    color: #E5173F;
    text-decoration:none;
}
.play {
    color: #003257;
    text-decoration:none;
    font-size: 18px;
    font-weight: bold;
    text-align: right;
}
</style>
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
</head>
<body>
<div align="center">
    <table id="keyline" cellspacing="0" cellpadding="0" style="padding-top:0px;padding-bottom:40px;padding-right:40px;padding-left:40px;border-width:1px;border-style:solid;border-color:#58585A;" >
        <tbody>
            <tr>
                <td valign="top" style="text-align:left;" ><table cellspacing="0" cellpadding="0" width="600" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;" >
                        <tbody>
                            <tr>
                                <td width="150" valign="top" style="text-align:left;" >&nbsp;</td>
                                <td valign="middle" width="300" style="text-align:right;color:#58585A;font-family:verdana, arial, helvetica, sans-serif;font-size:9px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;" ></td>
                                <td valign="middle" width="150" style="text-align:right;color:#58585A;font-family:verdana, arial, helvetica, sans-serif;font-size:9px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;" ><a href="http://[@ShowAsWebPageLink]" style="text-decoration:none;color:#58585A;" >View as web page</a></td>
                            </tr>
                            <tr id="trHeader">
                                <td valign="top" colspan="3" style="text-align:left;" ><a href="#" style="color:#000000;text-decoration:none;" ><img src="#" alt="Access: consulting | software | solutions" width="600" height="56" style="margin-top:10px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;border-top-style:none;border-right-style:none;border-left-style:none;border-bottom-style:none;" /></a></td>
                            </tr>
                            <tr id="trTitle">
                                <td valign="top" colspan="3" id="tdTitle" style="text-align:left;border-top-width:1px;border-top-style:solid;border-top-color:#58585A;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#58585A;font-family:Calibri, Verdana, Arial, Sans-serif;font-size:30px;vertical-align:middle;margin-top:0px;margin-bottom:10px;margin-right:0px;margin-left:0px;" ><a href="#" style="color:#000000;text-decoration:none;" >The ultimate 2010 penalty shootout from Access<br />
                                    Can you beat today's top score?</a><a href="#" style="color:#E5173F;text-decoration:none;" > Play here &raquo;</a></td>
                            </tr>
                            <tr>
                                <td width="150" align="left" valign="top" class="competitionheader" style="padding-top:20px;" ><table width="130" height="320" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td><img src="#"  width="130" height="10" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;" /></td>
                                        </tr>
                                        <tr>
                                            <td width="130" height="320" align="center" valign="top" style="border-left-width:1px;border-left-style:solid;border-left-color:#666666;border-right-width:1px;border-right-style:solid;border-right-color:#666666;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#666666;padding-top:0px;padding-bottom:10px;padding-right:3px;padding-left:3px;" ><br />
                                                <p style="font-size:14px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:20px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000;text-decoration:none;" ><strong>Win a &pound;70 <br />
                                                    Amazon Voucher</strong></a></p>
                                                <p><a href="#" style="color:#000000;text-decoration:none;" ><img src="#" width="105" height="50" border="0" /></a></p>
                                                <p style="font-size:11px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000;text-decoration:none;" >Play the game <br />
                                                    to enter the<br />
                                                    prize draw</a></p>
                                                <p style="font-size:11px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" >&nbsp;</p>
                                                <p style="font-size:10px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" >&nbsp;</p>
                                                <p style="font-size:10px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" >&nbsp;</p>
                                                <p style="font-size:10px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" >&nbsp;</p>
                                                <p style="font-size:10px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000;text-decoration:none;" >Terms &amp; conditions</a></p></td>
                                        </tr>
                                    </table></td>
                                <td width="300" valign="top" style="text-align:left;border-right-width:2px;border-right-style:solid;border-right-color:#FFFFFF;border-top-width:2px;border-top-style:solid;border-top-color:#FFFFFF;padding-top:20px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;" ><a href="#" style="color:#000000;text-decoration:none;" ><img src="#" alt="Click here to play" width="300" height="200"   border="0" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" /></a>
                                    <p style="font-size:11px;margin-top:10px;margin-bottom:7px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><strong>Join in the World Cup fun</strong> <br />
                                        All you have to do is score as many goals as quickly as you can.  If your name is on our leaderboard by midnight on  the <strong>12th July</strong> you'll be entered into a prize draw  to win a <strong>£70 Amazon Voucher</strong>.</p>
                                    <p style="font-size:14px;margin-top:10px;margin-bottom:7px;margin-right:15px;margin-left:0px;color:#E5173F;line-height:20px;font-family:verdana, arial, helvetica, sans-serif;" ><strong><a href="#" style="color:#E5173F;text-decoration:none;" > Play here &raquo;</a></strong></p></td>
                                <td width="150" align="right" valign="top" style="padding-top:20px;" ><table width="130" height="320" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td><img src="#"  width="130" height="10" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;" /></td>
                                        </tr>
                                        <tr>
                                            <td width="130" height="320" align="center" valign="top" style="border-left-width:1px;border-left-style:solid;border-left-color:#666666;border-right-width:1px;border-right-style:solid;border-right-color:#666666;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#666666;padding-top:0px;padding-bottom:10px;padding-right:3px;padding-left:3px;" ><br />
                                                <p style="font-size:14px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:20px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000;text-decoration:none;" > <strong>Play with<br />
                                                    colleagues</strong></a></p>
                                                <p style="font-size:11px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" >&nbsp;</p>
                                                <p><a href="#" style="color:#000000;text-decoration:none;" ><img src="#" alt="World Cup Football" width="80" height="84" border="0" /></a><br />
                                                    <br />
                                                </p>
                                                <p style="font-size:11px;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000;text-decoration:none;" >Test your nerve, precision and <br />
                                                    finger power against your colleagues</a></p></td>
                                        </tr>
                                    </table></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="3" align="center" ><table width="600" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="200"><img src="#" alt="keyline" style="display:block;width:200px;height:10px;" /></td>
                                            <td width="200"><img src="#" width="200" height="10" align="absbottom" style="display:block;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;" /></td>
                                            <td width="200"><img src="#" width="200" height="10" align="absbottom" style="display:block;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;" /></td>
                                        </tr>
                                        <tr>
                                            <td width="200" align="center" valign="top" bgcolor="#808080" style="border-left-width:1px;border-left-style:solid;border-left-color:#666666;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#666666;border-right-width:1px;border-right-style:solid;border-right-color:#666666;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;" ><p style="font-size:11px;margin-top:0px;margin-bottom:10px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000000;text-decoration:none;" ><strong>World class software</strong><br />
                                                    Find a perfect match:<br />
                                                    top tips for selecting <br />
                                                    business software</a></p>
                                                <p style="font-size:11px;margin-top:0px;margin-bottom:10px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000000;text-decoration:none;" ><img src="#" border="0"/></a></p></td>
                                            <td width="200" align="center" valign="top" bgcolor="#ededed" style="border-left-width:1px;border-left-style:solid;border-left-color:#666666;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#666666;border-right-width:1px;border-right-style:solid;border-right-color:#666666;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;" ><p style="font-size:11px;margin-top:0px;margin-bottom:10px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000000;text-decoration:none;" ><strong>Winning iPhone App</strong> Timesheets, expenses, reports:
                                                    score big with our free productivity app</a></p>
                                                <p style="font-size:11px;margin-top:0px;margin-bottom:10px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000000;text-decoration:none;" ><img src="#" border="0"/></a></p></td>
                                            <td width="200" align="center" valign="top" bgcolor="#e5173f" style="border-left-width:1px;border-left-style:solid;border-left-color:#666666;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#666666;border-right-width:1px;border-right-style:solid;border-right-color:#666666;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;" ><p style="font-size:11px;margin-top:0px;margin-bottom:10px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000000;text-decoration:none;" ><strong>Managers&rsquo; choice<br />
                                                    </strong>Stay ahead of the game: <br />
                                                    top tips for selecting<br />
                                                    software functionality</a></p>
                                                <p style="font-size:11px;margin-top:0px;margin-bottom:10px;margin-right:0px;margin-left:0px;color:#000000;line-height:18px;font-family:verdana, arial, helvetica, sans-serif;" ><a href="#" style="color:#000000;text-decoration:none;" ><img src="#" border="0"/></a></p></td>
                                        </tr>
                                    </table>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td valign="top" id="tdFooter" colspan="3" style="text-align:left;border-top-width:1px;border-top-style:solid;border-top-color:#58585A;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#58585A;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;" ><a href="#7" style="color:#000000;text-decoration:none;" ><img src="#" alt="Access: consulting | software | solutions" width="600" height="56" style="margin-top:10px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;border-top-style:none;border-right-style:none;border-left-style:none;border-bottom-style:none;" /></a></td>
                            </tr>
                            <tr>
                                <td valign="top" colspan="3" style="text-align:left;" ><p style="margin-top:10px;margin-bottom:0px;margin-right:0px;margin-left:0px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8px;color:#58585A;text-align:left;" >xxxxxxxxxx., a company registered in England and Wales, with registered number xxxxxx and with its registered office at xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
                                    <p style="margin-top:10px;margin-bottom:0px;margin-right:0px;margin-left:0px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8px;color:#58585A;text-align:left;" >xxxxxxxxxxxxxxxxxx, a company registered in Ireland, with registered number xxxxxxxxx and with its registered office at xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                                    <p style="margin-top:10px;margin-bottom:0px;margin-right:0px;margin-left:0px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8px;color:#58585A;text-align:left;" ><strong>Terms and conditions</strong> 1. This prize draw is open to entrants in the UK and the Republic of Ireland only. Employees of xxxxxxxx and their immediate families can take part in the penalty shoot out game, but are not eligible for entry into the prize draw. 2. Entrants who successfully complete the penalty shoot out competition and are entered onto the leader board shall be asked to complete their registration details.  All entrants listed on the leader board as at 00:59pm on 12th July 2010 shall be entered into the prize draw. 3. Registrations received from residents/companies located outside the UK and Republic of Ireland or those containing incomplete online registration details are exempt from participation. 4. The prize draw will take place on 13th July. The name of one entrant will be drawn at random from all those that enter the leader board. The first name drawn will be the winner. The winner will be 
                                        notified by email or phone by 14th July.  The judges&rsquo; decision is final and no correspondence will be entered into with entrants. 5. The prize will be a £70 (GBP) Amazon Voucher. 6. No cash alternative is available. 7. The prize draw closes at midnight on 12th July. 8. xxxxxxxxx will not accept responsibility for late or lost entries due to (but not limited to) computer malfunctions, server problems or any of IT related faults occurring on either xxxxxxxxxxx computer systems or a third party&rsquo;s computer system.  For the avoidance of doubt, proof of sending is not proof of receipt. 9. Entries are limited to one per contact. There is no cost to partaking. 10. No purchase is necessary. 11. Results can be obtained by sending a stamped, self addressed envelope, and quoting xxxxxxx, after the closing date to: xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx 
                                        xxxxxxxx xxxxxxxx.</p>
                                    <p style="margin-top:10px;margin-bottom:0px;margin-right:0px;margin-left:0px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8px;color:#E5173F;text-align:left;" >
                                        <!-- Campaign Monitor Unsubscribe -->
                                        <unsubscribe>Click here to instantly unsubscribe from this email</unsubscribe>
                                        <a href="http://[@UnsubscribeLink]" style="text-decoration:none;color:#E5173F;" >Click here to instantly unsubscribe from this email</a></p></td>
                            </tr>
                        </tbody>
                    </table></td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

I hope it's good on your side!

Regards,


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn
jodygibbons, 6 years ago

Hi NickoLabs,

Thankyou for your email and help with this. I tried your code you sent across out in MailDirect and, after adding the images and links back in, I had the some problem with HotMail. I think your right in that it must be something to do with the way MailDirect sends it out? It still displays fine all the other main email browsers just HotMail seems to have a few issues with it. Thankyou for your testing of this though, which has put mind at ease abit. I'll take a closer look at my code to neaten it up regarding a few typos, etc and see if that will help.
Thanks again for your help Nickolas.

Many Thanks
Jody Gibbons

zapatoche, 6 years ago

the best way that i found to get border displayed in hotmail is to actually code the colour with a keyword instead of a hex web colour. you're a bit more limited in choice.

style="border-bottom: 1px solid gray;"

mikenytola, 6 years ago

This has been bugging me for some time now and I just don't get it. Hotmail strips the border and/or border color when you use a hex number. If you put in "blue" for instance, it works (as zapatoche mentioned). I have searched the internet up and down and have yet to find any answer. I didn't even find that you could put the word for the color to actually get it to work, I found that out through testing.

Does anybody have any idea about this? I'm using inline styling with the border style (border:1px #003399 solid;) for example. It doesn't display in both Firefox and IE so it's not the browser. I've had this question unanswered for more than a few years now. Help!

jerallyn jerallyn, 6 years ago

For 1px borders this works for me:
<style="border: 1px solid #80a9cf;">

Anything larger than 1px I'll add a background color to the cell:
<td width="10" style="background-color: #b71d19;">

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098