Opacity in ie6 & ie7 not working

[leighchic]

Hi there

I am trying to create a gallery whereby the pics are set to a lower opacity and when you rollover them, they light up to 100% opcaity. My gallery in working finr in firefox, but its not working in any of the IE's.

Can anyone please assist me with a fix for this?

My code is as follows:

HTML
---------------------------

<ul id="gallery">

<li><a href="images/Africa/Image1Large.jpg" title="A Giraffe" rel="lightbox[africa]"><img src="images/Africa/image1.jpg"></a></li>

<li><a href="images/Africa/Image1Large.jpg" title="A Giraffe" rel="lightbox[africa]"><img src="images/Africa/image1.jpg" alt="a giraffe"></a></li>

<ul>


CSS
---------------------------

ul#gallery {
list-style:none;
width: 960px;
margin: 0 auto;
margin-top:15px;
}
ul#gallery li, ul#gallery li img {
float:left;
width:148px;
border:0px;
margin-right:1px;
margin-bottom:1px;
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity:0.5;
}

ul#gallery li a img:hover {
border:0px;
filter: alpha(opacity=1.0);
-moz-opacity: .10;
opacity:1.0;
}

[leighchic]

You can see it here:

http://www.leighdesignstudio.com/james/portfolio.html

[rihamfathy]

i think your css should be looking like this i tested it and it works

ul#gallery {
list-style:none;
width: 960px;
margin: 0 auto;
margin-top:15px;
}
ul#gallery li, ul#gallery li img {
float:left;
width:148px;
border:0px;
margin-right:1px;
margin-bottom:1px;
}

ul#gallery li a img:hover {
border:0px;
filter: alpha(opacity=40);
opacity: 0.4;
}

[leighchic]

Thank you for your response, but that didnt work in IE for me. Also, its not what i want.

I need the images to be at 50% and when rolled over they become 100% - i need a fix that will enable this to work in IE 7 and 6.