Double Image Rollover using Pure CSS

Look Ma - No Javascript!

The code on this page was inspired by Eric Meyer's Pure CSS Popups 2 demonstration. Eric hid his popups using height:0 width:0, but noted that this method does not work in IE5x because it is unable to handle dynamically resizing images. However, when I tried using visibility:hidden (and visibility:visible on a:hover), IE5x began to co-operate.

Making the button rollover as well was relatively straightforward in Moz and Opera 7. IE6 is somewhat fussy about which rules it will accept - styling a:link did not work, and any background-x styles on a:hover will stop the popup.

In retrospect, I realise that it would have been a lot easier to use buttons with a pattern that could expand and contract according to the text size, as Al Sparber has done on his CSS Rollover Tutorial. Using a fixed height / width image for a button is much more complicated.

There is a serious conflict between the requirements of the Mac and Win versions of IE5. If IE5 Win sees any height or width on the a or a:hover it gets confused and won't popup the second image. The only thing I could make work was a combination of line-height and display:block.

Unfortunately IE5 Mac behaves rather strangely with these rules, so I ended up using padding and margins for the buttons on that browser, then re-setting the values to 0 for all the others to benefit IE5 Win. Read the comments in the source of this page for more detail of the hackery involved.

I've tested in: IE5 Win, IE 5.5 Win, IE6 Win, IE5 Mac, NN 6.2, Moz 1.1, and Opera 7.

It's reported to work in Safari, Camino, OmniWeb 4.5 beta, and Firebird.

Things to Note:

This technique doesn't work in Opera 4,5 or 6 because that browser, as Richard Grevers explained to me: "lacks a dynamic rendering engine. Once the page has been rendered, they cannot change the display property of any element." Look at the main site CSS to see how I have arranged a graceful degradation for early versions of Opera.
This was never expected to work in Netscape Navigator 4x. The * html used in the Tan Hack at the top of the stylesheet stops that browser from seeing any of the other style rules, which is why this page isn't a horrible mess. On the main pages I've hiden these advanced styles in an external stylesheet using the @import method.
To hide the popup image from NN4 use display:none in the basic stylesheet, but use the commented backslash hack to hide from IE5 Mac both there and again in the advanced stylesheet when you reset to display:block to avoid problems in that browser.
IE5 Mac needs #nav a {padding-right: 32px} to display the whole width of button on the shortest text (HOME). Unfortunately this extends the clickable area that far past the button when the text is full width.
IE5 Mac won't honor nav a {text-align:center}.
To prevent ugly link text wrapping to another line when resized, you must use a non-breaking-space between multiple words.
IE5 Win is buggy with padding on inline elements so only the link text is clickable.
To prevent a delay while the hovered button image downloads I used the CSS Pre-loading technique discussed by Jeffrey Zeldman.

Any comments or suggested improvements? Email me: johnp@johnp.co.nz