CSS Opacity not working in IE7 or IE8 even with hasLayout triggered

Question

I have this slideshow with a overlay that pops up on hover, you can view it here. Just hover over any pictures below the 'featured' section. Works great in FF, Webkit, IE9. I made a separate stylesheet for less than IE9 and in it I have declared width, height, zoom, positioning, used all the filters that work in IE.... and I'm not getting opacity in either IE7 or IE8. The div with class overlay is appended with JQuery, is this a problem? Here is my css:

.overlay {
background-color:#fff;
 filter:alpha(opacity=60);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
 zoom:1;
 width:160px;
 height:20px;
 z-index:50;
 position:absolute;
 bottom:0;
 }

Seems to work fine in IE8 on windows for me. It fades to 100% on hover and then on mouseout fades to 0%? — nav, Jan 04 '12 at 22:23
How are you testing IE7/8? IE9's browser modes? Virtual machines? IETester? — thirtydot, Jan 04 '12 at 23:08
I am testing using the browser modes on Windows, @nav it is supposed to only have 60% opacity. — huzzah, Jan 05 '12 at 14:56

score 2 · Accepted Answer · edited Nov 21 '12 at 03:25

2

Your fading routine is adding an inline style that results in progid:DXImageTransform.Microsoft.Alpha(Opacity=60) which is overriding your filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65) in your css. It is typical for a fade routine to put an inline style, but you need to make sure that it either ends where you want it (with the 65% opacity) or it goes away after the fade so that the css is used (in Firefox it appears to be fading with an inline and then deleting the inline once done so that the style sheet opacity is picked up).

Edit (added info from comment on fading with jquery): If you are using .fadeIn() then try instead to use .fadeTo(400, 0.65) (see http://api.jquery.com/fadeTo), the 400 is the default duration for .fadeIn(), so you could change that, and the second number is the final opacity setting

edited Nov 21 '12 at 03:25

runderworld

131
1
4
10

answered Jan 05 '12 at 00:43

ScottS

71,703
13
126
146

Hmm, ok. I am using JQuery for the fade in and out.....this is new territory for me. You wouldn't happen to know how to do that, would you? – huzzah Jan 05 '12 at 15:01
1

@Heather Walters--If you are using `.fadeIn()` then try instead to use `.fadeTo(400, 0.65)` (see http://api.jquery.com/fadeTo/ ), the 400 is the default duration for `.fadeIn()`, so you could change that, and the second number is the final opacity setting. – ScottS Jan 05 '12 at 17:16
Wow, that totally worked! Could you add this to your answer so I can give you credit? – huzzah Jan 05 '12 at 18:43
@Heather Walters--added my comment to the answer as you requested. – ScottS Jan 05 '12 at 19:19

CSS Opacity not working in IE7 or IE8 even with hasLayout triggered

1 Answers1