CSS image replacement?

Ok, I'm just getting into this email newsletter thing. I've been coding standards based html layouts for years, but this is the first time I've tackled HTML emails.

I'm curious about best practices on including an image logo/masthead in emails. There's an article here on Campaign Monitor about <a href="http://www.campaignmonitor.com/blog/archives/2006/07/a_css_solution.html">CSS image replacement</a> but it is from July 2006.

I added a comment to the end of that article, but I thought I might get a quicker response here in the forums.

With all the image blocking issues, is there a good way to present an image logo and if that is hidden for whatever reason present HTML that we can style (aka image replacement)? That article is old, so Outlook 2007 among others might blow it up.

Dave Dave, 10 years ago

Hey Phil,

You guess correctly I'm afraid, while this technique was effective in a pre-Outlook 2007 world, it's just too risky for us to recommend these days. I'm afraid you'll need to swallow your pride and consider a very simple CSS based layout (without the use of float), or a basic table based layout. For the best results, you'll actually want to consider adding a little inline CSS too.

philoye, 10 years ago

Sigh... I don't have any pride to swallow. :-)

Now I just need to decide on tables vs divs, and how much to put inline (widths?) and in a style tag (fonts? colors?). My newsletter is really simple (one column), but I need padding/margins. Good times.

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free