How to change CSS image position during hover for IE?

I have an image that combines normal, mouseover, and active. Using a DIV I hide most of the image to only show a portion of the image. Then during :hover I want the position to change to the highlighted portion of my image. Using negative positoning technique.

The code I have implemented works flawlessly in FF. But IE will not budge, could anyone please provide some insight?

Here are my divs:

<div class="menubar" id="menu_loose">
<a href="" id="img_menu_loose">
<img src="/images/top_menubar.gif" />
</a>
</div>

<div class="menubar" id="menu_rings">
<a href="">
<img src="/images/top_menubar.gif" id="img_menu_rings" />
</a>
</div>

Here is my css:

#menu_loose
{ width:131px; position:relative;}

#img_menu_loose img, #img_menu_loose:visited img
{ position:absolute; top:-0px; left:0px; }
#img_menu_loose:hover img, #img_menu_loose:visited:hover img
{ position:absolute; top:-24px; left:0px; }
#img_menu_loose:active
{ position:absolute; top:-48px; left:0px; }

#menu_rings
{ width:53px; }

#img_menu_rings
{ position:absolute; top:0px; left:-131px; }
#img_menu_rings:hover
{ position:absolute; top:-24px; left:-131px; }
#img_menu_rings:active
{ position:absolute; top:-48px; left:-131px; }


I have tried two different ways of trying to get IE to work. One way is setting the css to point to the anchor tag, and another directly on the image. Both work in FF, but neither in IE.

arkster it would be much better to accomplish your goal using css background images. Here's an example on a menu I recently built:
HTML

<div id="navWrapper">
<ul id="nav">
<li><a href="http://www.rockchurch.com/" id="navRock">The Rock</a></li>
<li><a href="#" id="navHome" class="currentSection">Home</a></li>
<li><a href="prospects/" id="navProspects">Prospective Students</a></li>
<li><a href="students/" id="navCurrent">Current Students</a></li>
<li><a href="faculty/" id="navFaculty">Faculty</a></li>
<li><a href="contact/" id="navContact">Contact Us</a></li>
</ul>
</div><!-- close:navWrapper -->

CSS

#nav {
list-style: none;
}
#nav li {
float: left;
margin-right: 0px;
overflow: hidden;
}
#nav li a {
display: block;
height: 61px;
text-indent: -5000px;
overflow: hidden;
background-position: top;
}
#navRock {
width: 112px;
background: url(../images/navRock.jpg) no-repeat;
}
#navHome {
width: 106px;
background: url(../images/navHome.jpg) no-repeat;
}
#navProspects {
width: 159px;
background: url(../images/navProspects.jpg) no-repeat;
}
#navCurrent {
width: 147px;
background: url(../images/navCurrent.jpg) no-repeat;
}
#navFaculty {
width: 139px;
background: url(../images/navFaculty.jpg) no-repeat;
}
#navContact {
width: 137px;
background: url(../images/navContact.jpg) no-repeat;
}
#nav li a:hover {
background-position: center;
}
#nav li a:active {
background-position: bottom;
}
#nav li a.currentSection,
#nav li a.currentSection:hover,
#nav li a.currentSection:active {
background-position: bottom;
}

Give this way a try. Here's (http://www.trsom.com) the site I used this for.

I've just been doing some then.

Firstly, to work in ie you will need suckerfish, or the whatever:hover javascript on your page. Then after that, its pretty easy.

Example:

.aboutus { left: 0px; }
.aboutus em { background-position: -77px 0; }
.aboutus:hover em { background-position: -77px -21px; }

Is a example from a suckerfish image replacement menu.
The bottom line moves the image up 21 pixels, to reveal its "hover" state. Works great!

I have an image that combines normal, mouseover, and active. Using a DIV I hide most of the image to only show a portion of the image. Then during :hover I want the position to change to the highlighted portion of my image. Using negative positoning technique.

The code I have implemented works flawlessly in FF. But IE will not budge, could anyone please provide some insight?

I have tried two different ways of trying to get IE to work. One way is setting the css to point to the anchor tag, and another directly on the image. Both work in FF, but neither in IE.

IE does not support the :hover property on anything but anchor tags, so I would make the anchor tags block so that they expand to their container block, and do the background positioning changes with their a:hover. This will work cross-browser without needing javascript.