Grow your CSS skills. Land your dream job.

Strange IE transparency problem

  • # April 26, 2008 at 6:45 am

    I recently wrote a tutorial for my blog that involved using relative positioning of an element overlayed on an image and with that element having an opacity.

    This works fine in FF and Safari(on vista), but in IE the transparency goes all the way through to my background, not the image that the overlay is on.

    Its much easier to see what I mean by looking at the example.
    Crossfader Demo

    I want to get that sorted before I publish the tutorial, so any help is greatly appreciated.

    PS. I’m aware that there are display issues in IE6!

    # April 26, 2008 at 10:11 pm

    Hmmm I see what you mean. That is pretty weird! I don’t have a perfect solution for you, but maybe just a few things to try.

    Looks like you have a div with an id of "image" and a div with an id of "header" separately. You push the header back up on top of the image with some top value and relative positioning. Maybe try and nest that header div inside the image div. Maybe that will be less confusing for IE? Otherwise instead of actually using an inline <img> element for those images, you could use the javascript to swap that image out for a real CSS background-image of that div.

    # April 28, 2008 at 4:47 pm

    Hmm, well I tried all of those apart from the javascript method, plus a few more ideas of my own, including z-index with both header and image with absolute positioning, but no luck.

    I think I’m going to have to go with what I’ve got, but maybe make IE just have no transparency…?

    If anyone has a solution though it’d be great!

    Alex

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".