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:

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.

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.