some more png/IE issues

So, I’m not 100% concerned because I have my code working in every other browser and as far as I’m concerned if you actually use IE you should die a slow painful death. But microsoft does have most of the market, so I should try and fix all the bugs I can.

I made a post recently about switching transparent pngs in IE using the :hover pseudoclass. Here is a snippet of what I ended up doing (pretty much the same as the recommendations made in that post)

In the CSS:

[CODE]
<!–[if lte IE 6]>
<style type=”text/css”>

.mainMenu img
{
visibility: hidden;
}

.mainMenu a
{
cursor: pointer;
}

#menu1
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/menu/menu1.png’, sizingMethod=’scale’);
}

#menu1:hover
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/menu/menu1Hover.png’, sizingMethod=’scale’);
}
</style>
[/CODE]

(Is there a reason the cursor wouldn’t automatically switch to pointer over the links???)

In the HTML:

[CODE]
<a id=”menu1″ title=”Check out the latest” href=”/?section=main”><img alt=”What’s New” src=”images/menu/menu1.png”><img class=”over” alt=”What’s New” src=”images/menu/menu1Hover.png”></a>
[/CODE]

The two images are there so that I can switch them in non IE browsers. The hover image doesn’t have a space created for it because it has [B]display: none;[/B] applied to it in another style.

Anyway, the switch does take place in IE but not very well. It only happens when the mouse is directly over the text and not the box that the A tag should create (the link has the same size of the image because I use the visibility attribute to hide the image rather than using the display).

I don’t know if this is clear, but if the mouse is directly over (for example) an “a” in the image then the switch happens, but if the mouse is over the space between letters, words or even over the hole in an “a” then the old image is displayed again. So, if you move the mouse while over the image, it flickers a lot.

Is there a way to fix it, or is this just beyond IE???

Thanks,
Douglas

PS [URL=http://www.webdeveloper.com/forum/showthread.php?t=111713]This is my previous post on switching pngs[/URL]

Also in #CSS _↴