PNG Background Image on div container disable links in IE6

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Make a div with a png transparent in BG
2. Put some links inside the div
3. test in ie6

What is the expected output? What do you see instead?
Working links, but appeared disabled.

What version of the product are you using? On what operating system?
ie7(2.0) IE6 - mac Parrallels software

Please provide any additional information below.

Original issue reported on code.google.com by Acid.Mo...@gmail.com on 30 Sep 2008 at 2:36

[GoogleCodeExporter]

Workaround: specify a position parameter of relative or absolute seems to do 
the trick.

Original comment by pdxweb...@gmail.com on 24 Oct 2008 at 7:53

[GoogleCodeExporter]

Nop, the position parameter doesn't work in this particular case. 

Original comment by Acid.Mo...@gmail.com on 24 Oct 2008 at 9:40

[GoogleCodeExporter]

I am experiencing the same problem.  The whole page has a transparent png 
behind it
in a div, and as such the entire page is not clickable.  Took me awhile to 
figure it out.

Original comment by sprilla...@gmail.com on 11 Nov 2008 at 1:39

[GoogleCodeExporter]

use that link   -  position:relative  

Original comment by officialstupid on 8 Jan 2009 at 9:25

[GoogleCodeExporter]

No, "position:relative" does *not* work in this case. This seems to be an issue 
with
all the scripts that fix IE6, unfortunately.

Original comment by spreaf...@gmail.com on 30 Jan 2009 at 4:20

[GoogleCodeExporter]

Try setting the links to position:relative. This places them on a higher level, 
above
the DirectX filter. Use this:

#png_background {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/back.png',
sizingMethod='scale');
    background-image:none;
}

#png_background a:link,
#png_background a:visited {
    position:relative;
}

Original comment by tyler.du...@gmail.com on 19 Feb 2009 at 3:42

[GoogleCodeExporter]

position:relative on link work for me.. thank you..

Original comment by dewant...@gmail.com on 23 Mar 2009 at 10:42

[GoogleCodeExporter]

No, "position:relative" does *not* work in this particular case. Please read 
previous
msgs before post the same "position:relative is the solution".

Original comment by Acid.Mo...@gmail.com on 23 Mar 2009 at 1:21

[GoogleCodeExporter]

I'm having this same problem. Links are completely disabled in IE6 and I can't 
select
the HTML text using the cursor. Has anyone found a REAL solution?

Thanks

Original comment by sism...@gmail.com on 13 Apr 2009 at 2:09

[GoogleCodeExporter]

I think someone should found a solution! The position relative doesnt fix it... 
come
on guys stop lying

Original comment by synapsis...@gmail.com on 5 May 2009 at 6:06

[GoogleCodeExporter]

I just tried the position:relative suggestion and it worked for me. Maybe you 
need to
flush your history for that change to take effect???

Original comment by chris.mo...@gmail.com on 14 May 2009 at 11:01

[GoogleCodeExporter]

I just tried the position:relative suggestion and it worked for me. Maybe you 
need to
flush your history for that change to take effect???

Original comment by chris.mo...@gmail.com on 14 May 2009 at 11:01

[GoogleCodeExporter]

Please!!! READ and reproduce the problem. The Solution NOT is position:relative.

Original comment by Acid.Mo...@gmail.com on 15 May 2009 at 1:10

[GoogleCodeExporter]

position:relative does NOT work for me either, I have a div with a transparent
background and a link; it's not clickable

Original comment by michaelc...@gmail.com on 19 Aug 2009 at 8:22

[GoogleCodeExporter]

This is not a bug with the script. It is a side effect of Microsoft's Alpha 
Image
Loader, which is the key component used to make IE6 render transparent PNG 
files. No
links in or under the div can be interacted with in any form. The div's onClick
property can still be utilized, but only non-transparent areas inside the div 
will
trigger it. It may be possible to use this as a sort of convoluted work around. 
You
will not get a true "fix" for this, though, as it is a flaw inherent to the base
technology.

Original comment by xavi...@optonline.net on 3 Sep 2009 at 4:32

[GoogleCodeExporter]

Not sure if it is of any use for you guys but I just placed a div with a higher 
z-
index and the onclick tags over the div including the background image.
At least that sorted me out.

Original comment by ulf.seek...@gmail.com on 5 Oct 2009 at 2:55

[GoogleCodeExporter]

I've never found a satisfactory solution to this problem. Sometime setting 
position:relative fixes the problem but not always.

As xavierq says in comment #15, this is a problem with the Alpha Image Loader.

Original comment by dean.edw...@gmail.com on 5 Oct 2009 at 3:36

• Changed state: Accepted

[GoogleCodeExporter]

Hi guys
I have had a few similar problems and found that most of the time setting:

position:relative;
z-index:1000; (probably any z-index greater than 1 will work)

fixes the problem in most cases.

The issue seems to be that IE6 renders the z-indexes correctly visually but 
gets it
wrong in selection/clickability order.

The only situation I have had where the above didn't fix the problem is where i 
used
mootools swiff to embed an SWF inside a child of the png-fixed div.

Thanks
Neil

Original comment by weblator...@googlemail.com on 6 Oct 2009 at 8:43

[GoogleCodeExporter]

I have the same problem. Nothing of this works :-(

Original comment by oliver...@gmail.com on 31 Oct 2009 at 11:31

[GoogleCodeExporter]

This is a duplicate of Issue #76.

It should be fixed in the next release.

Original comment by dean.edw...@gmail.com on 10 Feb 2010 at 9:12

• Changed state: Duplicate