Width issues (Yahoo!) Fine in Outlook, Hotmail, Gmail etc

Howdy,

I am having a strange width issues which is pushing out the images and causing space to appear.

Works find in all outlools, gmail, hotmail etc. Seems to have issues in Yahoo and Thunderbird.

If I removed the entire copy TD it is fine but I cant seem to find the culprit.

A second set of eyes would be really appreciated! Cheers.

Error can be seen here - http://i34.tinypic.com/2cdtqc3.jpg

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SEEK Learning</title>
<style type="text/css">
<!--
body {
    background-color:#fff;
    padding:0px;
    margin:0px;
    width: 100% !important;
}

.articlenest {
    background-color:#fff;
}

.articlecopy {
    background-color:#fff;
}

p {
    color:#3c3c3c;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    margin:0px 20px 20px 30px;
    padding:0px 0px 0px 0px;
    line-height:20px;
    text-align:left;
}

.inlinecta {
    text-align:center;
    padding:15px 0 7px 0;
}

.viewonline {
    line-height:normal;
    padding:0;
    margin:0;
    text-align:right;
    color:#039738;
}

.messages {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFF;
}


a {
    text-decoration:underline;
}

A:hover    {
    text-decoration:none;
}

img {
    display:block;
}

h1 {
    color:#3c3c3c;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    margin:20px 20px 8px 30px;
    padding:0px 0px 0px 0px;
    line-height:20px;
    text-align:left;
    font-weight:bold;
}

.footernest {
background-color:#e1e5e4;
padding:0px;
margin:0;    
}

.legals {
    color:#7c7c7c;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    margin:0px 20px 15px 30px;
    padding:0px 0px 0px 0px;
    line-height:normal;
    text-align:left;
}

.contactdetails {
color:#7c7c7c;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    margin:0px 20px 15px 30px;
    padding:0px 0px 0px 0px;
    line-height:18px;
    text-align:left;
}

.contactdetails a {
    color:#7c7c7c;
    text-decoration:underline;
}

.code {
    color:#FFF;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding:12px;
    margin:0;
}
-->
</style>
</head>
<body>
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" style="text-align:center"><tr><td>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="padding:0px; margin:0px;">
<!-- HEADER --><tr><td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td><img src="img/header-logo.gif" alt="seeklearning" width="215" height="78" /></td>
                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
        
                <td height="23"><p class="viewonline"><webversion style="color:#039738;">View online</webversion></p></td>
        </tr>
        <tr>
        <td><img src="img/header-youfind.gif" alt="You find the calling, we'll find the course" width="385" height="55" /></td>
        </tr>
</table>
</td>
        </tr>
                
</table>

</td></tr>
<!-- HEADER END -->
<!-- HERO --><tr><td>
<table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td><img src="img/hero-img.gif" alt="Upskill | Exclusive Offer! Purchase a Skillsoft Certification Course to receive a bonus exam voucher valued up to #300" width="600" height="265" border="0" /></td>
                
        </tr>
        <tr><td>
        <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td><img src="img/hero-cta-left.gif" width="403" height="63" border="0" /></td>
                <td><a href="#"><img src="img/hero-cta-button.gif" alt="SECURE YOUR EXCLUSIVE OFFER" width="167" height="63" border="0" /></a></td>
                <td><img src="img/hero-cta-right.gif" width="30" height="63" border="0" /></td>
        </tr>
</table>

</td></tr>
                
</table>

</td></tr>
<!-- HERO END -->
<!-- ARTICLE 1 --><tr><td>
<table width="600" border="0" cellspacing="0" cellpadding="0" class="articlenest">
        <tr>
        <td valign="top"><table width="384" border="0" cellspacing="0" cellpadding="0">
        <tr><td><table width="384" border="0" cellspacing="0" cellpadding="0">
        <tr><td class="articlecopy"><h1>Hi [firstname,fallback=there]!</h1>
        <p>With market demand steadily increasing since we last talked, upskilling through certification is the key to taking your career to the next level. If you're still looking for a higher salary, a new role, or want to demonstrate your commitment to existing or potential employers, check out this exclusive Skillsoft IT and project management certification training offer.</p>
        <h1>Your limited time offer – Bonus Exam Voucher</h1>
        <p>Purchase Skillsoft certification training (valued at $3,950 or more) between September xx and October xx, 2010 and you'll receive a bonus exam voucher valued up to $300.*</p>
        <h1>Make your move...</h1>
        <p>Make sure you take advantage of this great offer before it ends on &lt;DATE&gt;. Simply confirm your details and I'll call you back to discuss your training needs. You can also call me on 1800 89 10 11, Monday to Friday during regular business hours.</p>
        <p><b>Your unique code: [uniqueid]</b></p>
<table width="384" border="0" cellspacing="0" cellpadding="0" class="ctanest">
        <tr>
                <td><a href="#"><img align="right" src="img/img-inlinecta-update.gif" alt="UPDATE YOUR DETAILS" width="192" height="69" border="0" /></a></td>
                <td><a href="#"><img align="left" src="img/img-inlinecta-secure.gif" alt="SECURE YOUR EXCLUSIVE OFFER" width="192" height="69" border="0" /></a></td>
        </tr>
        <tr><td colspan="2" height="15"></td></tr>
</table><p>I look forward to helping you take your career 
                to the<br />
                next level,<br /><b>Albert Hughes - 
                SEEK Learning Consultant</b></p>
                </td>
        </tr>
</table>
</td>
        </tr>
        
</table>
</td>
                <td valign="top" style="padding:0; margin:0;"><img src="img/sidebar-boxes.jpg" alt="Platinum Winner - LearnX Asia Pacific 2010 Awards E-Learning &amp; Training | Here to help Find out more about this offer and our certification training. Free call 1800 89 10 11.
" width="216" height="485" border="0" align="right" />
</td>
                
        </tr>
        <tr><td height="15"></td></tr>        
</table>
</td></tr>
<!-- ARTICLE 1 END -->
</table>
</td></tr>
</table>
<!-- FOOTER -->
<table class="footernest" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td height="15"></td></tr>
        <tr>
                <td><p class="legals">You have received this email because you recently enquired about Skillsoft certification training through SEEK Learning. Certification is a great way to progress your career, but if you no longer wish to receive exclusive Skillsoft certification news, updates and offers, you can <unsubscribe style="color:#7c7c7c;">unsubscribe</unsubscribe> anytime.</p>
                        <p class="legals">*Like the details? We've got them here. View the full set of terms and conditions that apply to this exclusive offer at the SEEK Learning website. You can also request a copy by calling 1800 89 10 11. </p>
                        <p class="contactdetails">SEEK Learning is part of SEEK, Australia's #1 job site  SEEK Learning ABN 50 084 202 719<br />
                                Sydney (Head Office), Level 16, 8-20 Napier Street, North Sydney, NSW 2060 Australia<br />
                                1800 89 10 11 - <a href="mailto:info@seeklearning.com.au">info@seeklearning.com.au</a></p></td>
        </tr>
</table>

</td></tr></table>
<!-- FOOTER END -->
</body>
</html>
FuelDave, 6 years ago

Fixed:

Apparently Yahoo! is putting arbitrary margins on every IMG element. Styling this to 0 where images don;t have margins has fixed the issue.

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