SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,282
    Mentioned
    180 Post(s)
    Tagged
    4 Thread(s)
    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.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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>

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hm how strange! I've not knowingly removed it myself. Can you check it again as I think it should be right now

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 ).

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ronpat View Post
    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

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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... )

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by hantaah View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •