Problem with .png background image in IE7 & IE8

[ktsixit]

Hi all,
I’m using a png background image for my submenu li items. This .png image is actually transparent, it’s a shadow image.

During the "slide-down/up" effect, in IE7 and IE8, the png background looks colored in black. I have no idea why this happens. I was hopping you could help me find a solution to this.

I have created a test page so you can see what’s happening by yourself. The page url is:
http://artabout.gr/technofot/

Is it some kind of bug? Can it get fixed?

[imported_Ryan]

Your site seems to be suffering some other problem now as the menu is not loading any CSS at all.

The problem you are seeing is just a bug in the way that IE7 and IE8 handle alpha transparency on loading PNG images. I think you can get around this by loading the image somewhere on page load, perhaps via a large sprite you use for other parts of your pages.

[ktsixit]

Hello Ryan and thank you for your reply

"Ryan" wrote:

Your site seems to be suffering some other problem now as the menu is not loading any CSS at all.

The css was not loading properly before, I fixed it now and you will be able to see the menu.

"Ryan" wrote:

The problem you are seeing is just a bug in the way that IE7 and IE8 handle alpha transparency on loading PNG images. I think you can get around this by loading the image somewhere on page load, perhaps via a large sprite you use for other parts of your pages.

Can you give me an example of what you are talking about? A link maybe? Because I don’t understand the solution you suggest. Do you mean to pre-load the png image?

[imported_Ryan]

You could use javascript pre-loading probably, but that’s kinda crude.

All you need to do is to use that image somewhere else on the page, so that the browser has already loaded it.

If you don’t understand, perhaps try Googling "CSS Sprites" which should show up plenty of resources explaining the advantages of using this approach to image loading.

[ktsixit]

Thanks again for your reply.
I tried using the png image as a background image in body tag, but the problem is not solved.
I suppose that the body background image is the first that’s being loaded, right?

[imported_Ryan]

"ktsixit" wrote:

I suppose that the body background image is the first that’s being loaded, right?

I’m guessing that the first image to load from a CSS file, would be the first which is requested within the CSS but I could be wrong.

[ktsixit]

It’s also the first image that’s requested in css file.
Any other suggestions? Is there some kind of hack I should try? Some kind of changes you may suggest in javascript code?

I really need to fix this

[imported_Ryan]

I don’t think there is a solution for this.

[Author]

Posts