CODEWITHSUNDEEP
imagecssinternet-explorer-7scaling
Joeri Minnekeer
Joeri Minnekeer

Reputation: 602

IE7, CSS3, background images & scaling

Ok, so here's my problem. For a client I'm using a lightbox (in this case slimbox2) I've modified it's contents so that if the images are larger than the screensize, the image max width/height is the screensize itself.

So in other words: if image > screensize => image == screensize

I'm using css3 background-size property for most browsers wich works just fine. And for IE5.5+ I'm using the filter: AlphaImageLoader.

All this is good, but when I hover on the image I should get a next and previous button. This does not work in IE7- It seems the buttons stay under the background image because it has the css filter: AlphaImageLoader on it. Is there any way to make the buttons visible?

Here's a piece of my code (JQUERY MERGED WITH PHP):

        $bgsize = preload.width +'px '+preload.height +'px';
        $(image).css({backgroundImage: "url(" + activeURL + ")",
                          visibility: "hidden",
                          display: "block",
                          'background-size':$bgsize,
                          '-webkit-background-size':$bgsize,
    'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\')',
'-ms-filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\'

Here's the css:

#lbImage {
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
    display: block;
    position: absolute;
    top: 0;
    right:-10px;
    width: 50%;
    outline: none;
}

#lbPrevLink {
    left: 0;
}

#lbPrevLink:hover {
    background: url(prevlabel.jpg) no-repeat 0 15%;
}

#lbNextLink {
    right: 0;
        z-index:20000;
}

#lbNextLink:hover {
    background: transparent url(nextlabel.jpg) no-repeat 100% 15%;
}

PS: tried the most common solutions like z-index, positioning relative/absolute, etc..

Upvotes: 1

Views: 620

Answers (1)

Paul Sweatte
Paul Sweatte

Reputation: 24617

AlphaImageLoader puts an image between the object background and content, so everything underneath is obscured. Use a background-size shim or a pure CSS lightbox as an alternative.

Upvotes: 1

Related Questions