Transparent PNG Image Problem in Internet Explorer

Internet Explorer is the main thread for Browser Independent web Solution. Everyperson working with Javascript, css and Image fall into this problem. Among them PNG Image Problem is one of them. The transparent image will work in FireFox but not in IE. 

To Solve this you can use the Following Code: (place this code in your HTML Head Tag)

#gohome img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#gohome img { display: inline-block; }
#gohome { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/browser.png'); }

EXAMPLE:
#span_id img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#span_id img { display: inline-block; }
For Multiple img, write the span_id separated by Comma(,):
EXAPMPLE:
#span_id img, span_id2 img, span_id3 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#span_id img, span_id2 img, span_id3 img { display: inline-block; }

then deine the each image as follows:
EXAPMPLE:

#span_id { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgeSource'); }
#span_id2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgeSource'); }

See the Example in the attachment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s