Previous Message
Next Message

Pure CSS Rollover revisited, need a little help polishing

Sent by Christian Montoya on 31 March 2006 01:01

A while back a put together a technique for a pure CSS image rollover
which I dubbed MIR and I posted it here:

It's a little complex to explain so please read the post if you didn't
hear about it.

I decided to revisit the technique for one reason: ALT text. The
previous technique totally screwed with the alt text when images were
disabled. I decided to have another go at it and see if I could fix
this problem by only changing the images on :hover rather than the
whole anchor.


If you turn off images you will see that the text displays just like
any old ALT text would, but while images are on you have that slick
rollover effect working fine.

The relevant CSS that is actually necessary for the technique is:

a { display:block; overflow:hidden; }

a img { margin-bottom:-25px; display:block; }

a:hover img { margin-top:-25px; margin-bottom:0; display:block; }

The second row of anchors is floated to show that multiple images can
be placed horizontally with this technique.

Simple, right?

IE 6 needed help in two ways: hasLayout [3] and another bug [1]

This fixed the hasLayout problem:

* html p { height:1%; }

* html a { height:1%; }

* html a img { width:200px; }

And this fixed the other:

* html a:hover { text-indent:0; }

I wasn't able to test in IE 7 B 2 because I can't seem to uninstall IE
7 B 2 P on my laptop... I'll keep my comments on that to myself.

My questions are:

- Does this have the same (or better) browser compatibility as the
previous version of the technique?

- Does it work fine in IE 7 March 20 version?

- Do you have any suggestions for how to remove or clean up the
hasLayout hacks? [2]

- Would you agree that this is as accessible as any CSS rollover can get?

Thanks in advance.

[1] You cannot modify a child of an anchor on :hover unless you modify
the anchor in some way. LAME.

[2] They are ugly and I am afraid some people will be afraid to use
this technique if they do not understand hasLayout.


Christian Montoya ... ...
css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: