CSS & HTML - Written by admin on Wednesday, March 19, 2008 10:10 - 2 Comments

PNG transparency issues

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

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.

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 ;)

Read more:
»» Make fancy buttons using CSS sliding doors technique
»» Make fancy buttons using CSS sliding doors technique
»» Most used CSS tricks
»» Vertical align div
»» What do you think about Gif ?


2 Comments

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.

Top Stumbles - Best of StumbleUpon
Apr 21, 2008 11:22

PNG transparency issues…

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….

Geoserv
Apr 21, 2008 11:23

STUMBLED!

Thanks for sharing, PNG is a real pain at times.

VOTED for this post at:
http://www.newsdots.com/design/png-transparency-issues/

Leave a Reply

Comment

Most Popular Content

PHP, Tip & Tricks - May 30, 2008 3:20 - 0 Comments

Reuse Excel business logic with PHPExcel

More In Code


PHP Tip & Tricks

Photoshop Tips - May 31, 2008 8:20 - 0 Comments

Popular Wealth - Free Photoshop Brushes To Download

More In How to ?


PHP Tip & Tricks

Wordpress - May 31, 2008 3:34 - 0 Comments

Thinking the Way Animals Do

More In I LIKE IT !


I LIKE IT ! Software Technology