Member Avatar for Connavar3

Hi all

I have made a small mailer that I would like to send out to our clients. Previously we have sent images in a mail, but that, I think, is not the way it should be done :P

So now I have made this mailer, and it displays in my browser perfectly, it also displays in thunderbird perfectly, but outlook looks terrible and half the content does not load.

Any help/suggestions, please :)

<!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>
    <title>SPL is 21</title>
        <style type="text/css">
        .cu { font-family: @Arial; color:white; font-size:20px; margin-left:5px; z-index:1;}
        #splrightbg { background: #FFFFFF url(http://spl.co.za/mloop/background_overlay_right.png) repeat-x; margin: 0px auto 0px auto; }
        #splright { width: 230px; margin: 0px auto 0px; height:600px ;padding: 8px;}
        #spl21years {background: url(http://spl.co.za/mloop/SPL-21-logo.png) no-repeat; margin: 0px auto 0px auto; }
        #splcontent { width: 537px; margin: 0px auto 0px; height:600px ;padding: 14px;}
    </style>
</head>
<body>
<div id="allCode" align="center">
<table border="0" width="768">
  <tr height="200">
    <td colspan="2" width="50%">
    <div id="logoSpace" class="divBorders" style="width:100%; height: 100%; border-color:Blue; ">
        <div id="mainLogo" class="divBorders" style="width:49.5%; height: 100%; border-color:Fuchsia; float:left">
            <center><img src="http://spl.co.za/mloop/Logo.gif"  alt= "SPL logo"/></center>
        </div>
    </div>
    </td>
    <td colspan="2" width="50%">
      
    </td>
  </tr>
  <tr height="600">
    <td colspan="3" width="70%">
         <div id="spl21years">
            <div id="splcontent">
                Mock data, SPL will always kick the competitions backsides!<br /><br /><br />
                Always.
            </div>

         </div>
    </td>
    <td colspan="1" width="30%">
        <div id="splrightbg">
            <div id="splright">
                <center><h2 class="cu" style="font-size: 22px"><u><b>Contact Us</b></u></h2></center>
            <h1 class="cu" style="position:">Johannesburg<br />
                (+27)11 795 4600<br /><br />
                Cape Town<br />
                (+27)21 555 0333<br /><br />
                Durban<br />
                (+27)31 569 6991<br /><br /><br /><br /><br /><br />
                Visit SPL's corporate site:<br />
                <a href="http://spl.co.za" style="font-size:15px;">spl.co.za</a><br /><br />
                Visit our online store:<br />
                <a href="http://www.partstore.co.za/" style="font-size:15px;">partstore.co.za</a>
            </h1>
            </div>
        </div>
    </td>
  </tr>
</table>
</div>
</body>
</html>
  • 3 Contributors
  • 5 Replies
  • 172 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Connavar3
Member Avatar for macgurl70

This isn't an instance of the code, so much as what is reading the code. Not to mention - if it is flagged as junk mail most (like mine) will not view the images at all. Also, some people may not want their email in HTML and have that viewing turned off in their outlook. Just need to prepare for either of the scenarios.

Your best bet is to provide BOTH a graphical and a text only version in the same email. This way, if they don't get the images they still get the information. The text part can be at the bottom of the email as well.

Member Avatar for floatingDivs

The biggest problem is you are using classes and not inline styles. Being that outlook express (and many other clients) have trouble with using <style> blocks, you need to do everything inline. It's going to be a lot of hard work, but that's the way it has to be built to view properly in most email clients.

Member Avatar for Connavar3

Thanks guys!

I will redo the style stuff when I get to work tomorrow :) Will also include just plain text as well! Thanks :)

Member Avatar for Connavar3

Haha, changed it to inline, still giving me the same problem... figure that I will make a backround image for the whole table with what I want it to look like, and try load the table over it... Defeats the purpose of the entire thing, but at least it is partly dynamic :P

Is it possibly something to do with the <div> tags? I remember reading something somewhere a while ago that outlook cant handle <div>'s... Also doesnt display in gmail?! :)

<!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>
    <title>SPL is 21</title>
</head>
<body>
<div id="allCode" align="center">
<table border="0" width="768">
  <tr height="200">
    <td colspan="2" width="50%">
    <div id="logoSpace" class="divBorders" style="width:100%; height: 100%; border-color:Blue; ">
        <div id="mainLogo" class="divBorders" style="width:49.5%; height: 100%; border-color:Fuchsia; float:left">
            <center><img src="http://spl.co.za/mloop/Logo.gif"  alt= "SPL logo"/></center>
        </div>
    </div>
    </td>
    <td colspan="2" width="50%">
      
    </td>
  </tr>
  <tr height="600">
    <td colspan="3" width="70%">
         <div id="spl21years" style= "background: url(http://spl.co.za/mloop/SPL-21-logo.png) no-repeat; margin: 0px auto 0px auto; ">
            <div id="splcontent" style="width: 537px; margin: 0px auto 0px; height:600px ;padding: 14px;">
                Mock data, SPL will always kick the competitions backsides!<br /><br /><br />
                Always.
            </div>

         </div>
    </td>
    <td colspan="1" width="30%">
        <div id="splrightbg" style=" background: #FFFFFF url(http://spl.co.za/mloop/background_overlay_right.png) repeat-x; margin: 0px auto 0px auto; ">
            <div id="splright" style="width: 230px; margin: 0px auto 0px; height:600px ;padding: 8px;">
                <center><h2 class="cu" style="font-size: 22px"><u><b>Contact Us</b></u></h2></center>
            <h1 style="font-family: @Arial; color:white; font-size:20px; margin-left:5px; z-index:1;">Johannesburg<br />
                (+27)11 795 4600<br /><br />
                Cape Town<br />
                (+27)21 555 0333<br /><br />
                Durban<br />
                (+27)31 569 6991<br /><br /><br /><br /><br /><br />
                Visit SPL's corporate site:<br />
                <a href="http://spl.co.za" style="font-size:15px;">spl.co.za</a><br /><br />
                Visit our online store:<br />
                <a href="http://www.partstore.co.za/" style="font-size:15px;">partstore.co.za</a>
            </h1>
            </div>
        </div>
    </td>
  </tr>
</table>
</div>
</body>
</html>
Member Avatar for Connavar3

Hi all

I have figured it out, had to change the structure of the code itself, as outlook cant handle different positions it looks like :P

This is what I have that works in all the clients I have tried. Doesnt work in IE 7 though, the sizing gets all foobar, but otherwise its good :P Just incase someone else gets this problem in the future.

Thanks again for the help
Connavar

<!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>
    <title>SPL is 21</title>
</head>
<body>
    <table width="100%">
        <tr>
            <td align="center">
                <!-- Header Section -->
                <table border="0" cellpadding="0" cellspacing="0" bgcolor="#d6d6d6">
                    <tr>
                        <td align="center" colspan="4">
                            <img src="http://spl.co.za/mloop/Logo_mail.png" style="display: block" alt="SPL logo" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="top" align="center" colspan="4">
                            <!-- For the heading of the mailer -->
                            <font color="#c60001" size="7"><b><u>HAPPY BIRTHDAY!</u></b> </font>
                            <!-- End of heading -->
                        </td>
                    </tr>
                    <tr>
                        <td valign="top" colspan="2">
                            <table border="0" cellpadding="20" cellspacing="0" bgcolor="#d6d6d6">
                                <tr>
                                    <td>
                                        <!-- Image section -->
                                        <img src="http://spl.co.za/mloop/present.png" alt="SPL is 21 present picture" />
                                        <!-- end of image -->
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td valign="top" colspan="2" align="left" width="440">
                            <!-- Content Area -->
                            <p>
                                <font color="c60001" size="5">
                                    <br />
                                    SPL celebrate their 21st birthday this month.<br />
                                    <br />
                                    To celebrate this, we are offering<br />
                                    10% off any purchases made at
                                    <br />
                                    <a href="http://www.partstore.co.za">www.partstore.co.za</a>.<br />
                                    <br />
                                    Please quote the voucher code SPL21ST.
                                    <br />
                                    <br />
                                    Offer end 30 September 2010 </font>
                            </p>
                            <!-- End of content area -->
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <!-- Image footer -->
                            <img id="titlemap" src="http://spl.co.za/mloop/SPL-email-footer.png" alt="Contact Us. Johannesburg (+27)11 795 4600"
                                style="display: block" usemap="#titlemap" border="0" />
                            <map name="titlemap" id="footerMap">
                                <area shape="rect" alt="sales@spl.co.za" coords="158, 104, 276, 124" href="mailto:sales@spl.co.za" />
                                <area shape="rect" alt="cape@spl.co.za" coords="360, 103, 476, 123" href="mailto:cape@spl.co.za" />
                                <area shape="rect" alt="kzn@spl.co.za" coords="561, 103, 670, 123" href="mailto:kzn@spl.co.za" />
                                <area shape="rect" alt="www.partstore.co.za" coords="391, 156, 753, 201" href='http://www.partstore.co.za' />
                                <area shape="rect" alt="www.spl.co.za" coords="10, 155, 270, 201" href='http://spl.co.za' />
                            </map>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.