AdSense Case Study: Captioning pictures with CSS

Although I promised I'd talk more about page layout for my AdSense case study, I'm going to defer the general discussion and focus in on one specific topic: creating captioned pictures using CSS. It isn't nearly as easy as you'd think, unfortunately, because of bugs with Internet Explorer. (Purists would argue that you should ignore IE and its poor implementation of Web standards, but from a pragmatic viewpoint you want your site to look well enough to IE users because they are still the dominant part of the market and a large part of your revenue stream.)

Take a look at the pages in Stage 4 of the Invisible Fence Guide. If you've been following along with the case study, you'll remember that I added pictures to each page as part of Stage 3. Immediately below each picture was a short caption, which may or may not have been obvious to you because there was no real way to distinguish the caption from the surrounding text. So one of the goals of our CSS work in Stage 4 was to make the captions look like, well, captions.

In a perfect world, this wouldn't be very hard. All you do is wrap the image and the caption with a <div> tag to which you assign a CSS class, like so:

<div class="figure">
<img src="/someimage.jpg" border="0" width="480" height="360">
<p>This is the caption</p>
</div>

Then in your CSS style sheet you'd define styles like this:

.figure {
  background-color: #666666;
  margin: 5px;
  float: none;
  padding: 2px;
  min-width: 484px;
}

.figure img {
  margin-bottom: 0;
}

.figure p {
  color: white;
  text-align: center;
  font-size: 80%;
  margin: 0px;
}

What does this do? Well, it gives the <div> a dark grey background with a small margin and an even smaller bit of padding. The <img> inside the div gets its bottom margin set to 0 while the <p> inside the div gets its color set to white, a smaller font, and centered text. Simple stuff, the end result is that the image and the caption get put into a simple grey box and move together on the page as the page reformats itself.

The key to making it work, of course, is the min-width property, which says that the width of the <div> shouldn't go any smaller than the size of the image plus the padding. This avoids some really bad reformatting of the middle column when the user resizes the page. (It's not pretty, trust me.)

Unfortunately, Internet Explorer doesn't support min-width, one of the many bugs in its implementation of CSS. I scratched my head on this one for a while, but I found the solution after an extensive Google search: the minmax.js script by Andrew Clover. This is a hunk of JavaScript code that you insert into your page. When the page is loaded by Internet Explorer, the script goes and replaces all the min-width (and min-height) properties on the page with an IE-only equivalent that mostly works in all versions of IE. Truly a hack, but one that works well enough.

To run this script, you just copy the minmax.js file onto your web server and add the following statement at the bottom of the HTML file:

<script type="text/javascript" src="minmax.js"></script>

I only made one change to this. Although the script doesn't actually run if loaded by a non-IE browser (it checks the browser type), I thought it wasteful to load the script if it isn't actually needed. So I used a “feature” of IE called conditional comments to wrap the <script> tag so only IE sees it:

<!--[if IE]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->

Kind of a messy solution, that's for sure, but I ended up with what I wanted on the big three browsers I use (Firefox, Opera and IE). Which brings me another point: always test your site with another browser, preferably 2 or 3 different browsers. You can't test the site with all browsers, of course, but try to get it looking good with more than just your usual browser.

Did I say CSS was easy? What was I thinking!

Eric Giguere is the author of Make Easy Money with Google, a real (printed!) introductory AdSense book for non-technical people, available at all fine bookstores. Be sure to download the free sample chapter for more information about the book. Or add it directly to your Amazon shopping cart!

Comments