Enteries RSS (1052) 12
2007
20:40 pm
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
<!–[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.
.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 
del.icio.us (
StumbleUpon
Digg
Wong it
27 Responses, March 25th
2008
14:38 pm
@ Luke
Well everything from this, just use on or another for different things as in text
What works perfectly with IE? That’s the question! Thank you for interesting article! Take care. Luke
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
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:
And there is a google.code page to it:
http://code.google.com/p/ie7-js/
it has worked fine for me so far 
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
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
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
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
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???
February 7th
2008
3:27 am
To make the links inside a div with a transparent background work, just add:
.someelement a {
position: relative;
}
January 13th
2008
19:20 pm
@ Erik
Well you just treat it like regular image, for example
background: url(image.png) top left;
January 13th
2008
19:16 pm
Hi, did you know any way to use background-position with png transparency on ie < 7?
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
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?
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.
December 30th
2007
22:23 pm
Wow,thanks. I didn’t know about this solutions of png transparency problems…
- Apr 28, 2008: Internet Explorer 6 için saydam PNG desteği » Tekil Yazı » Fatih Hayrioğlu'nun not defteri
- Apr 18, 2008: 10 best CSS hacks
- Mar 19, 2008: 10 best CSS hacks « Share4Vn.com Blog
- Mar 7, 2008: NilDesign.ru » 10 лучших CSS хаков + кроссбраузерность
- Mar 7, 2008: CSS-FAQ » Blog Archive » CSS Hacks for You! (First Serving)
- Mar 7, 2008: Thatgrafix Web Design Portland Oregon
- Feb 20, 2008: 10 best CSS hacks « DELE DURO!!!
- Feb 19, 2008: » I 10 migliori hack per CSS | DoZ-log |
evden eve nakliyat:
May 5th
2008
16:07 pm
thank you nice sharing