some more png/IE issues

[DJRobThaMan]

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:

<!--[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>


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

In the HTML:

<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>


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 display: none; 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 This is my previous post on switching pngs (http://www.webdeveloper.com/forum/showthread.php?t=111713)

[KDLA]

(IE, before version 6, doesn't recognize "pointer." It used to use the style "pointing hand.")

Add display: block to your link styles.

KDLA

[DJRobThaMan]

Actually, adding display: pointer works (at least on my machine) for IE. display: block would solve my rollover problem???

Thanks

[KDLA]

Sorry - I thought you asked why the pointer didn't work.

Yes. You may have to add a width to your link <a> styles, so the block will be defined. But, until you add display: block, the browser will only recognize the text as the link, not the area around it.

Reference: http://www.w3.org/TR/CSS21/visuren.html#q5

KDLA

[DJRobThaMan]

Thanks a lot!

[DJRobThaMan]

So, I just tried display: block. And even when I gave the anchors widths and heights I'm still having the same problems... Is there anything else you think I could try to fix it?????


Thanks so much for your help,
Douglas

[KDLA]

Not without seeing the page. Sometimes something else in the coding can cause problems. Can you send a link?

KDLA

[DJRobThaMan]

I hadn't uploaded it yet actually, but I will when I get home so you can see it

[DJRobThaMan]

It's up now at this page (http://www.fourlinefilms.com/flf).

Thanks for the help,
Douglas

[KDLA]

You've chosen an unconventional way of coding your rollovers. Normally, you choose an image background, then on the a:hover have it change.

The way you've implemented those transparent .png with a display switch may be the reason. You've assigned the pointer (link action) to the image, which, if the background is transparent, would mean that it would only work when touching the text. Assigning the images as "display:inline-block" may work.
If not, I suggest using the image (text with background, not transparent) as a background for the link, make the link text invisible to the screen, and have the rollover based upon the a:hover.

KDLA

[DJRobThaMan]

I just fixed my problem. If you look in the IE css file you'll see I applied visibility: hidden; to all the images in the menu. I changed that and, instead, applied a filter so that opacity is set to '0' so you can't see it (pretty much the same thing).

I guess this is because (I'm still not convinced but this sounds half-right at least) with the opacity set to '0' the image is still there. But with visibility: hidden; even though the space for the image is where it should be, the actual image isn't there. So the <a> tag is filled with empty space and the hover gets screwed up.

Does this explanation make sense? I really would like to understand why my fix works. Please, let me know what you think.

Douglas