Skip to main content


This topic contains 2 replies, has 0 voices, and was last updated by  epicalex 11 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #22599


    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!


    Chris Coyier

    This reply has been reported for inappropriate content.

    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.



    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!


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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star