Posted by matt, Wed Aug 23 09:48:00 UTC 2006

or: More IE Hell

Well, I may be in an anti-IE rut, but this is where I’ve been tearing my hair out lately… Once again, I’ve developed a site top-to-bottom on my Mac, and am only now testing it in IE. Fortunately, IE really only seems to require CSS tweaks (i.e. lots of ”* html” selectors), but I just ran into a problem that is particularly intriguing.

I’m using CSS sprites as a way around the usual image slicing required for rollovers. It usually works great, but it didn’t work so well on my latest site. I’m doing the usual:

div#nav a:hover img, div#nav a.sel img { margin-top: -40px; }

This simply pulls the image up behind the mask created by the containing anchor set for overflow:hidden. This “masks” the image, and allows you to pull it up by half it’s height to do the rollover. Pretty slick.

However, in IE for some reason it doesn’t want to re-draw the image, so it appears that the :hover state never gets fired. However, on pages that have the “sel” class applied to the active nav element, the pullout works fine. Bear in mind that this doesn’t require a re-draw, because it’s already there when the page is initially rendered. So… why won’t IE re-draw in response to the :hover?

Well, to be honest, I’m not sure. I’ve done some experimenting with how the nav bar is positioned to see if it’s a page layout issue, but that doesn’t seem to be it. The code is almost identical to previous times I’ve done this, so I’m somewhat at a loss. However, I did find a workaround:

div#nav a:hover { border: 0px solid black; }

The non-border border seems to trigger a re-draw in IE, and then the rollovers work just fine. I’m going to continue investigating what might be causing this particular instance, but for now this solves the issue.

Filed Under: General General Tech | Tags: css html ie