Help with HTML Email formatting

I’m trying to sort out this html email

As you can see the sides of the middle area just do not align up. It shows different on all browsers. I have tried changing row spans and widths but not getting desired result. Just find it hard to get to grips with this html emailing grrr… Any help to point me in the right direction would be greatly appreciated!!!
Many thanks

I modified the title of this thread because, when read out-of-context, it had a completely different meaning.

Hopefully, this will allow those with the right expertise to quickly spot the thread and offer some help.

[FONT=Verdana]Using top and bottom images that are the same width is always a good idea. Using images that have the same amount of space on the left and right edges (or none at all) is also helpful.

Your HTML table code was really not so good. Try setting the table-layout property to “fixed” and watch the layout self destruct. It becomes almost unrecognizable.

I recommend assigning outlines around tables (boxes of any kind, actually) during coding so you can see how they are developing. Sometimes I use background-colors, sometimes borders, but usually outlines. Anything like that is helpful.

I started over completely. Attached are three new images. I trimmed a few pixels off the left edge of the each one so they are the same width. Nothing was lost from the top image. Also made a 10px high image for the middle section… repeat-y and you don’t have to draw the side borders. The images are attached along with new HTML. You will have to assign a proper path to the new images.

Hope it works for you :slight_smile:
[/FONT]


<!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" />
    <meta name="robots" content="noindex,nofollow"/>
<!--     <meta property="og:title" content="Sakeenah Crafts"/>    "property" is not a valid meta attribute -->
    <title>Sakeenah Arts &amp; Crafts Afternoon</title>
</head>
<body bgcolor="#E1EFFA">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td bgcolor="#E1EFFA">
        <table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#E1EFFA" style="width:549px;">
        <tr>
            <td align="center" valign="top" style="font-family:Arial,Helvetica,sans-serif; font-size:10px; color:#353334; line-height:22px; text-align:center;">This message was made to look good! If it doesn't Try&nbsp;
                <a href="http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/artscrafts.html" style="border-bottom:1px dashed #93b82a; color:##353334; text-decoration:none; font-family:Arial,Helvetica,sans-serif; font-size:10px;">clicking here to view it in your web browser.</a>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top">
                <img src="acafternoon_top1.gif" width="549" height="381" alt="header" />
            </td>
        </tr>
        </table>
        <table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#E1EFFA" style="width:549px; background:url('acafternoon_mid1.jpg') repeat-y;">
        <tr>
            <td valign="top">
                <table width="475" align="center" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td height="80" align="left" valign="top" style="font-family:Georgia,'Times New Roman',Times,serif; font-size:12px; color:#4d4b4b; line-height:22px; font-style:italic;">
                        Introducing an afternoon of Arts &amp; Crafts for 3 - 11 year olds. Including:
                        <ul style="list-style-type:none; padding:12px 0 0px; margin:0px;">
                            <li style="background:url(http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/star.png) no-repeat 2px 3px; padding-left:20px;">CRAFTING WORKSHOPS</li>
                            <li style="background:url(http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/star.png) no-repeat 2px 3px; padding-left:20px;">FOOD STALLS</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="middle" style="padding:8px 0 3px;">
                        <img src="http://organicwebdesigns.co.uk/wp-content/uploads/2013/01/hr_12.gif" alt="" width="100%" height="1" />
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" style="padding:0 0 4px;">
                        <img src="http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/timeplace.gif" alt="Time and Place" width="130" height="35" />
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td valign="top" style="font-family:Georgia,'Times New Roman',Times,serif; font-size:12px; color:#4d4b4b; line-height:22px;">
                                <ul style="list-style-type:none; padding:0px; margin:0px;">
                                    <li style="background:url(http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/star.png) no-repeat 2px 3px; padding-left: 20px;">2-5PM</li>
                                    <!--<li style="background:url(http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/star.png) no-repeat 2px 3px; padding-left: 20px;">&pound3 PER FAMILY</li>-->
                                    <li style="background:url(http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/star.png) no-repeat 2px 3px; padding-left: 20px;">THURSDAY 14 FEBURARY</li>
                                    <li style="background:url(http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/star.png) no-repeat 2px 3px; padding-left: 20px;">BUTETOWN CULTURAL AND MEDIA CENTRE<br/>BUTE STREET </li>
                                </ul>
                                <br/>
                                <em>Only &pound;3 per family!</em>
                                <br/>
                                <a href="http://maps.google.co.uk/maps?q=butetown+media+centre%26rlz=1C1GGGE_en-gbGB488GB488%26um=1%26ie=UTF-8%26sa=X%26ei=uxAcUar8LIHs0gWW7IGwCQ%26ved=0CAsQ_AUoAg" >Google map of Loudoun Square</a>
                            </td>
                            <td width="38%" align="right" valign="middle">
                                <a href="http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/butetuown-health-centre.jpg">
                                    <img src="http://sakeenaheducationcentre.com/wp-content/uploads/2013/02/butetuown-health-centre.jpg" alt="Butetown Media centre picture" width="170" height="170" style="border:none;" />
                                </a>
                            </td>
                        </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="middle" style="padding:8px 0 8px;">
                        <img src="http://organicwebdesigns.co.uk/wp-content/uploads/2013/01/hr_12.gif" alt="" width="100%" height="1" />
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>
        <table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#E1EFFA" style="width:549px;">
        <tr>
            <td align="right" valign="top" bgcolor="#E1EFFA">
                <img src="acafternoon_botm1.jpg" alt="mid" width="549" height="169" />
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>
</body>
</html>

Thank you very much for all that input!!! I see what you’ve done and it makes sense. Very appreciative, many thanks

The Finished article

I notice that the <!DOCTYPE> declaration and <head> section have been removed from the page. That puts it into quirks mode big time. Although I see the page OK in Firefox, there may be quirksy behaviors in other browsers or e-mailers that don’t like it. Unless you have some compelling reason for removing them, I recommend keeping the <!DOCTYPE> and <head> sections intact.

Thanks very much for the quick feedback. Am glad to hear that you looked it over thoroughly and found it useful.

hm how strange! I’ve not knowingly removed it myself. Can you check it again as I think it should be right now

You might want to read this or [URL=“http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/”]this first before making your choice :slight_smile: Some email clients strip doctypes (and head content) completely, some obey them and some others change them to their own version!!

There’s also a good guide to what works in html emails here.

Thanks very much, @Paul_O_B. Bookmarked! There is also a site with a table somewhere that shows which commands work with which e-mail clients. Will look again for that, too.

hantaah:

The background image in the middle table is not being displayed. It seems that a carriage return has been introduced just after the opening ‘tic’ mark (single quote) thus breaking the path to the image. Remove that CR to restore the path and the background image should display (at least for some e-mail clients :slight_smile: ).

It’s on the campaign monitor site :slight_smile:

YES!!! That’s IT! Thanks ever so much.

(I’m accumulating so many notes that some are getting lost… :lol: )

Thanks sorted that now…

wrt the conversation of email clients etc. I am actually enjoying making html emails so I am wondering why the clients make this practace so difficult and why they enforce the usage of tables etc?

I’m not sure I know the real answer but I believe it’s more of a historic thing to do with MS outlook as that was the primary email client at the time and support for CSS was negligible; but probably supported its own system of styling (msoformat). As many systems still uses outlook the system never evolved and even recently took a step backwards again.

The original specifications for email software were that they were required to support plain text only anyway.

Originally email was probably plain text in a table structure and needed to be very lightweight as everyone had slow connections and many systems were built on this. However designers found they could add code to the tables to format them differently.

There are also security issues with html emails so its often better to strip code out an be safe than to allow something nasty through. Remember that emails may be read in mail clients that aren’t the same as browser and may have access to your system more easily. Security is probably high on the list as to why html emails are so awkward to implement.

There are also issues in how you maintain the css and html of an email when it basically sits inside another web page (such as online email clients) so it is not the same as displaying a web page; it’s like displaying a completely different web page inside an existing webpage without each affecting the other one. So obviously there are limitations with CSS and the cascade in these situations.

All email clients are different and have different window pane sizes so you have many variables to take into account and email clients won’t let an email take up the whole page so there will be many restrictions in place as to what is allowed also.

There is some more reliable information here.

It would certainly make life easier if we could just use normal css and html and let the email client do all the hard work of converting it into their system.