Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

IE7, CSS3, background images & scaling

IE7, CSS3, background images & scaling

Problem

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..

Problem courtesy of: Joeri Minnekeer

Solution

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.

Solution courtesy of: Paul Sweatte

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

IE7, CSS3, background images & scaling

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×