Wednesday, May 21, 2008

IE6 Png Fix...Dotnetnuke

Some days ago, I had to add a transparent png image to my webpage. EVerything was displaying just fine, except in Internet Explorer 6.0. The problem was that my PNG image had some transparent layers and those regions were displayed as a kind of light blue color. In otherwords, PNG images with transparency don't show the transparent areas in IE6, and thus you will have to apply some filters to get your work done.

CSS

#curvature{
position:absolute;
top:0px;
left:340px;
height:75px;
width: 106px;
background-image:url(images/curvature.png);
z-index:2;
}

* html #curvature{
background-image : none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='/Portals/_default/Skins/CompanyName/images/curvature.png');
}

In fact, in normal case, you would use just "images/curvature.png" as relative pathname, but the fact that I was using this inside DotNetNuke, and I don't know for what reason, I had to put the image path from the Portal directory. Otherwise it was not working.
So in normal case, you would use

* html #curvature{
background-image : none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/curvature.png');
}

Also, in my case, I used the image filename same as its container Div, but it's just a matter of choice. They don't need to be the same name

2 comments:

Unknown said...

I'm really stuck with this. I use the same method and on my first page (in DotNetNuke) it works but when I go to any other page, the PNG's have a red cross (so the file hasn't been found)...

Vishal said...

Hi,

Did you use the path of the image as follows in your CSS?
Something like
/Portals/_default/Skins/CompanyName/images/curvature.png'
You need to include the /Portals/_Default/Skins/..... otherwise dnn d'ont find it.