Internet Explorer CSS Hacks - Transparent PNG and Selectors

February 23rd, 2008 by Aaron

As a reference for myself, I wanted to jot these things down.

First off, lets look at some common css selectors - and how we can use them to identify styles for specific versions of IE. (Note: I am way not into using hacks such as broken comments, etc, in CSS. I’d rather write a selector)

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

** I can’t tell you how many times I wished for the parent/child selector option in IE 6. I’ve written way too many ‘ul ul ul li ul’ type strings

Next, lets check out the behavior for transparent GIFs:

First off, use the conditional comment to bring in the stylesheet only when needed.

Then, the actual behavior:

* html img {
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

The original article (I’ll link it at the end) references HTML .png as well - but I don’t give my png files a class of png… so its not worth it.

At any rate, I’m referencing this article and that article. I just didn’t want them to go offline and not have a copy of them.

Bookmark:

Tags: CSS

This entry was posted on Saturday, February 23rd, 2008 at 10:35 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Internet Explorer CSS Hacks - Transparent PNG and Selectors”

1. Kevin Says:
   May 28th, 2008 at 1:06 pm

   Hi Aaron -

   Question: how would you go about with the PNG IE hack if your elements were being created via JavaScript and injected into the DOM tree like so?

   // pseudocode

   var myimage = new Image(’/path/to/png.png’);
   myimage.setStyle(’filter’, ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’+'/path/to/png.png’);

   // end pseudo

   This does not work for some mysterious reason? Thoughts?

   Kevin

2. Aaron Says:
   May 28th, 2008 at 8:54 pm

   @Kevin: Ok - so I haven’t actually tried this out… but think this:

   Look at the css - its an expression - and it refers to this inside of the expression… and expressions are javascript. SO… try applying this.* to the element in the same way that its being applied in the expression.

Leave a Reply