This subject should be antique by now. I'm having trouble making a background of a div semitransparent and the text/content opaque

here's the code:

<div id="categoriescontainer">
<div id="categories">
<ul>
<li class="home">{backToHome}</li>
<li>{allCategories}</li>
{showCategories}
<li>{showInstantResponse}</li>
<li>{showSitemap}</li>
</ul>
</div>
</div>

the css:

#categoriescontainer {
background-color: #ffffff;
-moz-opacity:0.7;
opacity: 0.7;
filter:alpha(opacity=70);
}
#categories {
border-top: #024e00 dotted 1px;
-moz-opacity:1;
opacity: 1;
filter:alpha(opacity=100);
}
#categories li {
border-bottom: #024e00 dotted 1px;
border-collapse: collapse;
-moz-opacity:1;
opacity: 1;
filter:alpha(opacity=100);
}
#categories li a {
color: #FF6917;
margin: 3px;
-moz-opacity:1;
opacity: 1;
filter:alpha(opacity=100);
}
#categories li a:hover {
background-color: #eeeed6;
color: #000000;
}

Why isn't it working??

The page in action: http://consult.vitanova-info.nl

Opacity is inherited, so if the parent container is set to some opacity other than opaque, it's 'children' will inherit that same opacity.

any suggestions on how to do a decent semitransparent background??

Use a semi-transparent repeating background image.