1

I am struggling to find out what the problem might be with my newsletter header. It sometimes works properly when I test but the slightest change changes everything and I can't even notice what causes the error.

Here is the code and a picture showing what my problem is:

<table cellpadding="" cellspacing="0" border="0" vallign="top" align="center" style="height:auto; max-width=600px; border-bottom: none!important;border-right: none !important;" >
  <tr>
    <td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600px" height="440px" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat; padding: 0;width: 100%;" valign="middle;">
    <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;">
        <tr>
          <td align="center" >
           <br>
            <img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88px" height="47px" align="center" link="" style="display:block;"/>
            </td>
        </tr>
        <tr>
          <td align="center" valign="middle">
           <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
            <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
            WEBSITE</anpa>
            <anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
            FORWARD</anpa>
            <anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
            SUBSCRIBE</anpa>
            <anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
            UNSUBSCRIBE<br>
            </anpa></font>
          </td>
        </tr>
        <tr>
          <td width="600px" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
          <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none;">
          Baltic Development Forum</anpa></font></td>
        </tr>
        
        <tr>
   <td align="center">
   <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
   
  LATEST BDF NEWS ESPECIALLY FOR YOU
     </font></td>
        </tr>
        
        <tr>
        <br>
        <td align="center">         
         <div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>
   </td>
        </tr>
      </table>
      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
  </tr>
</table>

And here go the pictures of:

what I want to achieve

And what happens right now when I open it in outlook

Obviously, it works in every other mail "client" eg. gmail. I am kind of desperate at this point...

Jan Kanty
  • 15
  • 4

2 Answers2

0

From a little research it seems that Outlook 2007 and beyond doesn't have the ability to display images that are set using "background-image". You can however, use tags.

Check out this thread for more info: Background images not working in Outlook 2007 and later

Community
  • 1
  • 1
trav
  • 376
  • 2
  • 9
0

I cleaned up your code below. I added a few width="100%"s and width="600"s since Outlook doesn't support max-width. I also moved all CSS inside inline style attributes.

The two <!--[if gte mso 9]> (for the background image and the button) blocks weren't getting along. I got he background image to display, but the VML portion of the button would appear anchored to the upper-left of the block. Removing the VML portion of the button fixed the layout, but lost the border-radius (arcsize) of the button in Windows Outlook (border-radius covers most other email clients).

Not pixel perfect everywhere, but hopefully this is a step in the right direction!

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table align="center" border="0" cellpadding="" cellspacing="0" style="height:auto; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600">
        <tr>
            <td bgcolor="#333333" height="440" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="100%">
                <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 440px;">
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
                <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;" width="100%">
                    <tr>
                        <td align="center"><br>
                        <img align="center" alt="" height="47px" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td>
                    </tr>
                    <tr>
                        <td align="center" valign="middle"><font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">WEBSITE FORWARD SUBSCRIBE UNSUBSCRIBE<br></font></td>
                    </tr>
                    <tr>
                        <td align="center" valign="middle" width="600px"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">Baltic Development Forum</font></td>
                    </tr>
                    <tr>
                        <td align="center" style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">LATEST BDF NEWS ESPECIALLY FOR YOU</td>
                    </tr>
                    <tr>
                        <td align="center">
                                
                            <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;">
                                <tr>
                                    <td style="border-radius: 30px; background: #d1003e; text-align: center;">
                                        <a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;">
                                            <span style="color:#ffffff;">WEBSITE</span>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                                
                        </td>
                    </tr>
                </table><!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
            </td>
        </tr>
    </table>
</body>
</html>
Ted Goas
  • 7,051
  • 1
  • 35
  • 42