Lotus Notes 8.x ignoring font styles

I tested this email on CM's checker and it all looked fine but sent to the client and it looks like his Lotus Notes (v8.x) doesn't like the way I've styled my fonts. It also doesn't seem to center the email, infact its pretty much ignored everything.

Clients screenshot

http://www.popcornbox.com/clientdownloads/swan/lotus.jpg

My HTML is all inline.

Code is below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Swan - Happy Christmas</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor='#333333'>
<table width="100%" cellpadding="10" cellspacing="0" bgcolor='#333333'>
<tr>
<td width="600" valign="top" align="center">
<table width="600" cellpadding="10" cellspacing="0" align="center">
<tr>
<td width="600" style="background-color:#333333;border:0px" align="center"><center><a href="#"><img align="top" src="xmas_card.jpg" width="600" height="550" border="0" alt="Swan Christmas Video"></a></center></td>
</tr>
</table>
<table width="600" cellpadding="10" cellspacing="0" bgcolor="#333333" align="center">
<tr>
<td width="600" bgcolor="#333333" valign="top" style="font-size:12px;color:#999999;line-height:150%;font-family:arial,verdana;text-align:center;" align="center">
<p><span style="font-size:24px;font-weight:bold;color:#ffffff;font-family:arial,verdana;">Merry Christmas and a Happy New Year</span></p>
<p><span style="font-size:14px;font-weight:bold;color:#ffffff;font-family:arial,verdana;">Thank You for your support in 2009</span></p>
<p><span style="font-size:14px;font-weight:bold;color:#999999;font-family:arial,verdana;">We have made a donation to <a style="font-size:14px;font-weight:bold;color:#cccccc;font-family:arial,verdana;text-decoration:none;" href="http://www.helpforheroes.org.uk/">Help for Hero's</a> on your behalf this Christmas</span></p>
<p>Registered Charity number 1120920<br/><a style="font-size:12px;color:#cccccc;font-family:arial,verdana;text-decoration:none;" href="#">www.houseofswan.com</a> | 01494 556279</p>
<p><forwardtoafriend style="font-size:12px;font-weight:bold;color:#cccccc;font-family:arial,verdana;text-decoration:none;">Forward to a friend</forwardtoafriend></p>
<p>Having problems viewing this email? Click <webversion style="font-size:12px;color:#cccccc;font-family:arial,verdana;text-decoration:none;"> here</webversion>. Don't want to hear from us again? Click <unsubscribe style="font-size:12px;color:#cccccc;font-family:arial,verdana;text-decoration:none;">here</unsubscribe></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Screenshot of how it should render

http://www.popcornbox.com/clientdownloads/swan/mail.jpg

Any help would be greatly appreciated.

Thanks in advance

fyredefyre fyredefyre, 7 years ago

Your code looks ok, but in the case of Lotus Notes, I'd try breaking your email up into seperate cells and adding the styles within the cell (TD tag) rather than using span tags and see how you go.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
BThies BThies, 7 years ago

Try this instead (just a few tweaks)...

<!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>Swan - Happy Christmas</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#333333">
<table width="100%" cellpadding="10" cellspacing="0" border="0" bgcolor="#333333">
  <tr>
    <td>
        <table width="600" border="0" cellpadding="10" cellspacing="0" align="center">
            <tr>
              <td width="600" style="background-color:#333333;" align="center">
                <a href="#"><img align="top" src="xmas_card.jpg" width="600" height="550" border="0" alt="Swan Christmas Video" /></a>
             </td>
        </tr>
      </table>
      <table width="600" cellpadding="10" cellspacing="0" border="0" bgcolor="#333333" align="center">
        <tr>
          <td width="600" bgcolor="#333333" valign="top" style="font-size:12px;color:#999999;line-height:150%;font-family:arial,verdana;text-align:center;" align="center"><p><span style="font-size:24px;font-weight:bold;color:#ffffff;font-family:arial,verdana;">Merry Christmas and a Happy New Year</span></p>
            <p><span style="font-size:14px;font-weight:bold;color:#ffffff;font-family:arial,verdana;">Thank You for your support in 2009</span></p>
            <p><span style="font-size:14px;font-weight:bold;color:#999999;font-family:arial,verdana;">We have made a donation to <a style="font-size:14px;font-weight:bold;color:#cccccc;font-family:arial,verdana;text-decoration:none;" href="http://www.helpforheroes.org.uk/">Help for Hero's</a> on your behalf this Christmas</span></p>
            <p>Registered Charity number 1120920<br/>
              <a style="font-size:12px;color:#cccccc;font-family:arial,verdana;text-decoration:none;" href="#">www.houseofswan.com</a> | 01494 556279</p>
            <p>
              <forwardtoafriend style="font-size:12px;font-weight:bold;color:#cccccc;font-family:arial,verdana;text-decoration:none;">Forward to a friend</forwardtoafriend>
            </p>
            <p>Having problems viewing this email? Click
              <webversion style="font-size:12px;color:#cccccc;font-family:arial,verdana;text-decoration:none;"> here</webversion>. Don't want to hear from us again? Click <unsubscribe style="font-size:12px;color:#cccccc;font-family:arial,verdana;text-decoration:none;">here</unsubscribe>.</p>
          </td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Seemed to appear just fine in Notes 8 and everything else.


Brian Thies
Professional Email Developer
Thies Publishing
Roscoe, 7 years ago

Thanks for the code Brian, still no joy with the client....

BThies BThies, 7 years ago

If that's the case, then I'd say it's something on the client's side that's stripping out the CSS (firewall, anti-virus software, server e-mail configuration, etc.).

Can you get the client to "view source" on the e-mail, save, and send back to you?  This way you'll see what was removed when it hit their side.


Brian Thies
Professional Email Developer
Thies Publishing
Roscoe, 6 years ago

Thanks for your help Brain, I think we will have to go with what we have... I tried using <font="" face="" size=""> which might work with a bit more playing, if there were time.

BThies BThies, 6 years ago

Give this a whirl and see what happens.

<!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>Swan - Happy Christmas</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#333333">
<table width="100%" cellpadding="10" cellspacing="0" border="0" bgcolor="#333333">
  <tr>
    <td>
        <table width="600" border="0" cellpadding="10" cellspacing="0" align="center">
            <tr>
              <td width="600" bgcolor="333333" align="center">
                <a href="#"><img align="top" src="xmas_card.jpg" width="600" height="550" border="0" alt="Swan Christmas Video" /></a>
             </td>
        </tr>
      </table>
      <table width="600" cellpadding="10" cellspacing="0" border="0" bgcolor="#333333" align="center">
        <tr>
          <td width="600" bgcolor="#333333" valign="top" align="center">
          <div><font size="2">&nbsp;</font></div>
          <div align="center"><font size="5" face="arial,verdana" color="#FFFFFF"><strong>Merry Christmas and a Happy New Year</strong></font></div> 
          <div><font size="2">&nbsp;</font></div>
          <div align="center"><font size="3" face="arial,verdana" color="#FFFFFF"><strong>Thank you for your support in 2009</strong></font></div>
          <div><font size="2">&nbsp;</font></div>
          <div align="center"><font size="3" face="arial,verdana" color="#999999"><strong>We have made a donation to </strong></font><a style="text-decoration:none;" href="http://www.helpforheroes.org.uk/"><font size="3" face="arial,verdana" color="#CCCCCC"><strong>Help for Hero's </strong></font></a><font size="3" face="arial,verdana" color="#999999"><strong>on your behalf this Christmas</strong></font></div>     
          <div><font size="2">&nbsp;</font></div>          
          <div align="center"><font size="2" face="arial,verdana" color="#FFFFFF">Registered Charity number 1120920</font></div>
          <div align="center"><a style="text-decoration:none;" href="http://www.houseofswan.com/"><font size="2" face="arial,verdana" color="#CCCCCC">www.houseofswan.com </font></a><font size="2" face="arial,verdana" color="#FFFFFF">| 01494 556279</font></div>
          <div><font size="4">&nbsp;</font></div>    
          <div><forwardtoafriend style="text-decoration:none;"><font size="2" face="arial,verdana" color="#CCCCCC"><strong>Forward to a friend</strong></font></forwardtoafriend></div>              
          <div><font size="4">&nbsp;</font></div>   
          <div><font size="2" face="arial,verdana" color="#FFFFFF">Having problems viewing this email? Click </font><webversion style="text-decoration:none;"><font size="2" face="arial,verdana" color="#CCCCCC">here</font></webversion><font size="2" face="arial,verdana" color="#FFFFFF">. Don't want to hear from us again? Click </font><unsubscribe style="text-decoration:none;"><font size="2" face="arial,verdana" color="#CCCCCC">here</font></unsubscribe><font size="2" face="arial,verdana" color="#FFFFFF">.</font></div>
          <div><font size="4">&nbsp;</font></div>           
          </td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
jmp909, 6 years ago

this is the best technique i have used...

<font face="whatever" size="whatever" color="'#whatever">some text with <a href="whatever" style="color:#whatever" text-decoration:underline;><u><font face="whatever" size="whatever" color="#whatever">a link inside</font></u></a> of it </font>

it's long winded but you'll get a high consistency rate across both cross-browser web & desktop email clients....

successful desktop platforms for this technique: Lotus Notes, Outlook 2007, Outlook 2003, Outlook Express, Thunderbird, Eudora, Pegasus, Entourage (mac), iPhone, Apple Mail
successful web platforms (across IE, FF and Chrome).. Hotmail, Gmail, Yahoo, AOL, Mail2Web, Outlook for Web

in the end some systems just won't render <style> or inline styles at all. Hotmail even used to change it to xtyle in the code.

j.

jmp909, 6 years ago

also as for centering..

try putting <center> around your inner table ie <td align="center"><center><table.... and maybe outside your 100% table

try putting <table align="center" > too

also try changing your doctype

i've had this problem and can't remember the solution specifically... you'll have to trial&error it.

one thing to note though... if you've got any table centering even if it's just outside the overall table, make sure you specify align="left" on your text content <td> cells, or hotmail will centre those by default too.

j

BThies BThies, 6 years ago

You realize you're replying to threads from months ago?


Brian Thies
Professional Email Developer
Thies Publishing
jmp909, 6 years ago

sure why not... well, no actually but it's all useful when searching the forum for possible solutions... hopefully :)

BThies BThies, 6 years ago

It'd probably be better to put all your ideas/thoughts into one thread.

Otherwise you're pushing current threads down off the page while replying to threads that are technically "closed/solved".


Brian Thies
Professional Email Developer
Thies Publishing

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