Incorrect PNG image visualization with IE

I've noticed that IE (sometimes???) doesn't show correctly PNG images with transparent background. :mad:
With Firefox and Mozilla they're showed fine!!!
Example:
http://img177.exs.cx/img177/4559/193...f81b6d57fy.png
Is it (another) bug or what? :confused:

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.

Quote:

---

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?

AlphaImageLoader Filter

PNG Transparency in Internet Explorer

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 :D

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

Code:

---

/*----
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;
}

---

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. :p