SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML and CSS in Outlook 2007

    I'd appreciate some advice about trying to implement very simple CSS in an email generated from a system.

    The system is a corporate learning management system. It generates a large number of notification emails. The instructions are, in the notification setup section, to put the HTML for an email into what it calls a text block. The text block is then sent by the system as an inline attachment. The corporate email system is MS Outlook 2007. I don't have to cater for multiple email clients. I've been trying to do two things with very mixed success:
    1. style the email with very simple CSS, nothing fancy and no positioning
    2. include a banner image


    In terms of CSS, I've read a bit and know I have to use tables for layout, not CSS. I've been able to successfully set the font and font size, and to give one table cell a background colour. These work in any email client. What I can't do is get a border on the table to show in Outlook 2007. I've tried inline CSS and putting it in the <table> tag and it just won't display a border in Outlook 2007. (Other email clients show it.)

    As for the banner image, the system providers said I should just put the URL of the image in the HTML as normal. The email arrives with an empty box where the image should be. No alt text, no 'Right click to display images'. Just a box. The email also includes an iCal appointment. Strangely if you accept the appointment it appears in your calendar WITH the banner image.

    The system also enables you attach the banner image and reference it in the HTML - just by its name, not a full URL. If I do that the display depends on how you have Outlook set up. If you have a Reading Pane shown. The email appears in the Reading Pane with no image. If you double click it so it opens in its own window, the banner image is there inline where it should be AND as an attachment. However if you don't have a Reading Pane and just double click the email title from the Inbox it opens in a new window WITHOUT the banner

    I've put a sample of the HTML here. You'll see that I've duplicated a lot of CSS trying to get the border to display.
    Code:
    <html>
    <head> <title>Learning notification</title></head>
    
    
     <body>
                            
     <style type="text/css">
    <!--
    p {
    	font-family: Arial, Helvetica, Sans-serif;
    	color: #000000;
    	margin-left:10px;
    	font-size: 16px;
    }
    
    .footerContent {
    	background-color:#cfe8de;
    	}
    
    .footerSm {
    	font-size:14px;
    }
    
    
    table {
    	width: 400px;
    	border: 1px solid #cfe8de;
    }
    
    td.bodyTextHolder {
    	 border: 1px solid #cfe8de;
    }
    
    -->
    
     </style>
    
                                        
    
    <table align="center"  width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#cfe8de"  style="border: 1px solid #cfe8de;width:400px">  
    
    <tr><td><img src="bannerImage.jpg" width="200" height="60" alt = " Alt text goes here" /></td></tr>
    				
    <tr><td class="bodyTextHolder"  style="border: 1px solid #cfe8de;width:400px">
    <br />
    <!-- *******************  Body Text Start ********************* -->
    
    TEXT HERE VARIES ACCORDING TO THE INVITATION
    
    
    <!-- *******************  Body Text End ********************* -->
    
    </td></tr>
                                                                                                    
    <tr><td class="footerContent">
     <p class="footerSm"><strong>DO NOT REPLY TO THIS AUTOMATICALLY GENERATED EMAIL.</strong></p>
    
      
    
    </td></tr>
     
     </table>
      </body>
    </html>
    Any tips would be very welcome! (Other than "don't use Outlook 2007"!)

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    First tip: http://www.campaignmonitor.com/resources/
    these folks test their templates in a gazillion email clients, so they know most of the bugs

    Second tip: do you get your borders back if on the table you add border-collapse: collapse; ?

    Quote Originally Posted by nlamont
    As for the banner image, the system providers said I should just put the URL of the image in the HTML as normal. The email arrives with an empty box where the image should be. No alt text, no 'Right click to display images'. Just a box. The email also includes an iCal appointment. Strangely if you accept the appointment it appears in your calendar WITH the banner image.
    Is the mail client stripping images? Many do, since accepting and showing the image requires a request, which lets spammers know you've opened the mail and therefore your address is "live" and therefore juicy and good for resale to other spammers. So many clients don't show images by default.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replying. I didn't know of that campaignmonitor site, so I'll read that. I'll try border-collapse this morning.As for the client stripping images, I'm not sure. We do regularly receive HTML emails with images in, or with the option to display images, or option to add the sender to a safe list. These notifications I'm doing offer none of those options. It would be OK if they did.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I've just tried border-collapse (I added it to the CSS in the <table> tag) and it makes no difference. The table has width and background-colour on the specified cell, but still has no border, either in the REading Pane or when opened in its own window. As before it shows no image or warning text or alt text in the Reading Pane but shows the image correctly when opened.

    I'm inclined now to drop the image completely as it gives a bad impression when the first thing the recipient sees is an empty box. My branding people will be unhappy but it looks like they'll just have to be unhappy. I'll add a header using text and background colour, since I know that works, and perhaps use a background colour for the main section too, as that will show the width of the table instead of a border. Our IT dept is notorious for implementing things in a non-standard way, so it doesn't behave as described in that (excellent site) campaignmonitor. I suspect - although I can't be sure - that it's also affected by the fact our standard browser is still IE6. It just seems too much of a coincidence.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    A way of stepping around the image issue in emails is to convert ehe image to code first and then embed it in the email. It's still a bit flaky in some email clients, but works OK in Outlook 2007. Here's an article about it:

    http://www.campaignmonitor.com/blog/...ages-in-email/
    also read the followup:
    http://www.campaignmonitor.com/blog/...ges-revisited/

    Here's a tool for converting the image to code:

    http://webcodertools.com/imagetobase64converter
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I'm intrigued by the line img src="bannerImage.jpg" ... where is the image stored? If you aren't sending it as a multipart attachment, you'll need to give the full URL of where the client can download the image from.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Steve

    I was sending the image as another attachment in that version of the HTML. I'd tried giving an online URL and sending the image as an attachment, and setting the image as a background image on a table cell, as described by campaignmonitor.com. None of them gave me an image in the received email.

    I've now reverted to using text for my heading, but even that is a mess. It doesn't seem to recognise any known form of centering, or 'text-transform' :-)

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is getting to be a joke! All I want now is to have a heading <h1> centred in a table cell!

    I've added and added trying to get it and I wonder if something I'm doing is cancelling something else out.

    td.banner {
    text-align:center;
    }

    h1 {
    margin:auto;
    }

    then in my page, <td class="banner" align="center"><h1>my heading</h1></td>

    But still in Outlook 2007 it's over on the left! It's fine in Outlook 2003 and other mail readers.

    What else can I do?

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by nlamont View Post
    But still in Outlook 2007 it's over on the left! It's fine in Outlook 2003 and other mail readers.

    What else can I do?
    <center>...</center>

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    td.banner {
    text-align:center;
    }

    h1 {
    margin:auto;
    }

    then in my page, <td class="banner" align="center"><h1>my heading</h1></td>
    does
    h1 {
    text-align: center;
    }
    do anything?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Also try:

    Code:
    <td style="text-align:center"><h1 style="text-align: center;">my heading</h1></td>
    Inline styles are the way to go in email, unfortunately.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unbelievable but even this doesn't centre it in OL2007!

    <td style="text-align:center;"><center><h1>my heading</h1></center></td>

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hahaha, the <center> cannot hold...

  14. #14
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hahaha, the <center> cannot hold...
    ...what?

    According to our own dear reference, <center> is a block-level element, and the W3 says
    The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center"
    so it's perfectly legitimate to have an <h1> inside a <center>.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally got it centred with
    Code:
    <tr><td class="banner" align="center" style="text-align:center;border-bottom:3px solid #00864F;"><center><h1 style="font-weight:normal; text-align:center;">DISCOVER LEARNING</h1></center></td></tr>
    Now if I could just get a border round table, and even, if the angels were watching and I'd been good, get the font-weight to 'normal'!

    Attached is how it looks in our corporate Outlook 2007, and how it looks on a private Outlook 2003notif 2007.jpgnotif 2003.jpg. 2007 has bold heading, pushed up to top of table cell, no bottom dark green border on the heading cell and, most important, no border round the table.

    I've tried every trick I know to get a border on it:
    Code:
    table {
    	width: 400px;
    	border: 2px solid #cfe8de;
    }
    Code:
    <table align="center"  width="400" border="2" cellpadding="10" cellspacing="0" bordercolor="#cfe8de"  style="border: 2px solid #cfe8de;width:400px;border-collapse:collapse;">
    and even wrapping the table in a div:
    Code:
    <div id="wrapper" style="border: 2px solid #cfe8de; width:404px;">
    Anything else I can try?

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    @StevieD no, that was a reference to Zalgo.

    http://stackoverflow.com/questions/1...732454#1732454 The <center> cannot hold it is too late...


Tags for this Thread

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
  •