The setup

Recently, I did some pro-bono consulting work for a client. As part of our agreement I made it clear that I would retain the rights to the code I wrote. The reason I did this is because I wanted to be able to give back to the community, and now I am going to do that. The work was made up of six tasks, ranging from trivial to complex. I intend to write six articles based on these tasks. This is the first.

Creating a Rollover Button without Javascript

JavaScript rollover buttons have been a common feature on the web for a long time now, but they do have some drawbacks. In the article below I will describe a way to make some neat looking rollover techniques with just XHTML and CSS. They aren't perfect for every situation, but they are an interesting alternative.

Why not just use MM_swapImage()?

Macromedia's (now Adobe's) ubiquitous JavaScript functions for rollovers are effective but they do have a few disadvantages:

The lists below may seem sparse. This is deliberate. I could give you a laundry lists of every programming language, software package, operating system, and technology buzzword that I have ever worked with. I won't subject you to that. I will just tell you my greatest strength:

I find solutions.

Ever since I started making custom themes for Drupal, I kept running into a strange problem. If my theme or my content included a table, when I looked at it in Firefox the table would have a thin grey line on the top. I finally figured out what was causing this and I would like to share it with you.

If you want to skip the lecture, you can click here for the solution.

Update 2008-08-22: This page has received a large amount of traffic from people looking for implementations of the Blueprint CSS theme project. Here are some links to help out those people:

While making the first article in the "Mistakes I've Made" series. I immediately came across the fodder for the next. I was trying to create CSS for my code examples and discovered that using <pre /> just won't cut it anymore.

This is the first in a series of short articles called "Mistakes I've Made". In this series I plan to give examples of mistakes, misunderstandings, and problems I've encountered while coding. Maybe they will keep you from going through the same frustration.

I came across this "mistake" while making the new CSS for this site. Apparently, Internet Explorer only speaks American English. Here is the code I created: