CSS image rollover problems when using hrefs

[marksk]

Bit of a newbie as you'll guess. I'm having problems using CSS to control rollover images in IE when associated with hrefs. Using this code:

a.link:link {
background:url(assets/on.gif) bottom left no-repeat;
}
a.link:hover {
background:url(assets/off.gif) bottom left no-repeat;
}

In FF this lets you roll over text, swap an image and link to another page all in one go.

However, this doesn't work in IE when the href includes a dot (.) suffix. For instance .com/.co.uk/.html/.pdf.
But it does work when you link to something like Skype which has an href of "callto://mark.sk" - see no dot suffix!!

Any ideas out there?

[Ryan Fait]

That's odd. Could I have a link, please?

The background switch method might help if you're in a pinch. It's better than using two images anyway:

http://www.newguyinennis.com/samples/css_hover/

[karinne]

I agree with Ryan ... use one image and change the background-position to switch states

Pure CSS rollovers without Javascript

[moojoo]

Hoot-Nanny! Wooo!

[Ryan Fait]

Silly moojoo, I already promoted your example

[daygon]

leave him alone he's illiterate and legally blind
Just kidding!

[moojoo]

I never learned to read! So um.. Did it help?

[marksk]

Sorry Moojoo, been busy testing the new site. I tried the idea of using the one image and changing it's position but I couldn't make it work, it just kind of stuck open if you like. Instead I used an image just in the Hover state. Partly through being a bit of a CSS novice and having a deadline I had to drop a few 'nice to haves'. But thanks anyway, have kept the info for another time!

[karinne]

It's not really a nice to have it's a nice-not-to-have-lag-time-when-loading-the-hover-image thing

Have a look at my link - Pure CSS rollovers without Javascript - I have sample code.