Incorrect PNG image visualization with IE

[carloc]

I've noticed that IE (sometimes???) doesn't show correctly PNG images with transparent background.
With Firefox and Mozilla they're showed fine!!!
Example:

Is it (another) bug or what?

[rohitk89]

yep, i think it is.

im not too sure abt the technicalities, but i was inspecting the .css coding for a wordpress blog template called 'One Road' (at http://alexking.org) which used lots of transparent images.

it had a special tag in the code to correct this error of transparent images not showing properly when viewed in ie.

[carloc]

Originally Posted by rohitkumar

it had a special tag in the code to correct this error of transparent images not showing properly when viewed in ie.

Rohit, what special tag?
Can you post the link of the .css file you're talking about?

[Reverend]

AlphaImageLoader Filter

PNG Transparency in Internet Explorer

[rohitk89]

yep, i sure can...here is the link. You have to scroll down and search for the template titled 'one road'. Use firefox's page search- ctrl+f- for faster results

and below is the code. for the bit abt transaparency et al, read the part in bold:

/*----
CSS Done by Paul Hoch - http://www.thehochhouse.com/wp/
Using TopStyle Pro 3.10
Small portions copied from the 'buddha' style available at Alex King's site
Background Image courtesy of Stock Exchange available here: 
http://www.sxc.hu/browse.phtml?f=view&id=175119
Photo Taken by: kazer a.k.a Tyler Kellen	 

IE doesn't support Alpha Transparency for PNG files so 
I'm using a filter setting for IE that sets the transparency
FireFox and Opera ignore that setting as they display the inherent
transparency of the PNG files.

I created the PNG Files using Paint Shop Pro.  They are 50px X 50px with 60% opacity

----*/
/* Main Styles */

body {
	background-image: url('images/bg.jpg');
	background-attachment: fixed;
	background-position:  left bottom;
	background-repeat: no-repeat;
	font-family: "Georgia", Verdana, serif;
	font-size: 100%

}
	
p, td, th, li {
	font-size: 1em;
	line-height: 1.65em;
	color: white;
}

a:link, a:visited {
	color: white;
	border: 1px none white;
}

a:hover {
	background-color: #EFD16B;
}
acronym, abbr {
border-bottom: 1px dashed #333;
}
acronym, abbr, span.caps {
cursor: help;
font-size: 90%;
letter-spacing: .07em;
}
blockquote {
background-image: url('images/lquote.gif');
color: white;
padding-left: 40px;
 background-repeat: no-repeat;
 background-position:  left top; 
}

cite {
font-size: 90%;
font-style: normal;
}

ins  {
background-color: navy;
text-decoration: none;
  }
  
del  {
background-color: #ccc;
  }

 /* WP Stuff */
#rap {
   margin-top: 100px;
	padding: 0.5em;
	left: 10%;
	width: 66%;
	color: white;
	background-image: url('images/green.png');
	filter: Alpha(opacity=80);
	border: thin solid #99FF66
}

#header { 
	position: absolute;
	top: 10px;
	left: 10%;
	color: white;
}	

#header a {
	text-decoration: none;
}
#header a:hover {
	text-decoration: underline;
	background-color: transparent;
}

/* Menu */
#menu {
	position: absolute;
	top: 0px;
	right: 1%;
	width: 15em;
	border: 1px solid #003399;
	font-size: 0.85em;
	padding: 0.5em;
	background-image: url('images/blue.png'); 
	filter: Alpha(opacity=80) 
}

#menu ul {
	width:100%;
	margin-top: 0;
	padding-left: 0;
	margin-left: 0;
	margin-bottom: 1em;
	color: black;
	list-style: none;
	font-weight: bold;
}

#menu ul ul {
	margin-left: 0;
	font-weight: normal;
}
#menu a:link, #menu a:visited {
	padding: 1px;
	color: black;
	border-width: 1px;
	border-style: none;
	display: block;
	width: 100%;
	text-decoration: none;
}

#menu a:hover {
	background-color: #EFD16B;
}


#menu form{
	margin: 0 0 1em 0;	 
}

/* Calendar */
#wp-calendar {
	border: 1px solid #ddd;
	empty-cells: show;
	font-size: 14px;
	margin: 0;
	width: 90%;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
	text-decoration: none;
}

#wp-calendar a:hover {
	background: #e0e6e0;
	color: #333;
}

#wp-calendar caption {
	color: #999;
	font-size: 16px;
	text-align: left;
}

#wp-calendar td {
	color: #444;
	font: normal 12px  Georgia, Verdana, sans-serif;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
}

#wp-calendar td.pad:hover {

}

#wp-calendar #today {
	background: #eee;
	color: #bbb;
}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}

/* Input Forms */
input {
	font-family: Verdana, Tahoma, Arial, sans-serif; 
}
/* The Date */	 
#content h2 {
	float: right;
	margin: 0;
	font-size: 0.85em;
	font-weight: normal;
	background-color: #FFFFCC;
	padding: 0.3em;
	margin-left: 0.4em;
	border: 1px solid #F8E7B0;
	color: black;
}

.storytitle { 
	margin: 0;
	color: white;
}

.post-categories {
	display: inline;
	margin: 0;
	padding: 0;
	color: white;
}
.post-categories li {
	display: inline;
	margin-left: 0 3px 0 0;
	padding: 0;
	color: white;
}

.post .meta {
	font-family: Verdana, Tahoma, sans-serif;
	margin-top: 0;
	font-size: 0.75em;
	color: white;

}
.post .feedback {
	margin-bottom: 3em;
	padding-bottom: 1px;
	color: white;
}

p.credit {
	color: white;
	background-image: url('images/navy.png'); 
	border: thin solid Black;
	filter: Alpha(opacity=80);
	text-align: left;
	width: 66.5%;
	left: 12%;
	padding-left: 10px
}
.clear {
	display:block;
	clear:both;
	margin:0;
	visibility:hidden;
	}

/* Quick Tags Styles */
/* 
	I have an alternate Quick Tags file that uses
	http://weblogtoolscollection.com/archives/2004/03/24/wordpress-javascript-quicktags/
	which includes some extra tags and divs required
*/
.imgleft {
	float: left;
	padding: 5px;
	margin: 4px 14px 4px 2px;
}	
.imgright {
	float: right;
	padding: 5px;
	margin: 4px 2px 4px 14px;
}	
.imgcenter img {
	padding:5px;
	margin:4px;
}
.imgcenter {
	text-align:center;
}

.img-shadow {
		clear: both;
		float:left;
		background: url('images/shadow.gif') no-repeat bottom right !important;
		margin-left:8px; margin-right:0; margin-top:20px; margin-bottom:0
	}
.img-shadow img {
	display: block;
	position: relative;
	background-color: #fff;
	border: 1px solid #a9a9a9;
	margin: -6px 6px 6px -6px;
	padding: 4px;
}
.p-shadow {
	width: 90%;
	float:left;
	background: url('images/shadow.gif') no-repeat bottom right !important;
	margin-left:15px; margin-right:0; margin-top:30px; margin-bottom:0
}

.p-shadow div {
	background: url('images/shadow.gif') no-repeat left top !important;
	padding-left:0 !important; padding-right:6px !important; padding-top:0 !important; padding-bottom:6px !important
}

.p-shadow p {
	color: #777;
	background-color: #fff;
	font: italic 1em georgia, serif;
	border: 1px solid #a9a9a9;
	padding: 4px;
	margin: -6px 6px 6px -6px !important;
	margin: 0;
}

[carloc]

The AlphaImageLoader Filter works... but require that ActiveX controls are enabled in IE! Doesn't it?
I'd like a solution that works for any type of user settings...

...and just to add a bit of challenge, I want to put this solution (if it exists...) inside a PHP script.