progid:DXImageTransform.Microsoft.AlphaImageLoader causing links to be unclickable in ie8, ie7, and ie6

css internet-explorer filter background

12,017

Per this explanation:

http://css-tricks.com/perfect-full-page-background-image/

"...anyone trying to use the above IE filters and having problems with scrollbars or dead links ... should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height."

You could add a containing div just inside the body, then.

12,017

Author by

Matt

Updated on June 05, 2022

Comments

Matt almost 2 years
Here's the CSS that applies the background so that it stretches with the browser window:
```
html {
    height: 100%;
    width: 100%;
}

body {
    background: url(images/skyline.jpg) no-repeat center 25% fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/skyline.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/skyline.jpg', sizingMethod='scale')";
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #ddd;
    height: 100%;
    margin: 0;
    width: 100%;
}
```
I have no problems when using FF, Chrome, Opera, or IE9, but in IE8 IE7 and IE6 (not that I should care about IE6) none of the links work.

When I disable the filter attribute the links work again. I read up that positioning the links relative might help but it didn't work and the outter element <body> isn't positioned relative anyway.

The site is http://sytko.com. The design and layout was requested to be this way by the client so it will be hard to pitch alternatives. Any help is greatly appreciated.