A while back a put together a technique for a pure CSS image rollover which I dubbed MIR and I posted it here:
http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ 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. Success: http://temp.rdpdesign.com/mir/mirtest.html 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. [3] http://www.satzansatz.de/cssd/onhavinglayout.html -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
