Ever since I was pushed to figure out the IE PNG filter hack in CSS it has become essential to my website building. Although it does allow a lot more flexibillity when designing and building websites, it has its quirks.

Slowly I have been feeling out the parameters of the png hack. There have been about three times where I must have spent between 3-5 hours trying to figure out why either it wasn’t working, or it was causing other weird issues. Namely the linking issue. There is a thorough guide here, a lot more thorough than anything I would write on the subject. I’m just here to complain, oh and my own solution is listed as well.

It seems if you are using the scale mode within the filter, and the element with the png is positioned relative, then the links within that element cannot be clicked on or rolled over within IE. Where does this leave us? Frusterated, disappointed, thinking of tables (scratch that), hating microsoft, etc…

Currently I am coding a layout that is incredibly complex. It has tons of relative positioning, pngs, and css columns. The challenge is to get it all working cross browser, as well as make it all valid.

There were three main problem areas, but the most difficult one proved to be my right column. Here’s what I did.

Start with the positioning of my Right Column and leave all png stuff out.

div#rightColumn {
float: left;
width: 410px;
position: relative;
left: 30px;
font-size: 12px;
}

Create a second div within the RightColumn that will fill it 100%. This way you avoid the relative positioning and the a tags can be clickable.

div#rightColumn div. content {
float: left;
padding: 34px 60px 15px 30px;
width: 320px;
background: url(images/bg_floatedLayers.png) top left;
}

This is the IE filter hack.

* html div#rightColumn div. content {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/bg_floatedLayers.png”, sizingMethod=”scale”);
}

Lastly I added z-index’s to my a tags so they can be above the png. Not sure why you have to do this, but hey it works. Oh and for z-index to work, it needs a position.

div#rightColumn div. content a {
position: relative;
z-index: 1;
}

It is a ton of extra work between figuring out the solution and implementing it. Hopefully people will stumble on this solution quicker than I did. Makes me wonder if Microsoft is liable for all of the time we spend catering to their browser. It’s ridiculous. Yes, I am annoyed right now.

The site I am relaunching is nicholasgalanin.com and I will further illustrate it when I launch.

Popularity: 10% [?]