The comments for Oops, browser not supported are a good read. A few quick highlights include:

• A reference to Yahoo’s graded browser support. This is great stuff, as explained in my fabulous graph below.
• A link to Reset Reloaded, something I definitely need to do for my own site. I keep running into margin and padding inconsistencies, for instance when embedding certain tags inside of thought bubble comments.

Now for the Graph

This highly technical graph shows why toolkits and libraries like YUI, GWT, Dojo, and others are inevitable:

I test my blog on my PC with two browsers: IE 7 and Firefox 2. I simply do not have the resources (time/money/desire/etc) to test on a variety of browsers and operating systems. But I do worry about it…

• What does my site look like on cell phones and PDAs?
• Is accessibility even remotely supported?
• What about Macs? Linux? Old browsers?

The graph shows a vertical dashed line. There comes a point where you have to support so many browser and device combinations that you simply cannot hand code a sophisticated site.

Old Story, New Rules

We’ve dealt with this issue for years and years and years. What makes it any different today than it was a few years ago?

• Devices, devices, devices – pretty soon an awful lot of people will be browsing your web site with phones, MP3 players, game consoles, and other gadgets. A world with 2 incompatible browsers is childs play compared to today’s reality.
• User expectations. You can’t just hand-code some XHTML-strict along with compliant CSS and expect great results. People expect AJAX, animations, WYSIWYG, drag-and-drop, mapping, etc. Good luck hand coding all that.

So there you have it. I hope you enjoyed the graph. I wonder how that 453 pixel wide PNG looks on your cell phone?

Why would you want a map like this on your blog?

Everyone’s blog traffic looks like that. A bunch of dots blobs scattered across the globe with a void in Africa. Get rid of it.

How about this:

People do not visit your blog for the weather report.

And about that tag cloud…Jeffrey Zeldman called tag clouds the new mullet way back in 2005. (personally, I think goatees are the new mullet, but to each his own…)

Heat Maps

Every person with a blog should read Banner Blindness: Old and New Findings. That article contains some really awesome heat maps that show what people actually look at on a web page.

I wonder why we spend so much time agonizing over how to create 3-column CSS layouts when people rarely look at those other columns anyway?

Great Versus Typical

I think Russell Beattie’s Weblog has a fantastic style: clean, beautiful, and easy to read. I modeled my site after his, although I’m certainly no graphic designer.

Unfortunately many blogs look more like this:

Yuk.

Be the Steve Jobs of Your Blog

Apple hardware design kicks ass:

Largely because they have the balls to remove extraneous features.

Corporate committees are the enemy of simplicity. Committees rarely produce anything inspiring. Instead, we get watered down politically correct pandering slop that tries to please every faction, while delighting nobody.

Your blog belongs to YOU. You do not have to answer to a committee! Be an evil dictator! Delete, purge, CLEAN UP! You can be Steve Jobs in your own little corner of the Internet.

Removing the clutter will make your blog better.

Thanksgiving Challenge

Your challenge is to remove something from your blog theme. Drop a calendar, a tag cloud, a map, a badge…whatever. Just go for simplicity.

(The hypocrisy of the gigantic ad on my own blog is noted…)

I just added “thought bubble” graphics to my blog comments. Scroll down to see the results.

Check out Comic: Wide-Stanced Programming for another post with a handful of comments.

I have no idea if this works in your browser. I tested on Vista using IE 7 and Firefox 2.0.0.9. It’d be great if people on other operating systems and browsers could let me know how the bubbles render.

Check out the calendar detail to the left of the post title. I created this with a combination of some simple div tags, two background images, and some CSS. It looks really good in Firefox, and “ok” in IE. If you change the text zoom size in IE, the borders get a bit flaky. I’m sure with a bit more hacking we can make it look better in more browsers.

This diagram shows how the div tags fit together:

Here is the CSS for the outer box:

.datebox {
  width: 50px;  /* same width as the background image */
  float: left;
  margin-right: 1ex;
  margin-bottom: 1em;
}

The width matches the width of the background image, which is anchored to the top of the .month box. (shown next). The float tells the entire datebox where to go on the page, and the margins ensure text does not smash up against the box. The values 1ex and 1em are just pulled out of thin air. Other values work fine.

The month box contains the background image anchored to the top edge. It is important to know the exact color of this image so you can make the background color of the box match. Furthermore, the image must not be transparent, otherwise the background color of the box bleeds through the top edge of the image.

.datebox .month {
  font-family: Cambria,"Times New Roman",Times,serif;
  font-size: 0.9em;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  text-align: center;
  background: #660033 url('images/calendar-top.png') left top no-repeat;
  color: #dddddd;
}

The top padding gives just a bit of space to allow the background graphic to show. The bottom padding is arbitrary, I just tweaked it until I liked the way it looks.

Finally we have the CSS for the day box:

.datebox .day {
  font-family: Cambria,"Times New Roman",Times,serif;
  font-size: 1.4em;
  text-align: center;
  padding-bottom: 0.1em;
  color: #333333;
  border-right: 1px solid #660033;
  border-bottom: 1px solid #660033;
  border-left: 1px solid #660033;
  background: #faf8d2 url('images/page-fold-small.png') right bottom no-repeat;
}

The folded paper image is anchored to the bottom right. This box also provides a 1-pixel border that matches the background color of the other elements.

That’s it. If you are a better artist than me, you can probably improve on the look of this calendar. But after trying to zoom the text on several other people’s blogs, I think my CSS version scales pretty nicely.

WordPress Code

Here is the actual WordPress PHP code. I added this to index.php and single.php:

<div class="datebox">
  <div class="month"><?php the_time('M') ?></div>
  <div class="day"><?php the_time('d') ?></div>
</div>

I do think some stone-tablet graphics would go better with my theme.

A few days ago I posted a little diagram illustrating the CSS box model:

I then set out to produce a few simple web pages to further illustrate the concept. In Firefox 2.0, my experiment looks like this:

That’s exactly what I wanted. The HTML is really simple:

<div class="outerbox">
  <div class="innerbox">
     blah blah blah
  </div>
</div>

The 100×100 pixel box is a simple GIF with a red border that is part of the image itself, rather than applied via CSS. All of the other colors and borders come from the CSS:

.outerbox {
  background: yellow;
  border: 10px solid black;
}

.innerbox {
  margin: 10px;
  padding: 10px;
  border: 10px solid green;
  background: #cccccc url('100x100square.gif') no-repeat left;
  height: 100px;

  /* this padding pushes the text to the right of the image */
  padding-left: 120px;
}

Bring on IE 7

The exact same page looks like crap in IE 7:

You don’t see any yellow on the top and bottom because the inner box’s margin is ignored. Even worse, the image is clipped on the top and bottom. This is a manifestation of a well known IE bug: the infamous Internet Explorer box model bug.

This is the default behavior of IE 7, known as “quirks mode”.

Standards Mode

To trigger standards mode, add a doctype to the top of the page:

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/DTD/strict.dtd">

The Wikipedia Quirks mode article lists many other doctype variations. With this simple addition to the very first line of the web page, IE 7 is a little closer, but still wrong:

A Workaround is Possible

Even in standards mode, IE 7 renders my page incorrectly. Through trial-and-error, I determined that IE 7 ignores the inner box margin. To fix the problem, I removed the margin and replaced it with padding on the outer box:

.outerbox {
  background: yellow;
  border: 10px solid black;

  /* Use this padding instead of an .innerbox margin to work in IE 7 */
  padding: 10px;
}

.innerbox {
  /* no more margin here! */

  padding: 10px;
  border: 10px solid green;
  background: #cccccc url('100x100square.gif') no-repeat left;
  height: 100px;

  padding-left: 120px;
}

With this change in place, the page renders correctly in IE 7:

Summary

You can see all of these examples on my CSS Box Model Experiments page.

Imagine…all of this effort simply to make this HTML render consistently:

<div class="outerbox">
  <div class="innerbox">
     blah blah blah
  </div>
</div>

It’s really pathetic.

This is not very original, but I created my own little diagram to illustrate the CSS box model:

I found that keeping a printed copy of this diagram helps me when fighting CSS layout issues.

With CSS and HTML, feedback is instant. Edit the file, save it, then hit Refresh in the browser. Perhaps this led to laziness on my part. Rather than taking the time to really understand what was going on, I’d randomly tweak values until I got the layout I wanted.

In the end, however, taking the time to understand this aspect of CSS more deeply has made me a more effective developer.

Now if CSS only worked consistently in every browser…