Fighting with IE8 opacity

[Cistron]

Hi all, I’m new here.

I’ve been building a new website for my photography business and I’ve found this page very helpful.

Now I’ve come to a point, where IE drives me mad.

Following situation.

Home


About


Prices


Portfolio


Contact






Navigation

Home

About

Prices

Portfolio

Contact

I think you can ignore #listnav, as it’s hidden at the resolution in question and not functional yet. I just wasn’t sure whether it’s relevant for my problem.

Here is the corresponding CSS verbatim. As you can see it is part of a media query and I’m using respond.js to get those working in IE<9.

@media screen and (min-width:600px){

#nav ul{

display:block;

float:right;

padding-top:2em;

padding-bottom:2em;

}



#nav li{

padding:0 0.25em;

}



#nav a{

font-family:'Open Sans Condensed',sans-serif;

text-transform:uppercase;

text-decoration:none;

color:white;

padding:0.5em;

-webkit-border-radius:0.4em;

-moz-border-radius:0.4em;

-ms-border-radius:0.4em;

-o-border-radius:0.4em;

border-radius:0.4em;

}



.sub #nav a{

color:#29251F;

}



#nav a.active, #nav a:hover{

color:white;

background-color: transparent;

background-color: rgba(0, 0, 0, 0.3);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */

filter: 	progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE6–IE9 */

zoom: 1;

}



#listnav{

display:none;

}

}

Now, the .active and :hover transparent background works perfectly fine with rgba in the “good-egg-browsers”, but IE8 has so far choked on all work-arounds I’ve seen to implement the opacity. I’ve tried opacity, alpha-filters, various background combinations on the mother-element (#nav a). HELP! Is this just one annoying bug?

Thanks a lot!

[TheDoc]

It doesn’t look like you are closing your CSS comments. I’m not sure if this is going to have an effect in the browser or not.

When you open the comments with /* you must also close them */.

[Cistron]

Oh yes, thanks. But, no these have been closed in my tests, because otherwise the remaining media queries wouldn’t have worked.

I just copy & pasted the latest code from CSS3please.com, which I tried earlier and thought was the most reasonable way of doing this.

edit: ok, just corrected the code.

edit2: Just wondering if anyone else has come across the same problem, or whether I’m just mad.

[ylc66]

hi,

i might be wrong, but i noticed that you ‘ve writen

filter: 	progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE6–IE9 */

i don’t get

startColorstr=#4C

(neither

endColorstr=#4C

)

i thought you could get some percentage with opacity using :

% (transparent) -> #00 hexadecimal transparency
20% -> #33
50% -> #80
75% -> #C0
100% (full opacity) -> #FF

so, at the end, i would have written something like :

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3300000 ,endColorstr=#3300000);

btw : sorry for my bad english, i’m french :)

[Cistron]

Thank you, ylc66. I like France – just been to Paris :)

I don’t think it’s a value issue though, or could it be?

It is bizarre. When I open CSS3please.com with IE8 and change the transparency value, the example box actually displays correctly. But the same code won’t work in my context. So I can only assume is has to do with the class I’ve applied to the anchor element (.active) and that IE doesn’t like to use transparency with the pseudo-element (:hover).

[ylc66]

hello again !

and “oups” : i might have forgotten some little things:

 background:transparent;

.my color (here black) : needs 6 x “0” (not 5 x “0”) >

000000

.add

zoom:1

so at the end (and i’just tried here in IE8) :

background:transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);

zoom:1;

[Author]

Posts