SitePoint Sponsor

User Tag List

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

    Dreaded borders for html emails

    Hi

    I'm struggling again with html email and getting a border to the right and left of content.

    Here's what I have so far: http://sakeenaheducationcentre.com/w..._template.html

    Where you see the [newscontent] I need a border to match the above red spotty border and have it extend however much content is put in there.
    I'm struggling to know where and how to place this?

    I'd be very thankful for the help.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    have it extend however much content is put in there.
    I see you are still going where angels fear to tread!

    HTML email is way behind web design, and background images aren't well supported, though that's what you would need for that.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I know, it's awful but it's the only form email clients accept, if I have background images to go to the right and left of the " [newscontent] ie one for the right and one for the left where should I place the <img> tags and are they in a new <tr> or just a <td>?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    it's the only form email clients accept
    Despite the poor CSS support in various email clients, people have come up with some pretty nice designs that are well tested, so perhaps check those out. E.g.:

    http://www.campaignmonitor.com/templates/all/

    Some of those layouts use pretty fancy stuff, so I assume they are designed with progressive enhancement in mind (or graceful degradation, as the case may be). Have a look at how they handle background images.

    For example:

    Code:
    <td style="background-image: url(images/left-side.jpg); background-repeat: repeat;" background="images/left-side.jpg" bgcolor="#d4d1cd" valign="top" width="22"></td>

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks for the link!, it's really useful and I am going to work through them in the future.

    and I applied that method and it's worked for the left but I have some questions:

    why are we using style="background-image" and background="image" and how do I apply the same border on the left?

    see how I have it now with the new background image and color:

    http://sakeenaheducationcentre.com/w..._template.html

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    sorry an edit for the above instead of how do I appy the same border to the "left " I mean how do I apply the same border to the " right "

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    how do I apply the same border to the " right "
    You have to break the design into a lot more cells than that. I pulled that code from one of the CampaignMonitor templates, but that was just one of many cells in a row across the page. You need a little cell on the left and one on the right.

    They use background="" because it works better on some email clients—even though it is very outdated code.

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You have to break the design into a lot more cells than that. I pulled that code from one of the CampaignMonitor templates, but that was just one of many cells in a row across the page. You need a little cell on the left and one on the right.

    They use background="" because it works better on some email clients—even though it is very outdated code.
    I've tried adding more <td> but i'm not getting it right. Where and what should I be adding and should I be adding it as a background also on the left?

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    hantaah, we've done this before

    OK. If you can convert a CSS styled image-based table into an inline styled table for e-mail, then the code example in the following post *may* help.

    http://www.sitepoint.com/forums/show...=1#post5498014

    Although it's billed as "fluid", you assign any *fixed* width you wish, instead, and the repeating images will adapt.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    Where and what should I be adding
    Either follow ronpat's link, or have a look at the example I pulled that code from. I can't link directly to the example, but in my link above, it's the last example on the fourth line ("Grunge Grinders").

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok finally did it!

    Thanks for all your help
    Finished Newsletter template


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
  •