Problem with .png background image in IE7 & IE8

Forums › Forums › Menus › Problem with .png background image in IE7 & IE8

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 24, 2010 at 12:19 pm #1357
    ktsixit
    Member

    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?

    March 30, 2010 at 3:50 am #8301
    imported_Ryan
    Member

    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.

    March 31, 2010 at 9:07 am #8302
    ktsixit
    Member

    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?

    April 1, 2010 at 5:49 am #8303
    imported_Ryan
    Member

    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.

    April 1, 2010 at 6:49 am #8304
    ktsixit
    Member

    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?

    April 3, 2010 at 9:02 am #8305
    imported_Ryan
    Member
    "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.

    April 6, 2010 at 7:03 am #8306
    ktsixit
    Member

    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

    April 21, 2010 at 5:41 am #8307
    imported_Ryan
    Member

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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.