PNG link in IE6 with negative positioning

[jochem]

Hi y'all,

I'm working on a single image rollover in CSS, using a PNG image. Works fine in all browsers, exept IE6 of course.
When using the regular PNG fix for IE6, the rollover fails and the entire image shows. How can I solve this?

And how do I get rid of the flicker again?

Jochem


Without IE6 fix:

#LINK-3         {width:82px; margin-bottom:3px; cursor:hand;
                 background:url('_img/image.png') no-repeat 0 0}
#LINK-3 a       {width:82px; height:36px; display:block}
#LINK-3 a:hover {border-bottom:3px solid #de0000; background:url('_img/image.png') no-repeat 0 -36px}

<div id="LINK-3"><a href="#"></a></div> 

Including IE6 fix:

#LINK-3         {width:82px; margin-bottom:3px; cursor:hand;
                 background:url('_img/image.png') no-repeat 0 0 !important; background:none; filter:none !important;
                 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabeled='true', src='_img/image.png')}
#LINK-3 a       {width:82px; height:36px; display:block}
#LINK-3 a:hover {border-bottom:3px solid #de0000;
                 background:url('_img/image.png') no-repeat 0 -36px !important; background:none; filter:none !important;
                 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabeled='true', src='_img/image.png')}

<div id="LINK-3"><a href="#"></a></div> 

[KDLA]

IE hates negative margins. Try moving it the other way.

[jochem]

It works fine without the PNG fix, so the negatives don't seem to be the problem here.

[KDLA]

That was something I encountered with IE -- thought it might be the same for you.
I found it easier to stack the images and shift them vertically, rather than horizontally.

[jochem]

They are shifting vertically...

[KDLA]

Yes, you're right, and I'm wrong. I meant that my fix was horizontal. Sorry - It's been a long week!

[jochem]

Yep, a few more hours and it's weekend!!
Any solution for the PNG fix?

[KDLA]

As to the flicker, it could be attributable to your browser settings. If you have IE set to "check for new versions of the page every time you visit," you'll always get that flicker. You could use javascript to preload the image, but it may not be necessary. Most people (only developers, I think) set their browser to empty the cache on each page viewing.

I'm curious as to why you're using two background attributes in your link & rollover -- one set to a background, and another set to none. IE usually reads the first and ignores the second. Perhaps you meant background-color: none?

[jochem]

I found this fix somwhere on the net and it looked good to me. I forgot where. I know there are also shorter versions with just the AlphaImageLoader line.

[jochem]

By the way, thanks for your time looking into my problem.

[jochem]

Back to my first post in this thread. Does anyone know how to solve the problem?

Jochem