CODEWITHSUNDEEP
csscross-browsertransparencyinternet-explorer-10
tlynnec
tlynnec

Reputation: 15

cross-browser transparency - works in everything but ie 10

I'm using the following code, which will look familiar to just about anyone who's had to make a background transparent, but not the children's, across multiple browsers. It's for one of the base wrappers on my site.

div#all { 
    background: rgb(255, 255, 255); /* fallback for web browsers that don't support RGBa */
    background: rgba(255, 255, 255, 0.0); /* RGBa with 0.0 opacity */
    /* for ie */
    background: transparent\9; /* for ie - resetting background color hack */
    zoom:1; /* for ie - required for the filters */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); /* for ie 5.5 - 7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF)"; /* for ie 8 */
}

Problem is, it works great right up 'til Win8/IE10 (IE 10 standard only. "IE 10 desktop" is fine). IE 10 shows the site as one solid white block. If I remove the following, IE 10 works, but older versions of IE break.

background: transparent\9; /* for ie - resetting background color hack */

Since IE 10 ignores conditional statements, how does one get around this?

For the reference, i'm pretty good at php/css/html, but my javascript/jquery aren't so hot, so if that's the solution please be detailed. My site is www.waterutilitymanagementservices.com

Thanks in advance!

Upvotes: 1

Views: 3287

Answers (1)

Mo.
Mo.

Reputation: 27455

I met the same issue, I think the issue is reflection of IE8 hack

The best solutions is use suppurate css for IE8 with condition at the top which may not effect other version of IE :) 

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

or you can try like this 

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->  
<!--[if IE 8]>     <html class="ie8"> <![endif]-->  
<!--[if IE 9]>     <html class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html>             <!--<![endif]-->

the you can have suppurate code for dirrent versions 

   .element {  
        background: red;  
    }  
    .ie7 .element {  
        background: blue;  
    }  
    .ie8 .element {  
        backgroundt: green;  
    }  
    .ie9 .element {  
        margin-left: yellow;  
    }

Upvotes: 1

Related Questions