Help with HTML Email formatting

**hantaah** · Feb 14, 2013 07:52

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

**ParkinT** · Feb 14, 2013 08:32

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.

**ronpat** · Feb 15, 2013 05:06

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

acafternoon_top1.gif - acafternoon_mid1.jpg - acafternoon_botm1.jpg

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" />
    <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>

**hantaah** · Feb 15, 2013 07:10

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

**ronpat** · Feb 15, 2013 13:46

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.

**hantaah** · Feb 15, 2013 14:21

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

**Paul O'B** · Feb 15, 2013 14:32

Originally Posted by ronpat

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.

You might want to read this or this first before making your choice

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.

**ronpat** · Feb 15, 2013 15:35

Originally Posted by Paul O'B

You might want to read this or this first before making your choice

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

).

**Paul O'B** · Feb 15, 2013 15:55

Originally Posted by ronpat

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.

It's on the campaign monitor site

**ronpat** · Feb 15, 2013 16:01

Originally Posted by Paul O'B

It's on the campaign monitor site

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

(I'm accumulating so many notes that some are getting lost...

)

**hantaah** · Feb 16, 2013 04:39

Originally Posted by ronpat

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

).

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?

**Paul O'B** · Feb 17, 2013 04:41

Originally Posted by hantaah

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.

User Tag List

Thread: Help with HTML Email formatting

Thread Tools

Display

Help with HTML Email formatting

Bookmarks

Bookmarks

Posting Permissions