Transparant Box Layout Help

[lifeismusic434]

Hello all, I'm relatively new to CSS and HTML, but I'm a quick learner.

I'm trying to do something similar to the image shown below:

http://img91.imageshack.us/img91/9572/42304525.png

I have the header and menu bar in place, but I'm having some difficulity with the four boxes below. I'd like them to be a bit transparant so you can see the background behind, and I'd like them to be laid out as shown in the image. I got the trasparency to work in Opera, but it doesn't work in IE using the following:


div.box {
max-width: 956px; min-width: 956px;
border: 0px solid #FFFFFF;
position: relative;
width: 100%;
}
div.box_contents {
background-color:transparent;
height: 100%;
position: relative;
width: 100%;
z-index: 101;
}
div.box_background {
background-color: Black;
height: 100%;
filter:alpha(opacity=30); /* IE's opacity*/
left: 0px;
opacity: 0.3;
position: absolute;
top: 0px;
width: 100%;
z-index: 99;
}


I tried laying them out using position:relative and then using a bunch of values to get everything lined up, but ran into some problems. First, in Opera, it makes the page waay to long because it thinks the objects are farther down even though I shifted them up. And in IE, they don't show up at all, it's all messed up.

Any help would be appreciated, I've been mainly looking at other's code and trying to replicate it to no avail. Looking forward to your replies.

Thanks!