This is my first post, so my apologies if I break any of the forum rules or if this question has been answered before.

I am using "styles/smoothness/jquery-ui-1.7.2.custom.css", "js/jquery-1.3.2.min.js", "js/jquery-ui-1.7.2.custom.min.js"

A friend of mine wants to launch a photographic website with a large photograph used as the background image of the main page, they then want an accordian style main menu to be 60% opaque over this image.

In my style sheet I have

.semiOpaque
{
    zoom: 1;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    filter: alpha(opacity=60);
    MozOpacity: 0.6;
    KhtmlOpacity: 0.6;
    opacity: 0.6;
}

and in my html I have

<div id="homePageMainMenu" class="semiOpaque">
        <div id="accordion">
                <h3><a href="#">The Gallery</a></h3>
        </div>

This works just as I expected in Firefox and Safari, but in IE7 the accordion is displayed at 100%, even though other, non jQuery UI,  elements in the div after the accordion are displayed at 60%

I also tried <div id="accordian" class="semiOpaque"> but that didnt work either.

What am I doing wrong?