Opacity in IE8 Works on <P> But Not on <A>

Opacity in IE8 works on p but not on a

Try giving the anchor display:block, but then you will have to fix its css properties like the width, height .... etc.
But once you give the anchor the property display:block the opacity will work fine.

According to the comments, you may have luck with display: inline-block;zoom:1 - The inline-block works on IE8, the zoom will target IE 6/7.

Opacity CSS not working in IE8

No idea if this still applies to 8, but historically IE doesn't apply several styles to elements that don't "have layout."

see: http://www.satzansatz.de/cssd/onhavinglayout.html

Opacity is not working on images in IE8

Yes, change these two lines:

.slide-out a:hover{color:#F36F21;}

.hover-products{position: relative; width:338px; margin:20px 0 50px 15px; height: 90px;}

to this:

.slide-out a:hover{color:#F36F21; position: relative;}

.hover-products{width:338px; margin:20px 0 50px 15px; height: 90px;}

Opacity not working on IE8

As explained on this page: http://www.quirksmode.org/css/opacity.html IE8 (and below) do not support opacity so you have to use the rather clunky code provided by Fabian.

I think an easier option is to simply do what Madmartigan suggests and use jQuery's fadeTo()-method as it will cater for all modern (and not so modern) browsers:

$('.productImage').fadeTo(0, .25);

I also noticed some things that could be improved in your code. Using only .class selectors is slower than providing the tag name as well as jQuery has to go through EVERY element and match the class instead of just img (for example) elements. You're also not taking advantage of jQuery's ability to chain method calls which not only speeds up a bit but also makes the code tidier:

$(function () {
  $('div.out-of-stock').each(function () {
    $('img.productImage', this).css('opacity', '.25');

    $('p.stockMessage', this).removeClass('stockMessageOff').addClass('stockMessageOn').css('opacity', '1').text('Sold Out');
  });
});

Just a tip! :)

css opacity not working in IE

opacity does not work on pseudo objects in IE 10,9,8

Try this code:

HTML:

<div></div>

CSS:

div{
  width:100px;
  height: 100px;
  background: blue;

  filter:alpha(opacity=30);
  -moz-opacity:0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

div:after{
    content: ' ';
    position: absolute;
    width:100px;
    height: 100px;
    left: 200px;
    background: blue;

    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

Click to see it in action

What you're supposed to see is two squares both semi transparant. However IE disregards the opacity properties for the pseudo item, and it renders it completely opaqe.

Setting opacity with jquery not working in IE8, but works in IE7

Why are you using opacity at all? Why not just use a lighter color to simulate the effect and not have the overhead the opacity property introduces.

CSS alpha opacity IE8 overflow is being hidden

got rid of the z-index in the fiddle.. that z-index confuses IE8, and it believes that you don't want overflow when you have it.. That is IE for you...

http://jsfiddle.net/ANh4k/40/

  #feed-container-outline.mini.active {
        display:block;
        position:absolute;
        zoom:1;
        right:5px;
        top:45px;
        width:370px;
        height:53%;
        min-height:320px;
        background:#ED9A27;
        opacity:.4;
        border:2px solid #F16719;
        -moz-box-shadow:1px 1px 3px #aaa;
        -webkit-box-shadow:1px 1px 3px #aaa;
        -o-box-shadow:1px 1px 3px #aaa;
        box-shadow:1px 1px 3px #aaa;
        overflow:visible;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
}

 #feed-container-outline.mini.active .tab {
        display:block;
        overflow:auto;
        position:absolute;
        float:right;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        width:70px;
        right:-1px;
        top:-45px;
        height:45px;
        background:#ED9A27;
        border:2px solid #F16719;
        border-bottom: 0px;
}​

Opacity css issue in IE 8 used in jQuery animate

why cant you try http://jsfiddle.net/9FBrx/

$('#lveis-wrapper_3').animate({
                height : '300px',
opacity:'0'                  
            }, 1200, function () {
                // Animation complete.
})

---

Related Topics