IE6 png problem (not the problem you think....;-)

HTML & CSS
1

this is not the usu. IE/png problem… that one I solved a long time ago…:wink:

I have a div with a png bg-image, and positioned on top a button that closes the div; but in IE6 the button to close the div (positioned absolutely inside the div) is not actionable (can’t click on it) I determined it’s the png bg-image that’s causing this… I created another identical div with a jpg bg-image and problem does not occur on the div w/jpg bg-image…

http://mayacove.com/dev/charts/chart_test.html

button at top right opens the div with a png bg-image…
link beneath div opens div with a jpg bg-image…

this problem is occurring only in IE6, in IE7 and IE8 this works fine…

thank you very much…

2

I meant that the element that held the png background image image was positioned. You just need to first position your element in the normal way and then add an intermediate element to hold the background image instead.

The alpha image loader only works on background images anyway. The Png script makes use of the alpha image loader filter to automate the process but you can simply do it in css by yourself. If there is a foreground image the js script usually replaces the script with a transparent pixel gif and then either inserts and element of the same size and applies the original source of the image as a background to this element (or can even apply the background as a background to a transparent image).

In CSS you would do something like this:


.test{
width:300px;
height:200px;
background:url(images/round-transparent.png) no-repeat;
}
* html .test { background:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/round-transparent.png', sizingMethod='image');
}

The original background image is removed otherwise there would be conflicts. The alpha image loader isn’t a substitute for the background property and does not natively have repeat or positioning functions which is where some of the scripts are useful because they can add this in.

The problem with the alpha image loader is that it doesn’t really sit in the same place as a normal background but sits above the background which seems to be the reason for the clicking issues although it does work in some situations and not in others and can depend on the exact [URL=“http://www.daltonlp.com/view/217”]pixel size of the image used.

The png scripts do slow the page down and are best avoided so it’s wise to avoid transparency in IE and either use png8 instead or give IE alternative images as noonope mentioned.

unfortunately I have to position the div.

I gave you a fully working example in my previous post. Just copy and paste and test :slight_smile:

Yes I forgot about that one but have never actually tried it. There seem to be quite a few caveats with all methods so I guess it’s a choice you will have to make for yourself.

3

i haven’t been able to confirm the problem using the link provided. i’ve used ie collection and ietester.

are you able to confirm it on your side, Paul D’B? it’s still png there, even for ie.

one thing i’ve noticed though: img class="chart2 has no metrics for height and width values, e.g. width=“407” height=“229”.

4

i’ve tried it in ie6.0.2800.1106 and ie6.0.2900.2180 and the close button works…

5

Hi,

Yes this is is the problem with the alpha image loader filter (that your png script must use) and it makes links unclickable when the element it is applied to is positioned. The solution is that you should never place a png image on a positioned element. Sometimes you can get away with adding position:relative to the anchor but most times they simply don;t work.

In your case the solution is to move the large png image into a non positioned div of its own and then Ie is fine.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="imagetoolbar" content="false"/>
<script type="text/javascript" src="http://mayacove.com/dev/charts/js/jquery_1.4.1.min.js"></script>
<script type="text/javascript" src="http://mayacove.com/dev/charts/js/pngFix.js"></script>
<script type="text/javascript" src="http://mayacove.com/dev/charts/js/home.js"></script>
<style type="text/css">
body {
    background:#fff;
    margin:30px 0 30px 0;
    font: bold 14px verdana, sans-serif;
    color:#333;
}
#wrapper {
    margin:14px auto 0 auto;
    width:1200px;
    position:relative;
}
a {
    outline:none;
}
#main {
    float:left;
    width:410px;
    margin-right:20px;
}
#main #chart {
    margin-top:10px;
    width:407px;
    height:229px;
    position:relative;
    z-index:600;
}
[B]#main #chartExpanded_png {
    display:none;
    width:541px;
    height:310px;
    position:absolute;
    left:10px;
    top:330px;
    z-index:800;
    border:1px solid green;
}
#main #chartExpanded_png div{
    background:url('http://mayacove.com/dev/charts/images/chart_expanded_test.png') no-repeat;
    width:541px;
    height:310px;
}[/B]

#main #chartExpanded_jpg {
    display:none;
    background:url('http://mayacove.com/dev/charts/images/chart_expanded_test.jpg') no-repeat;
    width:541px;
    height:310px;
    position:absolute;
    left:570px;
    top:330px;
    z-index:800;
    border:1px solid green;
}
a#expandChart {
    cursor:pointer;
    position:absolute;
    right:-1px;
    top:-1px;
    display:block;
    width:28px;
    height:27px;
    background:url('http://mayacove.com/dev/charts/images/btn_expand_chart.png') no-repeat;
    text-indent:-9999px;
}
a#expandChart:hover {
    background:url('http://mayacove.com/dev/charts/images/btn_expand_chart_roll.png') no-repeat;
}
a#contractChart {
    cursor:pointer;
    position:absolute;
    right:7px;
    top:7px;
    display:block;
    width:28px;
    height:27px;
    background:url('http://mayacove.com/dev/charts/images/btn_contract_chart.png') no-repeat;
    text-indent:-9999px;
    z-index:800;
}
a#contractChart:hover {
    background:url('http://mayacove.com/dev/charts/images/btn_contract_chart_roll.png') no-repeat;
}
a#contractChart2 {
    cursor:pointer;
    position:absolute;
    right:7px;
    top:7px;
    display:block;
    width:28px;
    height:27px;
    background:url('http://mayacove.com/dev/charts/images/btn_contract_chart.png') no-repeat;
    text-indent:-9999px;
    z-index:800;
}
a#contractChart2:hover {
    background:url('http://mayacove.com/dev/charts/images/btn_contract_chart_roll.png') no-repeat;
}
</style>
</head>
<body class="inner">
<div id="wrapper">
    <div id="main">
        <div id="chart"> <img class="chart2" src="http://mayacove.com/dev/charts/images/chart_test.jpg" width="407" height="229" alt="" /> <a href="" id="expandChart">expand chart</a> <a href="" id="expandChart2">open jpg chart</a> </div>
        <div id="chartExpanded_png">
           [B] <div>[/B]
                <!--<img class="chart2" src="http://mayacove.com/dev/charts/images/chart_expanded.png" width="541" height="310" alt="" />-->
                <a href="" id="contractChart">contract chart</a>
         [B]</div>
[/B]        </div>
        <div id="chartExpanded_jpg">
            <!--<img class="chart2" src="http://mayacove.com/dev/charts/images/chart_expanded.jpg" width="541" height="310" alt="" />-->
            <a href="" id="contractChart2">contract chart</a> </div>
    </div>
</div>
</body>
</html>
6

“The solution is that you should never place a png image on a positioned element…”

thank you very much for your response… just one note: the png image (the button) was placed on a background-image, not a positioned image… this is why I thought this is so weird… or wait, you mean b/c the div where the button sits is positioned? hmmm… unfortunately I have to position the div… what I posted is fraction of a somewhat complex layout… and the div with the png has to open at a certain position on the page (maybe if I put a non-positioned div (declaring position:static for it?) inside a positioned div?? :wink:

thank you very much… certainly learned something new, didn’t know you couldn’t (for IE6) put positioned png’s inside positioned elements…

and thank you very much for taking the time to post that code…

7

oh my gosh… well, it doesn’t work in mine and on other IE6’s on other colleagues’ machines… in the end I opted for making the bg-img a jpg for IE6…

thank you…

8

Unless we can get a code which will replicate this issue, then unfortunately we are unable to help :slight_smile:

9

I solved IE6 problem by wrapping div in a positioned div and putting a non-positioned div inside it (which contains the png bg-image)
http://mayacove.com/dev/charts/chart_test.html
now the button that sits in div w/png works in IE6 (it closes the div)

but after have opened div and closed it once the button to open it no longer works (in IE6); unfortunately have not been able to reproduce this problem in my example, but would appreciate any ideas… it’s the same situation… only lots more content on the page… but basic layout of the divs in question is the same… (they’re also inside a div called “main” and there’s other paragr’s inside this “main” div, above and below the divs in question… but nothing unusual…)

thank you very much…

10

I personally haven’t looked at the png fix from jquery but assuming it’s all like others, they all suffer from the same problem (except the rare exceptions Scallio posted :))

11

DD_BelatedPNG doesn’t rely on the ImageAlphaLoader but uses VML and doesn’t suffer from this problem (can’t click whatever that’s child of a positioned element) :twocents:

12

It’s working in the example so proof of concept is that it does work and therefore the problem must lie somewhere else,

It’s likely that you have other elements overlapping somewhere and you may have a z-index issue or the element is perhaps going over another png background.

The only way to debug is to remove sections of a code at a time until the problem disappears and you can see which element is causing the problem.

Without a link to the page we can’t really help any more that that.

13

but you can. png8. and JavaScript png-fix thingie… you should forget about it. use a different set of images for ie and use the conditional comment to make css pointing to them instead. there is a thread debating just that, where ds60 shared some useful info on that, but he disagreed with my solution: a second set of images for ie.

14

you mean the pngFix.js from jQuery right? (or maybe it’s not jQuery, not sure…)
which means effectively always, actually, since you can’t put a .png in IE6 (& maybe other IE’s also?) w/o using that JavaScript png-fix thingie… thanks again…

15

Only when using an alpha image loader script :slight_smile:

16

you are able to confirm it on your side, Paul

Yes in IE6 on my IEtester I can’t click the little circle with the minus symbol on the png image to close it. The one on the jpg works fine.

It’s a long standing problem and the reason that I don’t usually use the png scripts because they can’t really handle it automatically.

If you are using the alpha image loader filter to display images and those images may have anchors placed on top then its best to only apply the images to static elements. In most cases it just means that first you position the element and then secondly you nest another div to hold the background image.

If you can get away with it an easier choice is to use png8 images created in Fireworks and IE6 gets index transparency while the rest get alpha transparency. It depends on the image though as to how good it looks. Alex wrote an article about it some time ago.

Or just give IE6 a jpg :slight_smile: