Background gradient shows in browser but not in email

Hi all

I'll start by saying I'm a designer not a coder so apologies for the state of my code...

I've based my campaign on the Nature theme by 45Royale, I'm editing in Dreamweaver. When I test email the original template, the green gradient shows up in the email, in mine however it doesn't and I just can't see why.

I've added another table under the main title which doesn't exist on the original and I suspect this is where the problem lies.

Can anyone help please?

Here's my code:

<html lang="en">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>SPHERE_0711</title>
    <style type="text/css">
    a:hover { text-decoration: none !important; }
    .header h1 {color: white !important; font: bold 22px Verdana, Arial, sans-serif; margin: 0; padding: 0; line-height: 24px;}
    .header p {color: #8da757; font: normal 16px Helvetica, Arial, sans-serif; margin: 0; padding: 0; line-height: 16px; }
    .sidebar ul  {color: #464027; margin: 0 0 0 10px; padding: 0 0 0 5px; font-size: 12px;font-family: Georgia, serif;}
    .sidebar ul li {padding: 0 0 5px; margin: 0;}
    .sidebar ul li span,
    .sidebar ul li span a,
    .sidebar ul li a{color:#6c7c47}
    .sidebar h4{color:#fa943e !important; font-size: 12px;line-height: 16px; margin: 0; padding: 0;}
    .sidebar p {line-height: 16px; color:#4a4635;padding: 0; margin: 0;}
    .sidebar p a{color: #0063be; text-decoration: none; border-bottom: 1px dotted #0063be}
    .content h2 {color:#0063be !important; font-weight: bold; margin: 0; padding: 0; line-height: 30px; font-size: 17px; font-family: Verdana, Arial, sans-serif;}
    .content p {color:#5e5a4a; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;}
    .content a {color:#fa943e; text-decoration: none;}
    .footer p {margin: 0; padding: 0; text-align: center;color:#c0c0c0; font-family: Georgia, serif;}
    .footer a {color: #efe08e; text-decoration: none; border-bottom: 1px dotted #efe08e}
    .notice p {margin: 0; padding: 0; text-align: center;color:#fa943e; font-family: Georgia, serif;}
    .notice a {color: #efe08e; text-decoration: none; border-bottom: 1px dotted #efe08e}
</style>
  </head>
  <body style="margin: 0; padding: 0; background: #0063be url('images/bg_email.png') repeat-x center top;" bgcolor="#0063be">
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="padding: 10px 0 35px;background: #0064be url('images/bg_email.png') repeat-x center top;">

        <tr>
            <td  align="center" style="padding: 15px 0 10px; font-size: 11px; color:#fa943e; margin: 0; line-height: 1.2;font-family: Georgia, serif;" valign="top" class="notice">
                <p style="margin: 0; padding: 0; text-align: center;color:#fa943e; font-family: Georgia, serif;">You're receiving this newsletter because you bought widgets from us.</p>
                <p style="margin: 0; padding: 0; text-align: center;color:#fa943e; font-family: Georgia, serif;">Having trouble reading this? <webversion style="color:#fa943e; text-decoration: none; border-bottom: 1px dotted #fa943e">View it in your browser</webversion>. Not interested? <unsubscribe style="color:#fa943ee; text-decoration: none; border-bottom: 1px dotted #fa943e">Unsubscribe</unsubscribe> instantly.</p>
            </td>

          </tr>  
        <tr>
              <td align="center" style="font-family: Georgia, serif; padding: 0;" valign="top">
                <table cellpadding="0" cellspacing="0" border="0" align="center" width="650" height="157" style="font-family: Georgia, serif;background: #0063be url('images/BannerGraphic.gif') no-repeat center top; " class="header">
                  <tr>
                    <td width="22">&nbsp;</td>
                    <td style="margin: 0; padding: 50px 0 20px;" align="left" valign="bottom">
                    <p style="color: #8da757; font: normal 16px Verdana, Arial, sans-serif; margin: 0; padding: 0; line-height: 16px; ">&nbsp;</p>
                    
                    </td>

                  </tr>
                </table><!-- header-->
        <tr>
              <td align="center" style="font-family: Georgia, serif; padding: 0;" valign="top">
                 <table cellpadding="0" cellspacing="0" border="0" align="center" width="650" style="font-family: Georgia, serif;background: #fa943e no-repeat center top; " class="header">
                  <tr>
                    <td width="22">&nbsp;</td>
                    <td style="margin: 0; padding: 10px 0 20px;" align="left" valign="bottom">
                        <h1 style="color: white; font: bold 22px Verdana, Arial, sans-serif; margin: 0; padding: 0; line-height: 30px;">Welcome</h1>

                        <p style="color: white; font: normal 12px Verdana, Arial, sans-serif; margin: 0; padding-right: 20px; line-height: 22px; ">Dear SPHERE colleagues<br>
Welcome to the first issue of <em>SPHERE Connect</em>, the official SPHERE newsletter that will inform you of developments in HER2 testing, update you on the SPHERE programme’s progress and keep you in contact with your colleagues throughout the SPHERE region.<br>
It has been several months since we first met under the SPHERE banner, and I am happy to report that the SPHERE roll-out meetings are going from strength to strength. The national phases of the training programme have been launched and have now reached our colleagues across the Asia Pacific region in China, South Korea, Thailand, Malaysia, Indonesia, Vietnam, The Philippines, Hong Kong and Taiwan.<br>
The programme itself continues to evolve. Within this first edition of <em>SPHERE Connect</em>, we introduce the SPHERE Clinical Audit. This will produce the region’s first database on HER2 in breast and gastric cancer which will be of great assistance in achieving best practice in HER2 testing. Needless to say, all the SPHERE participants will figure prominently in this project.<br> 
<img src="Images/M_Bilous.jpg" alt="Michael" width="174" height="202" align="right">
This newsletter also features updates from the recent ASCO meeting in Chicago, alongside developments across the region.<br>
<em>SPHERE Connect</em> is very much your platform to connect, share and debate with colleagues. Please send in your contributions whether these are cases or questions, and especially your feedback. We look forward to hearing from you and hope that <em>SPHERE Connect</em> will prove to be a valuable resource.<br>

Michael Bilous</td>
                  </tr>
                </table>                <table cellpadding="0" cellspacing="0" border="0" align="center" width="650" style="font-family: Georgia, serif;background: url('images/bg_header_b.png') no-repeat center top; padding: 10px 0 0" >
                      <tr>
                          <td style="font-size: 1px; height: 7px; line-height: 1px;" height="7" colspan="4"><img src="file:///Mac 1/Users/alistair/Desktop/nature/html/images/spacer.gif" alt="space" width="25" height="1"></td>
                    </tr>
                    <tr>
                    <td width="6" style="font-size: 1px; line-height: 1px;">&nbsp;</td>

                    <td width="187" valign="top" align="left" style="font-family: Georgia, serif; background: #e3f5ff url('images/bg_sidebar.png') repeat-y left top;  padding-bottom: 25px" bgcolor="#e9e9dc" class="sidebar">
                        <table cellpadding="0" cellspacing="0" border="0"  style="color: #e3f5ff; font: normal 11px Georgia, serif; margin: 0; padding: 0;  background: #e9e9dc url('images/bg_sidebar.png') repeat-y left top;" width="186" bgcolor="#e9e9dc">
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 18px 0 5px 0"  valign="top" align="left">
                                <h3 style="color:#fa943e; font-weight: bold; margin: 0; padding: 0; line-height: 13px; font-size: 15px;font-family: Verdana, Arial, sans-serif;">Don't miss...</h3>
                            </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>

                        </tr>
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 8px 0 5px; font-family: Verdana, Arial, sans-serif;">            
                                <h4 style="color:#fa943e; font-size: 11px;line-height: 16px; margin: 0; padding: 0;"><a href="#controversies" style="color: #fa943e; text-decoration: none; border-bottom: 1px dotted #fa943e">Controversies in HER2 testing</a></h4>
                            </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr>
                        <tr>

                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 8px 0 5px; font-family: Verdana, Arial, sans-serif;">            
                                <h4 style="color:#fa943e; font-size: 11px;line-height: 16px; margin: 0; padding: 0;"><a href="#breast" style="color: #fa943e; text-decoration: none; border-bottom: 1px dotted #fa943e">Breast cancer prevention and treatment</a></h4>
                          <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 8px 0 5px; font-family: Verdana, Arial, sans-serif;">            
                              <h4 style="color:#fa943e; font-size: 11px;line-height: 16px; margin: 0; padding: 0;"><a href="#cases" style="color: #fa943e; text-decoration: none; border-bottom: 1px dotted #fa943e">Cases from SPHERE</a></h4>

                            
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr>
                        <tr><td colspan="3" style="border-top: 0px dashed #fa943e;padding: 0; margin: 0; font-size: 1px;height: 1px;">&nbsp;</td></tr>    
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 15px 0 5px; font-family: Georgia, serif;"  valign="top" align="left">
                                <h3 style="color:#fa943e; font-weight: bold; margin: 0; padding: 0; line-height: 13px; font-size: 15px;font-family: Verdana, Arial, sans-serif;">Contribute</h3>
                            </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>

                        </tr>
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 5px 0 15px 0; font-family: Verdana, Arial, sans-serif;" valign="top">            
                                <p style="line-height: 16px; font-family: Verdana, Arial, sans-serif; color:#fa943e;padding: 0; margin: 0;">Have an article that may be of interest to your colleagues? Why not <sharearticle style="color: #0063be; text-decoration: none; border-bottom: 1px dotted #0063be">share it</sharearticle> with us.</p>                    </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr><td colspan="3" style="border-top: 1px dashed #fa943e;padding: 0; margin: 0; font-size: 1px;height: 1px;">&nbsp;</td></tr>    
                        <tr>

                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 15px 0 5px; font-family: Georgia, serif;"  valign="top" align="left">
                                <h3 style="color:#fa943e; font-weight: bold; margin: 0; padding: 0; line-height: 13px; font-size: 15px;font-family: Verdana, Arial, sans-serif;">Forward to a friend</h3>
                            </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>

                            <td style="padding: 5px 0 15px 0; font-family: Verdana, Arial, sans-serif;" valign="top">            
                                <p style="line-height: 16px; font-family: Verdana, Arial, sans-serif; color:#fa943e;padding: 0; margin: 0;">Know someone who might be interested in the email? Why not <forwardtoafriend style="color: #0063be; text-decoration: none; border-bottom: 1px dotted #0063be">forward this email</forwardtoafriend> to them.</p>                    </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr>
                        <tr><td colspan="3" style="border-top: 1px dashed #fa943e;padding: 0; margin: 0; font-size: 1px;height: 1px;">&nbsp;</td></tr>    
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>

                            <td style="padding: 15px 0 5px 0;font-family: Helvetica, Arial, sans-serif;"  valign="top" align="left">
                                <h3 style="color:#fa943e; font-weight: bold; margin: 0; padding: 0; line-height: 13px; font-size: 15px;font-family: Verdana, Arial, sans-serif;">Unsubscribe</h3>
                            </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="11" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                            <td style="padding: 5px 0 15px 0;font-family: Verdana, Arial, sans-serif;" valign="top">            
                                <p style="line-height: 16px;font-family: Verdana, Arial, sans-serif; color:#fa943e;padding: 0; margin: 0;">Don’t want to receive these emails anymore. You can <unsubscribe style="color: #0063be; text-decoration: none; border-bottom: 1px dotted #0063be">unsubscribe</unsubscribe> instantly.</p>

                            </td>
                            <td width="7" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                        </tr>
                        <tr><td colspan="3" style="border-top: 1px dashed #fa943e;padding: 0; margin: 0; font-size: 1px;height: 1px;">&nbsp;</td></tr>    
                        </table>
                    </td>
                    <td width="412" valign="top" align="left" style="font-family: Georgia, serif; padding-bottom: 55px" bgcolor="#e3f5ff" class="content">
                        <table cellpadding="0" cellspacing="0" border="0"  style="color: #e3f5ff; font: normal 11px Georgia, serif; margin: 0; padding: 0;" width="412" bgcolor="#e3f5ff">
                        <tr>

                            <td width="20" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="20"></td>
                            <td style="padding: 10px 0 0; font-family: Georgia, serif;" align="left">            
                                <h2 style="color:#0063be; font-weight: bold; margin: 0; padding: 0; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">2011 ASCO summary</h2>
                                <h2 style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="controversies">Controversies in HER2 testing</a></h2>
                                <p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">
                                    Suspendisse potenti - Fusce eu ante in sapien vestibulum sagittis. Cras purus. Nunc rhoncus. <a href="#" style="color: #0063be; text-decoration: none; border-bottom: 1px dotted #0063be">Donec imperdiet</a>, nibh sit amet pharetra placerat, tortor purus condimentum lectus. Nest, qui odipid quate secaest ad maiorep elitia doloriatusa que natiis que et re es alia quo ommolor poreris ea apero dolore pro inus et ulpa conse dolorpos eum aute optat erepudis serume atiostrum simint. Vitat. Aquatur moluptur? Quibus alicilibus corrorit excepro magnisquas erovitiis aligniendi doluptu samendi officillecta nonsedi gnimoluptate pres et landem veliquat volum andis et vitatios earcimus nimaion sequis minient am voles a que eventem et maio beaquament maior alia coruptasitem et hiliam exerro inis remquat.<sup>1</sup><br>

Aquibus cume doluptat voluptae a ius sequo blacestium diti as quaesti oreperum et aut as et veribus parcien delluptat que quam inctust, volorro ipsunt. Raectas eum dolore estiunditas est laut odi debis raeptatem ellendi citissit, tem arionseditat eos recearum nonsecepudis dolor aut andit as dis rem. Et que laborepedi coresto odit, occus.</p>
                    <ul style="color: #0063be; margin: 0 0 0 10px; padding: 0 0 0 5px; line-height: 20px; font-size: 12px;font-family: Georgia, serif;">
                    <li style="padding: 0 0 5px; margin: 0;">Am sed ent autatur suntem veliqua ssimint ut ut exceatem voloribus, quam cusandamet eossitis essim harciatios iliae plit inctas de ea voluptatus excea consedi culpa dentiorum volectatur aut aut faceperum quam fugite porem quo bea velita corestis si nonet inctae consectota dolupta eptur</li>                                    
                    <li style="padding: 0 0 5px; margin: 0;">Quissit, cum et es eume et ut eveliquam quis ditam quis res ut fugia dolupta sandero di corate core dolo venienia sum que nos doluptatisti sunt volores</li> 
                    <li style="padding: 0 0 5px; margin: 0;">Nobis prendigent que labore sectem. Namendus atustiurias di cus necae explabo rernatur? Et por archilicae evenim excersp errovid min rem excesentia dolorum</li> 
                    <li style="padding: 0 0 5px; margin: 0;">Lique nusam et es eaque por aperore stinulpa quid mo officid ucietur rempor ad magniscident harum et eaquiatur recum ad eic tem in repelecearum corios minihil liquia</li> 
                    </ul>
                    <p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">Aliqui tem laborit magnatent ratiorem atese nume et aut evel etur, serum as dolum quia sinulpa coreper sperernam, con nemporerest intur accaborepro ma con presequi omniment eum eos as ut voluptas aut estorro vitissum iduciissunt es eturio cus nisimol uptaqui derum, et quo totae.<sup>2</sup><br> 

Borum non nos numque quaspel eaquate es es magnam quam ellesecto volorat mo delibea porpor accaest emporem nos corit eiciusa pisque dolorepro diorem et fugitio nsedis am faceptate dolore sae laut offici testrum, sum dolupta sundi ullia eumenimaxim fugia di cus et maio que none quiaectur sit velenimagnis reribustius serrora porro que omnis earum laborro berchic te consequiam, ut voluptat acerum latin praero evellor erferro reriossunt, omnimin nate exerit am voluptibus, eos dolland itatus accullente pratibus volliquae volorep erenducil ipsapero qui ventior ibustia sum qui simet abor ma dior sectorem. Nequia nonet es eaquiae dita alignias con plaborp ostiam restintio omniam elenihic tes non nullectota pore nimpos aceptatur?
                                </p>
                             </td>
                            <td width="25" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="25"></td>
                        </tr>
                        <tr>
                            <td width="20" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="20"></td>
                            <td style="padding: 10px 0 0;" align="left">            
                                <img src="images/SPHERE_Delegates.jpg" alt="Delegates" style="border: 5px solid #0063be;">
                            </td>

                            <td width="25" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="25"></td>
                        </tr>
                        <tr>
                            <td width="20" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="20"></td>
                            <td style="padding: 10px 0 10px; font-family: Georgia, serif; border-bottom: 1px dashed #0063be" align="left">            
<p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">
                                    Suspendisse potenti--Fusce eu <a href="#" style="color: #0063be; text-decoration: none; border-bottom: 1px dotted #0063be">ante in sapien</a> vestibulum sagittis.</p>

         <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #0063be"><a href="#top">back to top</a>
    <br>
                            
                            </td>
                            <td width="25" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="25" height="23"></td>
                        </tr>
                        <tr>
                            <td width="20" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="20"></td>
                            <td style="padding: 10px 0 10px; font-family: Georgia, serif; border-bottom: 1px dashed #0063be" align="left">            
                                <h2 style="color:#51652a; font-weight: normal; margin: 0; padding: 0; line-height: 24px; font-size: 17px;"><a name="breast">Breast cancer prevention and treatment</a></h2>

            
                                <p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">
                                    Suspendisse potenti--Fusce eu ante in sapien vestibulum sagittis. Am sed ent autatur suntem veliqua ssimint ut ut exceatem voloribus, quam cusandamet eossitis essim harciatios iliae plit inctas de ea voluptatus excea consedi culpa dentiorum volectatur aut aut faceperum quam fugite porem quo bea velita corestis si nonet inctae consectota dolupta eptur, sitatur? Quissit, cum et es eume et ut eveliquam quis ditam quis res ut fugia dolupta sandero di corate core dolo venienia sum que nos doluptatisti sunt volores tibus, to bla nobis prendigent que labore sectem. Namendus atustiurias di cus necae explabo rernatur? Et por archilicae evenim excersp errovid min rem excesentia dolorum lique nusam et es eaque por aperore stinulpa quid mo officid ucietur rempor ad magniscident harum et eaquiatur recum ad eic tem in repelecearum corios minihil liquia aliqui tem laborit magnatent ratiorem atese nume et aut evel etur, serum as dolum quia sinulpa coreper sperernam, con nemporerest intur accaborepro ma con presequi omniment eum eos as ut voluptas aut estorro vitissum iduciissunt es eturio cus nisimol uptaqui derum, et quo totae.<sup>3</sup> Borum non nos numque quaspel eaquate es es magnam quam ellesecto volorat mo delibea porpor accaest emporem nos corit eiciusa pisque dolorepro diorem et fugitio nsedis am faceptate dolore sae laut offici testrum, sum dolupta sundi ullia eumenimaxim fugia di cus et maio que none quiaectur sit velenimagnis reribustius serrora porro que omnis earum laborro berchic te consequiam, ut voluptat acerum latin praero evellor erferro reriossunt, omnimin nate exerit am voluptibus, eos dolland itatus accullente pratibus volliquae volorep erenducil ipsapero qui ventior ibustia sum qui simet abor ma dior sectorem. Nequia nonet es eaquiae dita alignias con plaborp ostiam restintio omniam elenihic tes non nullectota pore nimpos aceptatur.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 12px; text-align: right; color: #fa943e"><a href="#top">back to top</a>
    <br>
                            </td>
                            <td width="25" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="25"></td>

                        </tr>
                        <tr>
                            <td width="20" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="20"></td>
                          <td style="padding: 10px 0 10px; font-family: Georgia, serif; border-bottom: 0px dashed #0063be" align="left">            
                                <h2 style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 24px; font-size: 17px;"><a name="cases">Cases from SPHERE</a></h2>
                            <p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">Namendus atustiurias di cus necae explabo rernatur.<sup>4</sup> Et por archilicae evenim excersp errovid min rem excesentia dolorum lique nusam et es eaque por aperore stinulpa quid mo officid ucietur rempor ad magniscident harum et eaquiatur recum ad eic tem in repelecearum corios minihil liquia aliqui tem laborit magnatent ratiorem atese nume et aut evel etur, serum as dolum quia sinulpa coreper sperernam, con nemporerest intur accaborepro ma con presequi omniment eum eos as ut voluptas.
                               <p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">&nbsp;</p>
                                <img src="Images/HandE_2.jpg" width="367" height="295" style="border: 5px solid #0063be;">

                             <p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">&nbsp;</p>
                                <img src="Images/3plusminus_b_.jpg" width="367" height="295" style="border: 5px solid #0063be;">
                                </td>
                            <td width="25" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="25">
                             <p style="color:#0063be; font-weight: normal; margin: 0; padding: 0; line-height: 20px; font-size: 12px;">&nbsp;</p>                            </td>
                        </tr>
                        <tr>
                            <td width="20" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="20"></td>

                            <td style="padding: 10px 0 10px; font-family: Georgia, serif; border-bottom: 1px dashed #0063be" align="left">                   
                                
  <div>
  <div style="background: #fa943e; padding-left: 5px; padding-right: 5px; padding-top: 10px; padding-bottom: 5px; color: #FFF">
<h1 style="color: white; font: bold 16px Verdana, Arial, sans-serif; margin: 0; padding: 0; line-height: 20px;">SPHERE tips</h1>
<ol p style="font-size: 12px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; color: white;">
<li>Namendus atustiurias di cus necae explabo rernatur</li>
<li>Et por archilicae evenim excersp errovid min rem excesentia dolorum lique nusam et es eaque por aperore</li>
<li>Stinulpa quid mo officid ucietur rempor ad magniscident harum et eaquiatur recum</li>
<li>Ad eic tem in repelecearum corios minihil liquia aliqui tem laborit magnatent ratiorem atese nume et aut evel etur<sup>5</sup></li>

<li>Serum as dolum quia sinulpa coreper sperernam, con nemporerest intur accaborepro ma con presequi omniment eum eos as ut voluptas</li>
</ol>
    </div>
        <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 30px; text-align: right; color: #fa943e"><a href="#top">back to top</a>
    <br>
                            
                             </td>
                            <td width="25" style="font-size: 1px; line-height: 1px;"><img src=images/spacer.gif" alt="space" width="25"></td>
                        </tr>
                        <tr>

                            <td width="20" style="font-size: 1px; line-height: 1px;"><img src="images/spacer.gif" alt="space" width="20"></td>
                            <td style="padding: 10px 0 0; border-bottom: 1px dashed #0063be" align="left">    
                            <ol p style="font-size: 9px; font-family: Verdana, Geneva, sans-serif; line-height: 12px; color: #0063be;">
<li>Namendus atustiurias di cus necae explabo rernatur</li>
<li>Et por archilicae evenim excersp errovid min rem excesentia dolorum lique nusam et es eaque por aperore</li>
<li>Stinulpa quid mo officid ucietur rempor ad magniscident harum et eaquiatur recum</li>
<li>Ad eic tem in repelecearum corios minihil liquia aliqui tem laborit magnatent ratiorem atese nume et aut evel etur</li>
<li>Serum as dolum quia sinulpa coreper sperernam, con nemporerest intur accaborepro ma con presequi omniment eum eos as ut voluptas</li>
</ol>        
                            </td>

                            <td width="25" style="font-size: 1px; line-height: 1px;"><img src="images/spacer.gif" alt="space" width="25"></td>
                        </tr>
                        </table>    
                    </td>
                    <td width="4" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                    
                  </tr>
                 <tr>
                      <td style="font-size: 1px; height: 10px; line-height: 1px;" height="10" colspan="4"><img src=images/spacer.gif" alt="space" width="25" height="1"></td>
                  </tr>

                </table><!-- body -->
                <table cellpadding="0" cellspacing="0" border="0" align="center" width="640" style="font-family: Georgia, serif; line-height: 10px;" bgcolor="#fa943e" class="footer">
                  
                  <tr>
                    <td bgcolor="white" align="center" style="padding: 15px 0 15px; line-height: 1.2; font-size: 10px; color:#fa943e; margin: 0; font-family: Georgia, serif; " valign="top">                 
                        <p style="margin: 0; padding-left: 10; padding-right: 10;text-align: left;color:#0063be; font-family: Verdana, Arial, sans-serif;">The SPHERE Program is a dynamic space, with more modules, resources and information to be added over the coming months. As part of the future of The SPHERE Program, the website managers would like to email all registered users with information and updates, such as new modules, congress updates and examples of best practice relevant to your professional development, shared via newsletters and other digital communications. If you do not wish to be contacted for this purpose please reply to this email with ‘DO NOT CONTACT’ in the subject line.<br>

Roche Products Pty Limited. ABN 70 000 132 865. 4–10 Inman Road, Dee Why, NSW 2099. Copyright © 2011 by Roche Products Pty Limited. All rights reserved.
MN???????? HI/6570137/Aug-2011 </p>
                    <img src="Images/rolo_10pSml.jpg" width="640" height="80" alt="Roche"></td>
                  </tr>

                </table><!-- footer-->
              </td>
        </tr>
    </table>
  </body>
</html>

Thanks very much, in advance.

roshodgekiss roshodgekiss, 6 years ago

HI AliGee, welcome to the forums! I've taken a quick look at your code and apart from a few unclosed tags, it looks fairly solid. Is there a chance you could post a screenshot and tell us which email clients you can't see the background image in? Clients like Gmail and Outlook are especially intolerant of background images, however there  are workarounds like this one.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
AliGee AliGee, 6 years ago

Hi roshodgekiss
Thanks for getting back, I think Jarrod is also taking a look at this but in case you guys don't mind sharing the love...
I've noticed now that the background grad which is .png is loading it just isn't fading into the background solid colour.
I suspect this is because I've added another table cell under the header banner which now makes my design a lot deeper than the original Nature template it is based on.
http://farm7.static.flickr.com/6135/5980334131_de9d147ae5_m.jpg

So you can see it currently doesn't show all the grad instead it abruptly cuts into the darker blue...

Any suggestions much appreciated!
Thanks

roshodgekiss roshodgekiss, 6 years ago

Hi again, Jarrod responded to your email earlier and his recommendations look pretty sound to me. For the benefit of other readers on this thread, his response was:

1. The background gradient image in our "Nature" template doesn't load, instead it's a solid green background.
2. Your template has a solid blue background the entire way, so is therefore consistent with the Nature template in Outlook 2007.

I'd recommend trying a smaller background image (in height) and giving it a no-repeat value. It seems there's something limiting its height at the moment, so smaller will be better. Once the image finishes, the background color #0063be will flesh out the rest of the space.

Cheers, AliGee! Hope we've been able to help out with this one.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
AliGee AliGee, 6 years ago

Hi roshodgekiss
Jarrod and yourself have been a great help, thanks!
May be back in touch next week...
Cheers!

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free