I’m somewhat of a newbie with HTML and CSS. I’m hoping someone on this forum can help me. I have been producing a monthly newsletter for a few years now and send it out via Campaign Monitor. I use a template provided by Campaign Monitor but over time it’s not behaving as I’d like. Everything looks perfect in a browser, but the cell widths particularly with the 3-column part of the newsletter are uneven. I recently went through the code and set the widths for each cell but while it has slightly improved the look in Outlook it hasn’t actually solved the problem. The table width is set at 580 pixels. I have cellspacing at 4 pixels. I have cellpadding at 5 pixels. Where I have 3 columns across I’ve made each cell 188 pixels.
Is there anyone out there who can see what I’m doing wrong? Or perhaps it’s not me after all - could it be Outlook 2007/2010? Any ideas would be most welcome.
Robyn
Auckland, New Zealand
Outlook 07/10 have terrible css support, and have set email back many years by favoring the Word rendering engine. Campaign Monitor has written extensively on this, so it’s worth checking their site for info. They do have handy resources like a css compatibility list (http://www.campaignmonitor.com/css/).
Outlook is a beggar to code for, so don’t feel too bad if it’s looking awful. CM has lots of well-tested templates to choose from, so you might consider choosing a new one and not modifying it. That should be reliable.
Hope that helps.
PS
Welcome to SitePoint! (I didn’t notice it was your first post.)
Thanks for your help Ralph. I was hoping above all else that it wouldn’t relate to the CSS content as I’m pretty much at the CSS 101 stage. I’ll do as you suggest and go back and take a look at some of the more recent Campaign Monitor templates - just a pain to have to re-set everything but probably less of a pain than having to ‘learn’ CSS!
Robyn
You can do a lot (if not everything) in old tabled html emails without CSS at all, Robyn. Feel free to post your code if you’d like some tips.
Regarding CSS, there are lots of basic tips for avoiding problems with email layouts, such as using padding for <td>s, margins for <p>s, using only inline css styles, avoiding <td> colspans, and avoid nesting <td>s, and avoiding use of <p> (because of different browser rendering, and because Hotmail strips them out) and use text with <br> tags instead.
Some good articles, if you want to learn more, are:
Thank you for posting those awesome resources, ralph.m! That’s a pretty solid list you have there. Gotta love the awesomeness of the Sitepoint community
What a great forum. Thanks so much to all respondents for the help you’ve given. At the moment I’m working with Campaign Monitor and will hopefully learn about more elegant coding. I’m also taking a look at the links that ralph.m has given. Great stuff!
