Monday, June 1, 2009

PNG images problem for ie6

Hi,
Today i have a problem regarding the png images dot displaying properly in IE6 browser.
Then i find some of the best solution regarding this they are listed below :

1. IF YOU ARE USING PNG IMAGE AS SOURCE IMAGE :

if you are using png image like the following :
< img src=".png" / >
then all you have to do is to place the following code in your head section of the page :


2. IF YOU ARE USING PNG IMAGE IN Css as Background image :

if you are setting the png images in your css file as background image then the follwoing is the solution :
.tab {
background-image:url(images/tab_b.png);
background-repeat:repeat-x;
background-position:0 0;

height: 42px;
position: relative;
top: 0;
z-index: 999;

}

then you can use the following in bold to hack the png for ie6 and you done

.tab {
background-image:url(images/tab_b.png);
background-repeat:repeat-x;
background-position:0 0;

height: 42px;
position: relative;
top: 0;
z-index: 999;
_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/tab_b.png, sizingMethod='scale');
}

3. If There are png images in both your css and page then you can use the follwing script
to correct ong effect :


var bgsleight = function() {

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
fnFixPng(obj);
obj.attachEvent("onpropertychange", fnPropertyChanged);
}
}
}


function fnPropertyChanged() {
if (window.event.propertyName == "style.backgroundImage") {
var el = window.event.srcElement;
if (!el.currentStyle.backgroundImage.match(/transparent\.gif/i)) {
var bg = el.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
el.filters.item(0).src = src;
el.style.backgroundImage = "url(blank.gif)";
}
}
}


function fnFixPng(obj) {
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
var sizingMethod = (obj.currentStyle.backgroundRepeat == "no-repeat") ? "crop" : "scale";
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
obj.style.backgroundImage = "url(blank.gif)";
}
return {
init: function() {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
addLoadEvent(fnLoadPngs);
}
}
}
}();

bgsleight.init();

place the above code in js file and set the path of the file in your page.Also place a blank.gif file in the same directory where the .js file is.

You can get image below :

1 comment:

  1. aslkum
    sir,
    im parvez alam from delhi. I m newly in asp.net.
    i making a project payroll.
    nd i sufferring a problem
    making employee attendance sheet with help of gridview.

    grid view dispplay all employee attendance monthly wise.

    like

    EmpNAme EmpId 1 2 3 4 5 6 7 8 9..30 0r 31
    parvez emp01 P P P A H/2
    Naseer emp02 A A P P P


    i stored all information in transcation table
    which contain daily attendence all employee.
    plss help me

    ReplyDelete