ZachSchneider [dot] com

The CSS method uses what is known as an image sprite to load all the rollover effects as a single image and we then use CSS to do the transition. To create the image sprite just create a single image containing all of the individual transitions.  Once you have your image sprite you just need the HTML and CSS code:

CSS Code:
a.grnBTN {
display: block;
width: 200px;
height: 45px;
text-decoration: none;
background: url(“greenBTN.png”);
background-position: 200px;
}

a.grnBTN:hover {
background-position: 0 0;
}

.displace {
position: absolute;
left: -5000px;
}

HTML Code:

<a href="#" class="grnBTN" title="Image Title">
<span class="displace">Alternative Text</span>
</a>

• The width and height values in a.rollover are the size of the original image.
• The value of background-position is that of the original image width since we are literally moving from one part of the image sprite to another.
• The <span> tag was included with a text alternative to the image and displaced it off the side of the visible screen so that screen readers will read it and in the event of no CSS support a text link will be shown instead.

Working Example:

Alternative Text

Internet Explorer has it’s problems with CSS (OK, it’s pretty much awful) but if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without a ton of hacks and without having alternate stylesheets. But if you (or your client) really wants to get pixel-perfect results cross-browser, you may need to specify alternate stylesheets for different browsers, especially Internet Explorer.

Here is the basic technique for an IE-Only stylesheet:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

The opposite technique, targeting only NON-IE browsers:

<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->

If you need to get down and dirty with specific versions of IE, here are a few examples.

IE 7 ONLY:

<!--[if IE 7]>
<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

IE 6 ONLY:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

IE 5 ONLY:

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->

IE 5.5 ONLY:

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->

VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

Why would you want to use these conditional stylesheets?

• It’s more future-proof than hacks. A new browser or a new version of a browser may come along one day that wrecks up interprets your hacks in a strange way and will mess up your styling. That’s no good! For example, there is a really effective min-height hack out there right now, but who is to say that will work forever? The solution here would be to declare a min-height like normal in your real stylesheet, then declare a height (the workaround) in an IE-6-and-Lower stylesheet.
• It keeps your CSS clean. And valid! If having CS code that passes W3C snuff is important to you, this is the way to go
• Expandability. If a new browser comes along that you want to also support, you can create a conditional statement and stylesheet for that and you are all set, instead of re-tweaking your existing stuff.

If you think it is overkill for you to have IE-Specific stylesheets, you can use hacks to make things happen. Again, I don’t really recommend this, but this is how it’s done.

IE-7 ONLY:

* html #div {
    height: 300px;
}

NON IE-7 ONLY:

#div {
   _height: 300px;
}

HIDE FROM IE 6 AND LOWER:

#div {
   height/**/: 300px;
}

HIDE FROM IE 6 AND LOWER: (another way)

html > body #div {
      height: 300px;
}