Goro 0

Hello,

I am having issues with implementing hover in IE7 (what else)

I have a list of links like this:

<div id="sidebar-links">
  <ul>
    <li><a href="">Link #1</li>
    <li><a href="">Link #2</li>
    ...
  </ul>
</div>

I want to have an image off to the link side when I hover over it, so my css looks like this:

#sidebar-links ul li {
padding: 0 36px 0 0;
}

#sidebar-links ul li:hover {
background: url('img/selected.png') no-repeat top right;
}

This works fine in mozilla/IE8.

In IE7, the first element in my list displays the hover image properly, but none of the others (i.e. when I hover over "Link #1", the image appears to the side, but when I hover over "Link #2" it does not).

Thanks,

3 answers

1
point
This was chosen as the best answer

I recall having problems getting IE to refresh background images, when that's the only change, try adding a border on hover and see if that works.

If not show the rest of your code, there may be something else that's wrong, that we can't see here.

Answered over 9 years ago by Tony Crockford
Major 4
1
point

if you want support for :hover on all elements and not just the <a> tag in IE7 , make sure you're using a strict DOCTYPE so IE7 doesn't kick in to quirks mode. so just try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> I try it, it works well.

Answered over 9 years ago by Major
Goro 0
0
points

Using borders on hover revealed that my hover elements were there, but had a height of 0. Fixing height to what I need it to be (36px) will make it work properly in IE7. However, it breaks IE8.

Answered over 9 years ago by Goro