Sent by Miriam Frost on 31 January 2003 00:12
Hello all --
I'm working on a site, and I've finally convinced myself that it's worth
doing the rollovers with CSS and not JavaScript. I've also finally gotten
them to work -- for the most part. I'm using the background-image method
described in many places:
a#gigs {
display: block;
width: 123px;
height: 46px;
background-image: url(/graphics/gigs.gif);
margin: 0px;
vertical-align: top;}
a#gigs:hover {
background-image: url(/graphics/gigs2.gif);}
( here is the test page: http://www.hellonheels.net/hoh-index.html
and here is the css: http://www.hellonheels.net/pages/hoh.css )
but this is where it gets wierd: rollovers "flash" as empty space in
Mozilla, a (very annoying) split second of nothing inbetween hover and
non-hover states. This doesn't happen in Netscape 7, Opera 7, or IE6 (PC).
It also doesn't happen in Mac browsers. In Mozilla I can see this flash on
this page:
http://www.oreillynet.com/javascript/2001/03/23/examples/example1.html
but not here:
http://www.edginet.org/techie/website/cssimg.html
which as far as I can tell is the same method. Whaa?
I've scoured the css-d archives and while I do see this problem referenced
occasionally, there hasn't been any explanation or fix to this behavior. Is
there anything that can be done? Should I even bother? There's lots of other
things to fix that take priority but I'd really like to use this method in
the future if I can make it work...
Thanks very much in advance for any suggestions and assistance!
best,
Miriam Frost