IE8 opacity error

Question

I am trying to get transparency in a background of a <li> element. the opacity is being a problem in IE8. instead of the background, the whole <li> is getting transparent.

#weeklyPrizeBlocksWrapper li {
    font:bold 11px Arial;
    color: #535353;
    height: 67px;
    background-color: #e4c39b;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
    filter:alpha(opacity=50); 
    opacity:0.5; 
    -moz-opacity:0.5;
    overflow: hidden;
    padding: 6px;
    float: left;
    dislpay: block;
    margin: 0 2px 2px 0;
    cursor: pointer;
}

Answer 1

opacity is applied to all the elements in the list items.

if you want to apply the opacity to the background, it is available in CSS3:

background-color: rgba(255,255,255,.5);

the a is for alpha

For wider support on all browsers, the common to do it is to use a transparent png image. you can use photoshop or any image editor software to decrease the opacity to the level you need.

Answer 2

Google for transparent background in IE. IE has a filter for that. opacity and relative filter are always applied to the whole element, in all browsers.