White lines in Outlook – Headings changing colour on iPhone

Hi All

Latest campaign is nearly ready to go, just 3 last problems I wonder if someone could help me with please?

1) In Outlook 2010 I have a white line appearing between the header image and the images (buttons) in the next row, on another colleagues machine (also running Outlook 2010) the white line appears between the buttons and the image in the next row down? How can I stop this happening?

2) On iPhone and iPad I have a heading style which should be red, these devices render the headings in a nice shade of Microsoft blue and add an underline? But they are not links, they are however linked to from text in the sidebar above them, is this where the problem lies?

and finally, annoying but not critical

3) I have a sidebar on the right which sits in one cell and I have another blank cell beneath it, I've applied rowspan="2" to the cell to its left and have put a   in the blank cell beneath the side bar but the side bar keeps extending to the full height of the cell on the left?
Do I need to use a spacer image – that I'm not supposed to – to hold the integrity of the bottom cell?

Thanks for your help!

PS I can post the code if you need me to.

roshodgekiss roshodgekiss, 5 years ago

Hi AliGee, could you kindly post your code here? That will make it much easier for us here to recommend fixes :)

Regarding 3, it's okay to use spacer images from time to time. Designs can look really poor when images are blocked and there are lots of tiny red x marks everywhere, but to use a few in these tricky situations isn't a crime. Anyway, looking forward to seeing your code!


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

Hi roshodgekiss

In addition to the problems in my first post I'm now also noticing when the email is forwarded to a friend the text style of the unsubscribe link becomes black and bold even though this is styled in exactly the same way as the other 2 links – is this a CM tag issue?

here's 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Business</title>
</head>

<body marginheight="0" class="body" topmargin="0" marginwidth="0" style="padding: 0; font-family: Arial, Helvetica, sans-serif; margin: 0; background: #e6eaf0 url('images/body-bg.jpg') repeat;" leftmargin="0">
<!--100% body table-->
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
  <tr>
    <th colspan="2" style="background: #026d8d" scope="col"><webversion style="color: #4ac6d1; font-family: Verdana, Geneva, sans-serif; font-weight: normal; line-height: 20px; font-size: 10px; text-align: center">view in browser</webversion> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<forwardtoafriend style="color: #4ac6d1; font-family: Verdana, Geneva, sans-serif; font-weight: normal; line-height: 20px; font-size: 10px; text-align: center">share with a colleague</forwardtoafriend> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<unsubscribe style="color: #4ac6d1; font-family: Verdana, Geneva, sans-serif; font-weight: normal; line-height: 20px; font-size: 10px; text-align: center">unsubscribe</unsubscribe></th>
  </tr>
  <tr>
    <td colspan="2">
    <img src="Images/Header-bg2.jpg" width="600" height="113" alt="Nucleus Group" />
    </td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/ButtonFiller-left2.jpg" width="64" height="82" align="left" /><a href="http://www.healthinteractions.com" target="_blank"><img src="Images/HI-button2.jpg" alt="Health Interactions link" width="226" height="82" align="left" border="0"/></a><img src="Images/ButtonFiller-center2.jpg" alt="" width="23" height="82" align="left" /><a href="http://www.meditechmedia.com" target="_blank"><img src="Images/MTM-button.jpg" alt="MediTech Media link" width="225" height="82" align="left" border="0"/></a><img src="Images/ButtonFiller-right.jpg" alt="" width="62" height="82" align="left" /></td>
  </tr>
  <tr>
   <td colspan="2">
    <img src="Images/UnderButtonTitle2.jpg" width="600" height="146" alt="Passionate about medical education?" /></td>
  </tr>
    <tr>
    <td width="600" rowspan="2" valign="top" >
    <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 10px 10px 0 10px; line-height: 20px; font-size: 12px; vertical-align: top"><a name="top">The</a> <b><a href="http://www.nucleusholdings.com" target="_blank" style="padding: 0; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #137b9a; text-decoration: none; margin: 0;">Nucleus Group</a></b> of companies – including MediTech Media and Health Interactions – integrate scientific credibility, commercial insight and creativity to deliver innovative medical education and communication solutions.
    &nbsp;<br />
    &nbsp;<br />
      We are a team of highly talented individuals drawn from a range of disciplines and with experience across a broad spectrum of therapy areas. Our passion for medical science and skilled communication ensures the consistent high quality of our work with our local, regional and global clients.
    &nbsp;<br />
      &nbsp;<br />
      For our clients the results are tailored solutions that meet their healthcare communications needs – ensuring the right information reaches the right audience at the right time.<br />
      &nbsp;<br />
      We enjoy what we do and are proud of our accomplishments, including being a <b>PRIME Award finalist</b> (Education category) in 2011.
    </p>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">&nbsp;</p>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: bold; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;"> Want to know more? </p>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;"> Contact <a href="mailto:Cathryn.Berry@nucleusholdings.com" style="padding: 0; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #137b9a; text-decoration: none; margin: 0; border-bottom: 1px dotted #137b9a">Cathryn Berry</a>
        t + 61 2 8070 6810 (direct line)<br>
        <br>
        <img src="Images/ForwardMail.png" width="56" height="34" alt="ForwardMail" align="left"/><br>
        <br>
        <forwardtoafriend style="padding: 0; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #137b9a; text-decoration: none; margin: 0;">Click here to forward this email to a colleague.</forwardtoafriend></b>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">&nbsp;</p>        <br>
        </p>
        </td>
    <td width="180" align="left" valign="top" style="background: #b3d7df; padding: 10px; font-family: Georgia, serif; border-bottom: 0px dashed #0063be"><p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: bold; margin: 0; line-height: 16px; font-size: 10px;">Built on a foundation of medical writing and project management, we offer a full range of services, from strategic consultancy to tactical delivery.<br/></p>
<h4 style="color:#bb1313; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#strategy" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Strategic Consultancy</a></h4>
    <h4 style="color:#bb1313; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#scientific" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Scientific Consultancy</a></h4>
    <h4 style="color:#bb1313; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#professional" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Professional Relations</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#meded" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Medical Education</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#scied" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Scientific Editorial Services</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#consumer" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Consumer Health</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#conferencing" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Conferencing</a></h4>    
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#graphic" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Graphic Design</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#exhibitions" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Exhibitions and AV</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#multimedia" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Multimedia and Web</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#animation" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Animation and Video</a></h4>
    <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#global" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Global Presence</a></h4>
    <img src="Images/Pointy.png" width="28" height="30" alt="pointy" align="right"/></td>
  </tr>
    <tr>
      <td width="180" height="20" align="left" valign="top" style="background: white; padding: 10px; font-family: Georgia, serif"><img src="images/spacer.gif" alt="space" width="20"height="20"></td>
  </tr>
  <tr>
    <td width="600"colspan="2"><img src="Images/StratCon.jpg" width="145" height="135" alt="Strategic consultancy" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="strategy">Strategic Consultancy</a></h2>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Through analysis of business needs and opportunities within the market, we develop strategies to help our clients create a competitive advantage for their brands.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
    <br>
      </td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/SciCon.jpg" width="145" height="134" alt="Scientific Consultancy" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="scientific">Scientific Consultancy</a></h2> 
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Uniting medical and scientific expertise with an intimate understanding of the marketplace, we provide scientific advice, evaluation and analyses of data to assess the positioning and impact of a product within the market.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
      </td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/PR.jpg" width="145" height="135" alt="PR" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="professional">Professional Relations</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Our reputation for outstanding medical and scientific credibility, professionalism and integrity makes us a trusted partner, and point of contact and liaison with your key opinion leaders, healthcare professionals and suppliers, from inception to completion of a project.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/MedEd.jpg" width="145" height="135" alt="Med Ed" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="meded">Medical Education</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">We provide wide-ranging medical education products and services built from a firm foundation of in-depth scientific understanding, clear communications and strategic vision. We know how to talk to your varied audiences in their own language.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/SciEd.jpg" width="145" height="136" alt="Scientific Editorial" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="scied">Scientific Editorial Services</a></h2>
    <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Combining strategic support and understanding of the market, we provide high quality editorial services from technical medical writing, promotional materials to speaker presentation support.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
    </td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/ConHeal.jpg" width="145" height="134" alt="Consumer Health" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="consumer">Consumer Health</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Combining scientific expertise and marketing experience in the areas of retail pharmacy, consumer healthcare and over-the-counter advertising, we deliver a range of innovative and creative services that provide solutions for the diverse needs of our consumer brands.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Conf.jpg" width="145" height="136" alt="Conferencing" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="conferencing">Conferencing</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">We provide a comprehensive conferencing service for meetings of all sizes. From programme planning and speaker and delegate logistics, to venue sourcing, contract negotiation and onsite management, we can manage your meeting from conception to close.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Graphic.jpg" width="145" height="134" alt="Graphic Design" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="graphic">Graphic Design</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Combining imagination and technical skills, we offer design solutions that are exciting and memorable, and combine an understanding of therapy area, marketing needs and audience.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Exhib.jpg" width="145" height="136" alt="Exhibitions and A V" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="exhibitions">Exhibitions and AV</a></h2>
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">We have a wealth of experience in designing and project managing creative and innovative stands and stage sets that ‘stand out from the crowd’. We facilitate effective communication between our clients and their target audience by creating exciting environments.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Multimedia.jpg" width="145" height="135" alt="Multimedia" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="multimedia">Multimedia and Web</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 145px; line-height: 20px; font-size: 12px;">Our team of multimedia experts has the talent and vision to apply state-of-the-art technologies to a broad range of medical communications requirements. Outputs include interactive multimedia, brand or therapy area websites, e-learning programmes, and iPad/iPhone/Android apps.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Anim.jpg" width="145" height="136" alt="Animation and video" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="animation">Animation and Video</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Our team of expert animators harnesses the power of cutting edge systems to deliver products that combine artistry with accuracy, and immerse your audiences in engaging and informative experiences to deliver your messages in memorable ways.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a>
</td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Global.jpg" width="145" height="134" alt="Global presence" align="left"/>
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;"><a name="global">Global Presence</a></h2> 
<p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">With offices in 12 locations across the globe, we have experts and teams at the forefront of global medical communications: we can be where you need us to be, when you need us, 24 hours a day.</p>
    <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a> 
</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 8px; text-align:center"></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Footer-bg.jpg" width="600" height="84" alt="footer" /></td>
  </tr>
  <tr>
  </tr>
</table> 
</body>
</html>

Thanks!

AliGee AliGee, 5 years ago

Hi
A couple more observations about the table breaking and link style change.

I notice that the table breaks when using the forward to a friend CM tag, but is fine if it is received from the original campaign – this is on iPad. The table is always broken when viewing in Outlook 2010.

I've just realised that unsubscribe link changes from my original style attributes because, of course, the recipient of a forwarded email is not subscribed. D'oh, sorry, my bad.

Thanks again, all help welcomed!

roshodgekiss roshodgekiss, 5 years ago

Hi AliGee, I think I've sorted out 95% of these issues. One things you should look out for in the future is invalid code. Using a validator like Fractal to make sure you've closed your tags properly, etc. can iron out a lot of issues. Also, feel free to use CSS stylesheets, as CSS styles are inlined on import by our app, anyway :)

1) In Outlook 2010 I have a white line appearing between the header image and the images (buttons) in the next row, on another colleagues machine (also running Outlook 2010) the white line appears between the buttons...

I've added img { display: block; } to the code, as this often prevents gaps appearing between images. Second thought is that it may be the align="left" attributes, as sometimes these can introduce spaces. If it isn't fixed, try removing both the align="left" and display: block; from the styles and see if that helps.

2) On iPhone and iPad I have a heading style which should be red, these devices render the headings in a nice shade of Microsoft blue and add an underline? But they are not links, they are however linked to from text in the sidebar above them, is this where the problem lies?

Most probably yes. I've moved the <a> tags outside of the <h2> (which isn't valid code, I know), but if it's still an issue, re-swap the tags and apply the h2 styles to the <a> tags instead.

3) I have a sidebar on the right which sits in one cell and I have another blank cell beneath it, I've applied rowspan="2" to the cell to its left and have put a &nbsp; in the blank cell beneath the side bar but the side bar keeps extending to the full height of the cell on the left?

I've put that sidebar column into a new 1x1 table. This is the best method for having a sidebar not extend the entire height of the container.

In addition to the problems in my first post I'm now also noticing when the email is forwarded to a friend the text style of the unsubscribe link becomes black and bold even though this is styled in exactly the same way as the other 2 links – is this a CM tag issue?

It's best to just apply a CSS style to color these links.

I notice that the table breaks when using the forward to a friend CM tag, but is fine if it is received from the original campaign – this is on iPad. The table is always broken when viewing in Outlook 2010.

Could you kindly post a screenshot? I'd be curious to see what's happening when you forward on the email.

Anyway, here's the end result with 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Business</title>
<style type="text/css">
td.headerlinks a, td.headerlinks a:visited {
    color: #4ac6d1;
}
img {
    display: block;
}
</style>
</head>
<body style="padding: 0; font-family: Arial, Helvetica, sans-serif; margin: 0; background: #e6eaf0 url('images/body-bg.jpg') repeat;">
<!--100% body table-->
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
  <tr>
    <th colspan="2" style="background: #026d8d" scope="col" class="headerlinks"><webversion style="color: #4ac6d1; font-family: Verdana, Geneva, sans-serif; font-weight: normal; line-height: 20px; font-size: 10px; text-align: center">view in browser</webversion>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <forwardtoafriend style="color: #4ac6d1; font-family: Verdana, Geneva, sans-serif; font-weight: normal; line-height: 20px; font-size: 10px; text-align: center">share with a colleague</forwardtoafriend>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <unsubscribe style="color: #4ac6d1; font-family: Verdana, Geneva, sans-serif; font-weight: normal; line-height: 20px; font-size: 10px; text-align: center">unsubscribe</unsubscribe></th>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Header-bg2.jpg" width="600" height="113" alt="Nucleus Group" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/ButtonFiller-left2.jpg" width="64" height="82" align="left" /><a href="http://www.healthinteractions.com" target="_blank"><img src="Images/HI-button2.jpg" alt="Health Interactions link" width="226" height="82" align="left" border="0"/></a><img src="Images/ButtonFiller-center2.jpg" alt="" width="23" height="82" align="left" /><a href="http://www.meditechmedia.com" target="_blank"><img src="Images/MTM-button.jpg" alt="MediTech Media link" width="225" height="82" align="left" border="0"/></a><img src="Images/ButtonFiller-right.jpg" alt="" width="62" height="82" align="left" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/UnderButtonTitle2.jpg" width="600" height="146" alt="Passionate about medical education?" /></td>
  </tr>
  <tr>
    <td width="420" valign="top" ><p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 10px 10px 0 10px; line-height: 20px; font-size: 12px; vertical-align: top"><a name="top">The</a> <strong><a href="http://www.nucleusholdings.com" target="_blank" style="padding: 0; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #137b9a; text-decoration: none; margin: 0;">Nucleus Group</a></strong> of companies – including MediTech Media and Health Interactions – integrate scientific credibility, commercial insight and creativity to deliver innovative medical education and communication solutions.
        &nbsp;<br />
        &nbsp;<br />
        We are a team of highly talented individuals drawn from a range of disciplines and with experience across a broad spectrum of therapy areas. Our passion for medical science and skilled communication ensures the consistent high quality of our work with our local, regional and global clients.
        &nbsp;<br />
        &nbsp;<br />
        For our clients the results are tailored solutions that meet their healthcare communications needs – ensuring the right information reaches the right audience at the right time.<br />
        &nbsp;<br />
        We enjoy what we do and are proud of our accomplishments, including being a <strong>PRIME Award finalist</strong> (Education category) in 2011. </p>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">&nbsp;</p>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: bold; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;"> Want to know more? </p>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;"> Contact <a href="mailto:Cathryn.Berry@nucleusholdings.com" style="padding: 0; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #137b9a; text-decoration: none; margin: 0; border-bottom: 1px dotted #137b9a">Cathryn Berry</a> t + 61 2 8070 6810 (direct line)<br />
        <br />
        <img src="Images/ForwardMail.png" width="56" height="34" alt="ForwardMail" align="left"/><br />
        <br />
        <forwardtoafriend style="padding: 0; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #137b9a; text-decoration: none; margin: 0;">Click here to forward this email to a colleague.</forwardtoafriend>
      </p>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">&nbsp;</p>
      <br /></td>
    <td width="180" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="180"  valign="top" style="background: #b3d7df; padding: 10px; font-family: Georgia, serif; border-bottom: 0px dashed #0063be"><p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: bold; margin: 0; line-height: 16px; font-size: 10px;">Built on a foundation of medical writing and project management, we offer a full range of services, from strategic consultancy to tactical delivery.<br/>
            </p>
            <h4 style="color:#bb1313; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#strategy" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Strategic Consultancy</a></h4>
            <h4 style="color:#bb1313; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#scientific" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Scientific Consultancy</a></h4>
            <h4 style="color:#bb1313; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#professional" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Professional Relations</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#meded" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Medical Education</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#scied" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Scientific Editorial Services</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#consumer" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Consumer Health</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#conferencing" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Conferencing</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#graphic" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Graphic Design</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#exhibitions" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Exhibitions and AV</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#multimedia" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Multimedia and Web</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#animation" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Animation and Video</a></h4>
            <h4 style="color:#fa943e; font-family: Verdana, Geneva, sans-serif; font-size: 10px;line-height: 18px; margin: 0; font-weight: normal"><a href="#global" style="color: #137b9a; text-decoration: none; border-bottom: 1px dotted #137b9a">Global Presence</a></h4>
            <img src="Images/Pointy.png" width="28" height="30" alt="pointy" align="right"/></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="600"colspan="2"><img src="Images/StratCon.jpg" width="145" height="135" alt="Strategic consultancy" align="left"/> <a name="strategy">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Strategic Consultancy</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Through analysis of business needs and opportunities within the market, we develop strategies to help our clients create a competitive advantage for their brands.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/SciCon.jpg" width="145" height="134" alt="Scientific Consultancy" align="left"/> <a name="scientific">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Scientific Consultancy</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Uniting medical and scientific expertise with an intimate understanding of the marketplace, we provide scientific advice, evaluation and analyses of data to assess the positioning and impact of a product within the market.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/PR.jpg" width="145" height="135" alt="PR" align="left"/> <a name="professional">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Professional Relations</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Our reputation for outstanding medical and scientific credibility, professionalism and integrity makes us a trusted partner, and point of contact and liaison with your key opinion leaders, healthcare professionals and suppliers, from inception to completion of a project.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/MedEd.jpg" width="145" height="135" alt="Med Ed" align="left"/> <a name="meded">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Medical Education</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">We provide wide-ranging medical education products and services built from a firm foundation of in-depth scientific understanding, clear communications and strategic vision. We know how to talk to your varied audiences in their own language.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/SciEd.jpg" width="145" height="136" alt="Scientific Editorial" align="left"/> <a name="scied">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Scientific Editorial Services</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Combining strategic support and understanding of the market, we provide high quality editorial services from technical medical writing, promotional materials to speaker presentation support.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/ConHeal.jpg" width="145" height="134" alt="Consumer Health" align="left"/> <a name="consumer">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Consumer Health</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Combining scientific expertise and marketing experience in the areas of retail pharmacy, consumer healthcare and over-the-counter advertising, we deliver a range of innovative and creative services that provide solutions for the diverse needs of our consumer brands.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Conf.jpg" width="145" height="136" alt="Conferencing" align="left"/> <a name="conferencing">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Conferencing</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">We provide a comprehensive conferencing service for meetings of all sizes. From programme planning and speaker and delegate logistics, to venue sourcing, contract negotiation and onsite management, we can manage your meeting from conception to close.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Graphic.jpg" width="145" height="134" alt="Graphic Design" align="left"/> <a name="graphic">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Graphic Design</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Combining imagination and technical skills, we offer design solutions that are exciting and memorable, and combine an understanding of therapy area, marketing needs and audience.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Exhib.jpg" width="145" height="136" alt="Exhibitions and A V" align="left"/> <a name="exhibitions">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Exhibitions and AV</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">We have a wealth of experience in designing and project managing creative and innovative stands and stage sets that ‘stand out from the crowd’. We facilitate effective communication between our clients and their target audience by creating exciting environments.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Multimedia.jpg" width="145" height="135" alt="Multimedia" align="left"/> <a name="multimedia">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Multimedia and Web</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 145px; line-height: 20px; font-size: 12px;">Our team of multimedia experts has the talent and vision to apply state-of-the-art technologies to a broad range of medical communications requirements. Outputs include interactive multimedia, brand or therapy area websites, e-learning programmes, and iPad/iPhone/Android apps.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Anim.jpg" width="145" height="136" alt="Animation and video" align="left"/> <a name="animation">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Animation and Video</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">Our team of expert animators harnesses the power of cutting edge systems to deliver products that combine artistry with accuracy, and immerse your audiences in engaging and informative experiences to deliver your messages in memorable ways.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Global.jpg" width="145" height="134" alt="Global presence" align="left"/> <a name="global">
      <h2 style="color:#bb1313; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 24px; font-size: 17px; font-family: Verdana, Arial, sans-serif;">Global Presence</h2>
      </a>
      <p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 12px;">With offices in 12 locations across the globe, we have experts and teams at the forefront of global medical communications: we can be where you need us to be, when you need us, 24 hours a day.</p>
      <p style="font-size: 10px; font-family: Verdana, Geneva, sans-serif; line-height: 20px; text-align: right; color: #bb1313; padding-right: 10px"><a href="#top" style="color: #137b9a">back to top</a></p></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><p style="color:#137b9a; font-family: Verdana, Geneva, sans-serif; font-weight: normal; margin: 0; padding: 0 10px 0 10px; line-height: 20px; font-size: 8px; text-align:center"></p></td>
  </tr>
  <tr>
    <td colspan="2"><img src="Images/Footer-bg.jpg" width="600" height="84" alt="footer" /></td>
  </tr>
</table>
</body>
</html>

Let me know if you come across any further issues, but hopefully it's smooth sailing from here :)


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

@Ros!
Once again you show your expertise! Thanks!

roshodgekiss roshodgekiss, 5 years ago

Hey Frederick! Always happy to do my bit :) Keep up the awesome yourself!


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

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