PNG Menu Rollovers

[aj_nsc]

The page: http://www.stjohnslimos.com/parasail/index2.php

The problem: IE6 (obviously)

If you go to the link above in firefox, you'll see that the menu has a nice (arguably) rollover effect. Forget about the fact that they blink when rolling over right now, that's a pre-loading problem that I'll fix later. I have tried quite a few ways to get the images to rollover in IE6 but I can't figure it out at all. I am using the iepngfix.htc as a behavior on everything in an IE6 conditional stylesheet.

I've spent the whole day re-styling this site that I have designed so it works in all major browsers (IE6,7,FF,Opera,Safari) and I finally got it all working except for this pesky IE6 png problem. If anybody can give me some advice it would be greatly appreciated.

Note: To show I've put a bit of effort into solving this problem I've even tried putting the static "hovered" image on the pages while keeping the background image to the same "non-hovered" images and changing the z-indices or display or visibility properties of the "hovered" png when the anchor is hovered BUT NOTHING WORKS!

If there's no way to deal with this, then I guess that's fine, IE6 users will lose out on a little hover, but that's it. But if anybody knows or thinks they know how I could make a workaround and get the hover effect in IE, I would be forever greatful, thanks.

[WebJoel]

An easier, more reliable way to do a CSS roll-over is instead of using TWO images (the 'name-out/name-over' convention), is to use ONE image that combines the two IMGs into a single image that is the 'positioned negatively' upwards (or sideways) on :hover.

A 100px by 20px image for "a:link" and a 100px by 20px image for "a:hover", becomes a single entity with dimensions of 100px by 40px, and the "hover" state moves the image 'up' by -20px... That way, the single image means a single http-request, and is already 'pre-loaded into cache' for the :hover state, etc. A 3-state image can be also done, for a:link, a:hover, a:active...

Google "CSS Sprites"... you'll discover how~to. :)

[Frank62]

AJ,

[Edit: sorry, wrong interpretation of a Firebug report. Post content removed.]

[Frank62]

AJ,

I think I found the leak. I downloaded some stuff from your site to experiment, and if I disable the .htc (javascript), the .png transparency is gone in IE6, but the roll-over effect is restored.

[aj_nsc]

Frank, thanks for that. So I guess it turns out that what I am looking to be done in IE6, well, can't be done. That's fine if it's true, I guess I will just have to forego the rollover in IE6.

Thanks for your help WebJoel as well, I've changed my CSS and now it looks much cleaner and my markup looks more correct with an image contained within the anchor :)

If anyone has any ideas for a possible workaround for the IE6 hover problem that frank has pointed out with the iepngfix.htc, please post them. Thanks.

[Frank62]

AJ,

Try this: replace the photos li string with this string:
<li><a
href="http://www.stjohnslimos.com/parasail/photos.php"><img src="images/photos-out.png" OnMouseOver="this.src='images/photos-over.png'" OnMouseOut="this.src='images/photos-out.png'" border="0"></a></li>

It disables the background thing for that list item, and replaces it with an image that changes onMouseOver. Do expect the position to change, but I figure you'll have no problem correcting for that. Also, I'm not sure about the relative paths of the image searches, so please make sure that is correct.

[Frank62]

AJ,

[Edited: Sorry, wrong again on my part. Post content deleted. Just go with Joel's method.]

[Frank62]

AJ,

Judging from your site, Joel's background position switch method was blocked too, by the javascript.

However, I gave it another go, and lo and behold, it now works. It was all a matter of syntax. See the attached demo.

[aj_nsc]

Thanks for all the work Frank. I was looking to do a purely CSS rollover, but seeing how the .htc is required in IE6 anyway, I'll just add the onmouseover/out javascript to the menu in the case of IE6. Thanks for your work, it's appreciated.