IE support transparent background on PNG?

[aconstas1]

I'm building new css/xhtml site. I have a png image with transparent background in my header. It shows up great in Firefox, but when I view the page in IE on different computers, it shows up with a white background... What's goin on? Can i fix this?

Thanks for your answers.

[aconstas1]

Re: IE support transparent background on PNG?

Here is the link to the page if that helps. Thanks in advance for your help.

http://www.aapossolutions.com/xhtml/greenindex2.html

Any help is much appreciated.

[aconstas1]

Re: IE support transparent background on PNG?

Ok i have generated the same image in PNG and in GIF formats... They both show up with transparent background when i view with Firefox and both show up with a white background in IE.... so i guess Im doing something wrong here. Please tell me how it appears to someone else... The link is above.

[aconstas1]

Re: IE support transparent background on PNG?

Here is the link to the page if that helps. Thanks in advance for your help.

http://www.aapossolutions.com/xhtml/greenindex2.html

Any help is much appreciated.

the new link is http://www.aapossolutions.com/xhtml/greenindex3.html

The problem is the same.

[Karen Mac]

Re: IE support transparent background on PNG?

Ok Alex

youre driving me insane here... First off .png isnt a good choice for web formats, very often the browser will correct to a gif or jpeg so that it can be viewed. What are you editing your images with? You have to be careful depending on what you are using and verify your settings and EXPORT an image as a gif rather than SAVE as a gif in alot of programs or it will merge the background.

I use both firefox and ie.. and the background is white on the mixers if thats what you are going on about.. otherwise.. ive no idea.. are you talking website in general background or that specific image?

Karen

[aconstas1]

Re: IE support transparent background on PNG?

Hi Karen. Sorry if I was not informative enough.

I went to cooltext.com and used their logo generator to generate several logos. After generating the logos, you can choose to save the image as several file types. I saved the same logo as both gif with transparent background and png with transparent background. Then I uploaded them to my image file in my account. Since I am building this site straight through BVs HTML editor, and since it uses a css file, I cannot hit preview and see the site as it will appear. I can preview, but none of the css instructions apply. Regardless of this, i still see the logo at the top of the BV page. When i publish the page to voda and visit the link i provided up top I see the page with css applied.

When i view it in Firefox, the logo has a transparent background, and i just see the words a & a pos solutions with the textured header background. When I preview the site with IE, i see a white box surrounding the logo. This seems to be the case whether i use the .png version or the .gif version of the logo. I don't understand why this is happening. Thanks for your willingness to help. Sorry for my end of asking the question.

Any reply will be appreciated. Thanks in advance.

[Karen Mac]

Re: IE support transparent background on PNG?

Alex..

Im wondering if its because of the h1 tag you have placed before the image, but no text, I think it should be around your text and not the logo, but.. if you assign background colors etc to the heading area you should also assign it to the h1 tag too! See if that works, it may be defaulting to white because its NOT assigned.

Karen

[aconstas1]

Re: IE support transparent background on PNG?

I actually did have a background assigned to the H1 tag. it was set to inherit. however, I removed the h1 tag and still no solution. Then instead of inheriting the backgrounds, I actually went in and set the same background on all of them. still no avail. I just don't get it. I've assigned background image to all the different divisions and also tried assigning it only to the header then inheriting the background from all the others but IE still does not recognize the proper background. Any other ideas?

[Watdaflip]

Re: IE support transparent background on PNG?

Its whatever you use to create the image. I opened the image, and resaved it as a .gif with a image editing program and it shows up transparent in IE. It messed up the green shadowing behind the letters, but it worked none the less. (I probably didn't adjust for quality or something).

If you don't have an image editing program theres a good free one called The Gimp. http://www.gimp.org

[aconstas1]

Re: IE support transparent background on PNG?

I'm pretty sure that the image is ok. I made a test page with a background image, used the same image and published it. It shows up fine in IE.

http://www.aapossolutions.com/xhtml/test.html

This shows the same .png image with the same background and it shows up fine in IE. So i'm obviously doing something wrong in my default.css or in my page html. I just can't put my finger on it. I'm trying everything I can think of.

[aconstas1]

Re: IE support transparent background on PNG?

I got it to work. Not the way I expected, but i'll take it. I just deleted it out of my HTML and just stuck it ontop of the html box in BV and it works. Thanks for your help Karen and Watdaflip. I've been strugglin with this one for a while.

[sameer]

Re: IE support transparent background on PNG?

hello "Karen Mac",

i do not agree with the underlined text in your reply box. as far as i know .png is the next generation format that is widely used in the website now a days.

correct me if i am wrong.

Ok Alex

youre driving me insane here... First off .png isnt a good choice for web formats, very often the browser will correct to a gif or jpeg so that it can be viewed. What are you editing your images with? You have to be careful depending on what you are using and verify your settings and EXPORT an image as a gif rather than SAVE as a gif in alot of programs or it will merge the background.

I use both firefox and ie.. and the background is white on the mixers if thats what you are going on about.. otherwise.. ive no idea.. are you talking website in general background or that specific image?

Karen

[LadyEye]

Re: IE support transparent background on PNG?

Sameer,

I am with you on this one, I just recently began using the png format and I find it much cleaner too, so I too am interested in this answer ... I see my image format on both IE and FF, so I am hoping it is not just me seeing it ...

[proactivator]

Re: IE support transparent background on PNG?

Hi, I'm pretty sure that PNG is pretty much universally supported in today's browsers: you could not say that a few years ago.
PNG format comes in two guises that differ in very pronounced ways.

PNG-8. Very similar to a GIF, but produces a smaller file. In the same way as a GIF is best for non gradient images.

PNG-24. Produces larger files than a JPG, is a lossless format and maintains subtleties in an image such as soft shadows and different levls of transparency. There are other things about a PNG-24 that I cannot remember. I only use this format for images where it is essential to keep the nuances of a high quality image. Which is hardly ever!

So you can see that the 2 different PNG applications really are about as different as can be.

[zuriatman]

Re: IE support transparent background on PNG?

Hi,
I just tested your link on both Firefox and IE and I see no difference! the header bg on both show the same color.

Have you ever check your advance browser settings in IE which needs to be configured?

.Png and .Gif are used in webpages because they support transparency while Jpeg does not.

Here is something worth filing.

What is a JPG image?
A JPG image file is a format created by the Joint Photographic Expert Group. JPG files are best suited for complex images such as photographs and very intricate graphics. The features of JPG are:

* Can have up to 16.7 Million colors in an image.

* Uses a method of compression (squishing) that is called lossy. This means that the image suffers some loss of quality or distortion.

* Most graphics editors allow you to control the trade off between compression and quality.

* Most of the time the controls in the graphics editors that control the trade-offs make no sense to anyone!

* Cannot be made transparent. This is a feature that GIF offers and will be discussed later on.

As a general rule, a complex image with many colors will be smaller as a JPG than a GIF file. So if you are presenting a photograph, JPG is usually the way to go.

What can I do to make my JPG images load faster?
Take a close look at the two identical pictures below. You can see that they are very detailed and colorful. Are you sure they are really the same?

Don't start playing Where's Waldo! The difference between the two pictures is that the one on the left contains about 27,000 distinct colors and the one on the right only 256. The file on the left is 34,000 bytes and the one on the right about 17,000. This means that the picture on the right will load twice as fast as the picture on the left. The difference in quality is very hard to detect, but you just saved your reader some time.

It is important that when you reduce colors that you do not use dithering. The process can actually wind up increasing the size of your picture file.

Another trick is to reduce the size of your image, not with the HEIGHT/WIDTH attributes of HTML, but with your graphics editor. Be careful of distortion and color loss.

You can also present what are referred to as thumbnail images. These are tiny pictures representing the full size ones. You then make the small image a link that if selected will then display the larger image. This way you give your reader a choice as to whether they want to see the big picture. (pun intended)

Why can't I use JPG for everything?
I the example below are two images. The one on the left is a JPG and the one on the right is a GIF. If you look closely you will see that there is a substantial amount of distortion in the JPG image. The GIF image is crystal clear and quite attractive.

But wait, there's more! The JPG picture is almost three times the size of the GIF. 6,000 bytes vs 2,000 for the GIF. Why?

As I mentioned earlier, JPG is good for compressing complex, detailed pictures. It is also lossy which means that some details are lost when the image is compressed. In the case of simple graphics, the JPG format is obviously the wrong choice.

What is a GIF Image?
The GIF format is another form of image compression. There are two GIF standards, the one we are working with is called 89a. As you can see from our last example in our JPG discussion, it is great for simple graphics. It also has the following features, and limitations:

* The image can contain up to 256 colors and no more.

* You can reduce image size by using less colors.

* One color can be selected to be the background color which allows the underlying page color to show through. This is called transparency.

* Can also create an effect called interlace where the image is drawn as a blur that comes into focus as the image loads.

* The process is lossless. The image suffers no loss of quality when compressed.

* When created with an animation editor, multiple GIF images can be put together like a set of cartoon cels, allowing for simple moving pictures.

When should I use a GIF Image?
It is very evident that the GIF format is completely different from JPG. As with any tool, picking the right one for the job at hand. GIF is the ideal choice of format in the following situations:

* Nice, bold page banners.

* Simple icons, especially arrows and such.

* When you want a transparent background.

* If you need animation.

What is this transparent background you keep mentioning?
The GIF-89a standard allows you to pick one color that for practical means, is invisible to the browser and allows the underlying color or image to show through.

Then two images above are in fact identical, except for one minor detail. The image on the left I created telling the graphics editor to make the background color purple (which is not a color I used). The image on the right has its background color set to black. Our obedient browser is displaying the images just as I intended.

You should be aware that most graphic editors set the default background color to black. This is not always desirable.

Do your GIF images suffer from the JAGGIES?