CSS Fix for tranparency in IE?

  • Author
  • #305391


    I like the effect of rounded corners and so I use a lot of png images with partial transparent backgrounds. My site is perfect in Firefox. However, in IE it just looks crazy. I don’t know if it’s because I don’t have the latest version of IE, but could you guys check out my site for me and let me know if A)the images are fine in a higher version, and B) if they aren’t, is there a CSS code I can use to fix this?

    Site – JT 4 Breakfast




    That is a mighty fine-looking blog! Unfortunately, I can’t help you with the IE issue; IE is notoriously fiddly.


    I had exactly the same problem with my site :


    to the point where I just removed all of the PNG’s with transparent backgrounds. I’ve also found that the opacity CSS tag doesn’t seem to work in IE either.

    However, I’ve just checked out your site (which is great by the way) using the new IE8 Beta, and all seems to be fine.

    Hope this helps.



    Thank you both for the compliments. Also, I adore Kylie Minogue, she’s freaking cool, and your site is great as well. It’s nice to know that the blog looks ok in IE8. What about lower versions? If not, can anyone help me and theimpossibleprincess?



    IE6 Doesn’t read alpha transparency, hence the gray background in a transparent .png file.

    It was of my understanding that wordpress had a script to handle this kind of issue and force IE6 to display .png files correctly.

    You indeed can make IE6 display your .png files the way they were meant to, however that requires either JavaScript (not allowed here), parse the files in source code (not allowed here either) and CSS… BUT not even the CSS approach would work here because wordpress would strip out the code. Why? because the code is not valid CSS, thus it gets rejected.

    Hope this explanation helps.



    BTW, I wrote something about a CSS fix a while ago in my blog. Here’s the link if you want to read it:



    ^Boo! Well,thanks. I’ll just have to resort to fake transparency, and throw in the page coloring around every rounded image.



    Well, one solution for .png transparency with older IE browsers is at http://www.twinhelix.com (iepngfix).

    Another solution is to tell yourself that IE 5 and 6 are going to become much rarer in about a year’s time, and not bother with messy hacks. IE7 does .png transparency OK.

    If you want to do rounded corners, then check http://www.phpmyborder.com, which provides several solutions.



    P.S. The above-mentioned tips won’t work with WordPress.com (except with HTML boxes in the sidebar) because they require writing HTML as well as CSS. Remember that on WordPress.com you can pay for the upgrade to re-write your CSS, but you can’t touch the HTML/PHP files of the WordPress package – to do that, you have to set up a WordPress-based blog on your own hosted webspace (download WordPress from http://www.wordpress.org).

The topic ‘CSS Fix for tranparency in IE?’ is closed to new replies.