top
30
12
2007
20:40 pm
filed as: CSS, Javascript
author: Dejan Cancarevic
comments: Subscribe
27 Responses

If you are CSS coder, you’ve probably ran in to png transparency problems many times. Even Microsoft is having problems with it http://runonce.msn.com/runonce2.aspx open in IE6. So I’ll tell you few problems and solutions I’ve handled so far.

First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I’ve used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. You can download it here http://homepage.ntlworld.com/bobosola/pngfix.js and just include it in your <head> tag

PNG

<!–[if lt IE 7.]>
<script defer type=”text/javascript” src=”pngfix.js”></script>
<![endif]–>

The second one can partly handle issues from first and it’s pure CSS solution. I mostly use this for backgrounds, because if your path for a background is from CSS file then png fix can’t handle it.

PNG

.someelement {
background-image: url(images/image.png);
}

* html .someelemen {
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=”images/image.png”, sizingMethod=”scale”);
}

I found this very useful, and also when you add some hover effects for example some color or other image. You can see live example here
NOTE: This simple hover is just example and it doesn’t work in IE6

.someelement:hover {
background: #333;
}

.someelement:hover {
background-image: url(images/image2.gif);

}

Only problem I had with this was with <a> tag, link just don’t work (when it’s in div with this kind of background) and i don’t know why (talking again for IE6). And only solution i could think of was to place another absolute div over it for the links, content etc… Yes i know it’s not elegant but it works if content is not dynamic.

Luckily more and more people are starting to use IE7, and i must say i have recently switched too, i had to have IE6 because of testing my code and when i found out for Multiple IE program I switched immediately ;)

Subscribe full RSS RSS
  • del.icio.us del.icio.us (0)
  • StumbleUpon StumbleUpon
  • Digg Digg
  • Mister Wong Wong it
27 Responses, Leave a Reply
27
cep program
May 5th
2008
16:07 pm

thank you nice sharing

26
Cornices
April 10th
2008
9:29 am

There’s always problem with IE alpha deadlock… What a crap!

25
Dejan
March 25th
2008
14:38 pm

@ Luke
Well everything from this, just use on or another for different things as in text ;)

24
Strony Internetowe
March 25th
2008
9:59 am

What works perfectly with IE? That’s the question! Thank you for interesting article! Take care. Luke

23
George Reilly
March 11th
2008
1:49 am

Be aware that IE6 can deadlock when using the AlphaImageLoader. I wrote about it at http://blogs.cozi.com/tech/2008/03/transparent-png.html

22
andrej
February 19th
2008
15:22 pm

There is a great solution, which fixes a lot of issues with ie6 and lower. And implements png transparency.

I found it by chance through an article over at 24 ways. Its by Dean Edwards:

http://dean.edwards.name/ie7/

And there is a google.code page to it:

http://code.google.com/p/ie7-js/

it has worked fine for me so far :)

21
Ian
February 17th
2008
12:28 pm

There is another way, and it even works for PNG in CSS backgrounds.

http://www.twinhelix.com/css/iepngfix/

regards

20
Jerome
February 12th
2008
11:19 am

Thanks a lot…
Just tried it and it works…oh my oh my… I got stuck on it for 1 and half day, thanks again.
Cheers.
Have a good day

jerome

19
Dejan
February 12th
2008
10:55 am

and one more thing, where ever you are using float links are working so try to float rest of content that should help

18
Dejan
February 12th
2008
10:52 am

Hi Jerome,
I’ve looked at your site and the problem is in position:relative;
Header and footer links are working but content wrapper is relative and all inner divs. So just change that and let me know if it’s working

Also you can post your question on KnowHow forum for more help

17
Jerome
February 12th
2008
10:39 am

Hi there,

I got a prob with pngfix.js that works well and takes out all the errors of pngs when rendering in IE6 but the prob is that my links now do not work in my main content. http://www.gbackup.co.za.

Tried everything and cant find a sol..
Please can anyone help???

16
markuz
February 7th
2008
3:27 am

To make the links inside a div with a transparent background work, just add:

.someelement a {
position: relative;
}

15
Dejan
January 13th
2008
19:20 pm

@ Erik
Well you just treat it like regular image, for example
background: url(image.png) top left;

14
Erik
January 13th
2008
19:16 pm

Hi, did you know any way to use background-position with png transparency on ie < 7?

13
Anders
January 11th
2008
9:39 am

You’ve seem to forgotten about the wonderful js library IE7

12
Dejan
December 31st
2007
0:06 am

@ Stan
Yes you are right thanks for pointing it out, but i thought it will be obvious without ; at the end of the row

11
Stan
December 30th
2007
23:21 pm

Hi Dejan, can you tell me if this “AlphaImageLoader(src=”imag..” is in same row as “filter: pro...” ? I guess it is?

10
Zoran
December 30th
2007
23:06 pm

Thanks, for the great article, I also had few png problems and this helped me figure some of them out.

9
Majda
December 30th
2007
22:23 pm

Wow,thanks. I didn’t know about this solutions of png transparency problems…

8 Trackback(s)
  1. Apr 28, 2008: Internet Explorer 6 için saydam PNG desteği » Tekil Yazı » Fatih Hayrioğlu'nun not defteri
  2. Apr 18, 2008: 10 best CSS hacks
  3. Mar 19, 2008: 10 best CSS hacks « Share4Vn.com Blog
  4. Mar 7, 2008: NilDesign.ru » 10 лучших CSS хаков + кроссбраузерность
  5. Mar 7, 2008: CSS-FAQ » Blog Archive » CSS Hacks for You! (First Serving)
  6. Mar 7, 2008: Thatgrafix Web Design Portland Oregon
  7. Feb 20, 2008: 10 best CSS hacks « DELE DURO!!!
  8. Feb 19, 2008: » I 10 migliori hack per CSS | DoZ-log |
What do you think?

Name (required)

Email (will not be published) (required)

Website

About

StylizedWeb is blog about web trends and tutorials and KnowHow community forum designed and maintained by Dejan Cancarevic.

Six Shooter Media
logo and web site design

Search