What's the preferred solution to fixing non-clickable content after applying an IE6 filter for pngs?

Question

<div id="calendar">
  <p>Text</p>
  <div class="section">blah</div>
</div>

I'm applying the PNG to #calendar, in IE6 I use filter but it makes the content not clickable - I believe the way around this was to force everything inside to be positioned ( eg position:relative ) and have a z-index + hasLayout but sometimes it doesn't work.

Should I instead wrap all my stuff in another div and apply the png BG to a sibling node such like this, or what?

<div id="calendar">
  <div id="calendar-bg"></div>
  <div id="calendar-content">
    <p>Text</p>
    <div class="section">blah</div>
  </div>
</div>

Then force the calendar-bg to be absolutely positioned and 100% width/height, and relatively position #calendar-content on top of it? Or is there some other hidden way that the mainstream png fixer scripts ( ala htc, jquery.pngFix ) work?

Answer 1

I believe the way around this was to force everything inside to be positioned ( eg position:relative ) and have a z-index + hasLayout but sometimes it doesn't work.

Position:relative doesn't trigger hasLayout. You should try something simple like zoom:1 with a z-index.

I'm pretty sure (going from my memory of dealing with a similar problem) that trying to relatively position stuff on top of a png in IE6 doesn't work, but specifying z-index does.

Answer 2

That is indeed the (only) correct solution to this problem I ever came across. You can't rely on your first solution (positioning the childs relatively), because the opacity filter in IE is thrown over all child elements, with the child elements not being clickable as a result.

So just make sure the png is not in the parent element of a clickable element.

So, create a parent with the property 'position: relative' (or absolute, depends on your layout) and insert two children for the background and the actual content.

Example:

<div id="calendar">
   <div id="calendar-bg"></div>
   <div id="calendar-content">
       <p><a href="#">Text</a></p>
   </div>
</div>

 
 #calendar { position: relative; }
 #calendar #calendar-bg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; /* Or the height and width in pixels if you know them */
    width: 100%; }
 #calendar #calendar-content { 
    position: relative;
    z-index: 1; }