Blog

News, tips and all things Campaign Monitor

A CSS Solution to Image Blocking

Posted by Mark Wyner on July 10, 2006

I’ve written a couple articles about using web-standards markup in HTML emails and am even speaking on the topic at an upcoming conference. But one area which I’ve failed to address is image replacement.

I have found, read and learned from a handful of good articles/tutorials on the web about this topic. However, I believe they are missing some key components in their construct. And that’s what I will illustrate herein.

I approach website markup with a set of techniques which I believe offer the best possible experience for everyone:

1. smart, fundamental markup for those with outdated, graphical browsing devices;
2. appropriate visual-design for those with standards-based, graphical browsing devices;
3. and absolute content accessibility for those with slow connections, non-graphical browsing devices and screen readers.

With that said, an area where I admittedly fall down is image replacement. Seeing one’s own design render with CSS on and images off is quite painful when the markup is standards based and all core-design images are CSS backgrounds. Moreover, accessibility is achieved only through a game of hide-and-seek. But there are some magicians from whom we can learn to overcome this.

Standing on the Shoulders of Giants

Dave Shea posted the most comprehensive study I’ve seen on image replacement. This is where I discovered what I feel is the best technique for preparing HTML markup for the CSS on, images off scenario. His technique sparked the realization that any inline element could be absolute positioned to commandeer the aforementioned scenario.

So the techniques I’ll outline herein aren’t a significant evolution of Dave’s technique; they simply buff out a few scratches. They will also exhibit how one might use his image-replacement technique to tightly interweave images with their surrounding elements.

With that, let’s look at the techniques I used in an email I recently designed and built for Digital Web Magazine.

Image Replacement for Part of a Title

Before I construct a website or HTML email I carefully read the content to decide how to semantically mark it up. I consider how it will look and read with no presentation layer. The title of Digital Web’s eNewsletter reads fluently as a single phrase: “Digital Web Magazine Updates Mailing List.” But there is a logo to consider, which is part of that title.

I used a single h1 to mark up the title. Then I used a presentation layer to pull out the logo from the rest of the title. The results are as follows:

[CSS on, images on]

[CSS off, images off]

[CSS on, images off]

Using Dave’s technique, I created a container for the HTML text (in this case an h1) and added a single, unobtrusive span to house the image and to position it over the text:

<h1><a href="http://www.digital-web.com/" title="Digital Web Magazine"><span></span>Digital Web Magazine</a> Updates Mailing List: February 26, 2006</h1>

The CSS behind the presentation looks like this:

h1 {
 width: 186px;
 height: 42px;
 position: relative;
}
h1 a {
 position: relative;
 width: 186px;
 height: 42px;
}
h1 a span {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 186px;
 height: 42px;
 background: url("img/Logo.gif") no-repeat;
}

But I needed to position the latter part of the title so that it is not inadvertently masked by the logo. So I increased the total width of the h1, right-aligned the text, positioned the a tag to the left side of the h1 container and left-aligned the HTML text in the a tag which was to be hidden:

h1 {
 width: 540px;
 height: 42px;
 text-align: right;
 position: relative;
}
h1 a {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 186px;
 height: 42px;
 text-align: left;
}

All done, right? Almost. Something that Dave’s technique doesn’t account for is increased font sizes. This technique places an image on top of HTML text that’s technically still displayed on the page. So when the font size increases, the HTML text pops out from behind the image.

Remember that I was considering a scenario wherein CSS is still on, so I could safely bring down the size of that text so it would be well hidden even with increased font sizes. I also added a little padding to the a tag to increase my breathing room:

h1 {
 width: 540px;
 height: 42px;
 text-align: right;
 font-size: 12px;
 line-height: 13px;
 position: relative;
}
h1 a {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 186px;
 height: 42px;
 padding-top: 23px;
 text-align: left;
}

With CSS on and images off the final result was a success, albeit less than satisfying from a visual-design perspective. This is because the hidden HTML text wasn’t formatted with the other content. If I was going to make this work with CSS on and images off, I wanted to go the full nine yards. So I added some color formatting to tie up the loose end:

h1 {
 width: 540px;
 height: 42px;
 text-align: right;
 font-size: 12px;
 line-height: 13px;
 color: #999;
 background: #fff;
 position: relative;
}

With that, I had accounted for the presence and absence of graphics and CSS, and also for varying font sizes. Sweet!

Relative/Absolute Positioning

“What,” you ask, “is relative/absolute positioning?” Oh, it’s something really cool. And I found myself in a scenario that very much warranted use of this technique.

I needed to break a single phrase into two lines as such:

Powered by
Campaign Monitor

But I needed to mask the text on the second line with a logo without inadvertently masking the first line:

With a simple evolution I could account for varying font sizes, which would otherwise destroy absolute positioning in this scenario.

I started with the baseline setup (an h4 container with the extra span tag):

<h4 class="Powered">Powered by <a href="http://www.campaignmonitor.com/" title="Campaign Monitor"><span></span>Campaign Monitor</a></h4>

But this time I had to consider that the HTML text preceding the image could vary in size. So absolute positioning from the top would fail. Unless I used a relative increment. The following worked out great:

h4 {
 position: relative;
}
h4 a {
 position: absolute;
 top: 1.5em;
 left: 0px;
 width: 121px;
 height: 15px;
}
h4 a span {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 121px;
 height: 15px;
 background: url("img/LogoCM.gif") no-repeat;
}

The key in this technique is the relative value of 1.5em for the top property in the positioning of the a tag. It is absolute positioned, relative to the font size. So the a container (and the image/text therein) will always reside a distance of one half of the height of the em size from the top of the parent container. This accounts for varying font sizes and adds a little padding between the preceding text and the image. Viola.

Browser and Email-Client Rendering

Aside from Yahoo Mail, most common email clients performed quite well using the aforementioned techniques. And all common web browsers also performed well. Following is a list of browsers and clients used in my tests:

Email clients:

• AOL (webmail)
• EMail (Zaurus handheld)
• Eudora 6.2 (OS X, Win/XP)
• Gmail (webmail)
• Hotmail (webmail)
• .Mac (webmail)
• Mail 2.1 (OS X)
• Mozilla Thunderbird 1.5 (Linux, OS X, Win/XP)
• Outlook 2002 (Win/XP)
• VersaMail (Palm OS)
• Yahoo Mail (webmail)

Web browsers:

• Blazer (Palm OS)
• Firefox 1.5 (OS X, Win/XP)
• IE 5.2 (OS X)
• IE 5.5/6.0 (Win/XP)
• Netscape 7.0 (OS X)
• Netscape 7.1 (Win/XP)
• OmniWeb 5.1 (OS X)
• Opera 7.0/8.0 (OS X, Win/XP)
• Safari 2.0 (OS X)

The email clients with solid CSS rendering (Mail, Thunderbird, Outlook, etc.) properly rendered everything with images on and off. Those with poor CSS rendering (Hotmail, Gmail, etc.) displayed the masked text since they don’t display CSS background-images anyway. And the text-only clients successfully displayed the unformatted text.

The only problematic email client is Yahoo Mail. This is because (as noted in my previous articles) Yahoo Mail replaces the property position with xposition," which renders any positioning—and consequently the techniques outlined herein—useless. The good news is that it simply eradicates the images and displays the CSS-formatted text. An acceptable degradation in my book.

As for web browsers, those with even moderate CSS support properly render pages using this technique. And those set to not display images see the CSS-formatted text. Awesome.

So there it is. I hope my minor evolutions to Dave Shea’s technique help the web community with this less than desirable task. Thanks to Dave and the others from his article for their hard work in building such a solid foundation.

This article was authored for Campaign Monitor by Mark Wyner of Mark Wyner Design, a small web design studio in Portland, OR, USA.

13 comments so far

Stay in the loop

Prefer updates via email? Sign up below and we'll send you all the good bits each month.

Dig into a category

• Articles/Tips
• Designer Interviews
• Email Newsletter Design
• Happy Customers/Press
• New Features & Updates
• Observations & Answers

Search all posts