I am using a div class as a link. On hover the image is supposed to swap via CSS.


HTML:

<a href="#"><div class="navbutton">Link 1</div></a>

CSS:

.navbutton {
text-align: right;
width: 150px;
height: 30px;
background: url(images/buttonlight.gif) no-repeat;
cursor: hand;
padding-top: 5px;
padding-right: 3px;
}

.navbutton:hover {
width: 150px;
height: 30px;
background: url(images/buttondark.gif) no-repeat;
cursor: hand;
}

In FireFox and Opera, this works PERFECTLY. However, our *cough*stupid*cough* old friend Internet Explorer is not so kind.

First issue: IE does not display the link (hand) cursor unless you use "cursor: hand;"

Second issue: IE does not do the image swap. This I have not yet figured out a way to overcome yet.

Does anyone know?

-Mel

for your html you can use:

<a href="#" class="navbutton">Link 1</a>

for your css it will be then:

a.navbutton {
text-align: right;
width: 150px;
height: 30px;
background: url(images/buttonlight.gif) no-repeat;
cursor: hand;
padding-top: 5px;
padding-right: 3px;
}

a.navbutton:hover {
width: 150px;
height: 30px;
background: url(images/buttondark.gif) no-repeat;
cursor: hand;
}

unless there is something else you want to achieve with it :) then offcourse cursor: hand; isn't needed anymore since now it is specified as a link.

love,
Mirna

Thankyou muchly :)

I would love to use the cursor:hand; to spank IE for being so darn pms. I sure hope IE7 has at least SOME improvements with it's CSS support.

Your welcome :)

Love,
Mirna