PDA

View Full Version : PNG Transparency, Could Use Some Help.


andy384
01-15-2006, 12:43 AM
I am well aware of IE and its inability to handle transparent PNG's. I have searched the internet and found a bunch of solutions for this problem. None of them work for me. I think this is because my image is in my CSS file and I am not sure how to apply these fixes properly to the CSS file.

Here is the CSS code for the header image:


#top_container{
background : #990000 url(../images/main_top.png);
height : 250px;
}


The website is here: http://www.freelovemd.com ('http://www.freelovemd.com')

The image is the header image, that is the only one I need fixed for IE.

Any help would be great.

Thanks :)

Creative Insanity
01-15-2006, 01:27 AM
Why not just save all the frustration and convert it to a gif format.

andy384
01-15-2006, 01:38 AM
I tried changing it to a transparent .gif and it doesn't look as good. Now, I could make it a regular .gif but I am having trouble editing the image and exporting it correctly as a regular .gif.

ranjan
01-15-2006, 01:50 AM
1. We want to target only IE with the following styles, so all following styles should be within microsoft conditional comments

<!--[if lte IE 7]>
css code here ...
<![endif]-->

We used IE less than version 7, because IE 7 will support PNG natively.

Now we need the style tags

<!--[if lte IE 7]>
<style>
css code here ...
</style>
<![endif]-->

Now IE should not see the background you specified in your normal stylesheet, so
<!--[if lte IE 7]>
<style>
#top_container{
background-image : none;
}
</style>
<![endif]-->

Now we need to add the PNG using the AlphaImageLoader filter
<!--[if lte IE 7]>
<style>
#top_container{
background-image : none;
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(src='images/main_top.png', sizingMethod='scale');
}
</style>
<![endif]-->
Specify the correct path to the main_top.png image
If you find this not to work float the container

<!--[if lte IE 7]>
<style>
#top_container{
background-image : none;
float: left;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='images/main_top.png', sizingMethod='scale');
}
</style>
<![endif]-->

andy384
01-15-2006, 02:09 AM
Thanks Ranjan!

:) :) :)

Just what I was looking for.

Can I put that whole thing right into my CSS file?

Or should I put it in the html?

The only reason I ask is because of the <style> tag.

andy384
01-15-2006, 02:39 AM
I put it in my CSS file.

The image still looks bad in IE. It does something though because it changed the layout slightly, but the PNG still looks bad.

Does IE just not render it correctly, or as good as Firefox, even with the hack?

ranjan
01-15-2006, 07:52 AM
You were right the first time, that code needs to go into your HTML file.

It works perfectly well!

See an example here ('http://www.areweawake.com/entertainment/testPNG.htm')

andy384
01-15-2006, 02:49 PM
Thanks again Ranjan, I really appreciate you helping me out.

:)

andy384
01-15-2006, 03:29 PM
Ok,

I figured out it needs to be put in the <head> of the html, but it still looks bad in IE. I really don't get it, maybe it is the image.

Take a look at the frontpage, http://www.freelovemd.com ('http://www.freelovemd.com') , in IE and then in Firefox.

You can look at the source and see the code is in there. The problem is it still looks bad in IE and looks right in Firefox.

?

ranjan
01-15-2006, 08:38 PM
Try removing the following from your code
<?xml version="1.0" encoding="iso-8859-1"?>

The XML declaration throws IE 6 in quirks mode (non standard mode)

PS: I dont see the IE specific code on your page

andy384
01-15-2006, 08:48 PM
I use a CMS for this site.

Will removing this line effect my site at all?

<?xml version="1.0" encoding="iso-8859-1"?>

Creative Insanity
01-15-2006, 09:37 PM
andy read what rj is saying:
You were right the first time, that code needs to go into your HTML file.

ranjan
01-16-2006, 02:45 AM
Will removing this line effect my site at all?

It should not for sure in FF and Opera and Safari, but I cannot guarantee the same for IE 6

imported_ove
01-16-2006, 07:14 PM
bloody nice piece of code btw. I honestly thought it wasn't possible. I've just always told people that IE doesn't support PNG alpha channels.