advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

noah on 05/21/07


Tagged

png transparency ie6 hacks


Versions (?)


Who likes this?

7 people have marked this snippet as a favorite

jonhenshaw
trickychicken
basicmagic
mind
vali29
silvan
LeeRJohnson


Transparent PNG CSS for IE6

Published in: CSS 

Apparenttly this does NOT work locally. You MUST view the page on a server. Otherwise the PNG will not show up /at all/ in IE6.

UPDATE: wfdev commented and said that this WILL work locally, but the path to the PNG must be relative to the HTML file, not the CSS file. I haven't tested yet, but that sounds right to me.

Also commenter silvan pointed out a typo, which I fixed. Thanks!

Plain TextExpand 
  1. div.thingy {
  2.   height: 100px;
  3.   width: 100px;
  4.   position: relative;
  5.   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/girl_small.png', sizingMethod='scale');
  6. }
  7.  
  8. * > .thingy {
  9.   background-image: url(images/girl_small.png);
  10. }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: Moyo on January 25, 2008

You would at least imagine it would work on a local apache server... =/

Posted By: noah on March 29, 2008

@Moyo, try using the IP address of your server, or a domain name with a dot in it, instead of "localhost"? Ymmv, it's been a while since I've had the pleasure of working in IE 6.

Posted By: wfdev on April 17, 2008

It doesn't have to be on a server it's just that the src needs to be relative to the html page & not the CSS

Posted By: silvan on May 5, 2008

thanks for the hint.

The second class definition should be with the ": url":

  • > .thingy { background-image: url(images/girl_small.png);}

You need to login to post a comment.