z-index problem

hey, I'm working on the following site
http://beforethestores.com/newbts/
What im worried about is the product links are sowing up behind the image and other stuff...I'll explain

I have .productsite that contains all the elements that format the image, name, price, etc. The only CSS I have for that is setting the z-index low

.productsite{
z-index:100;
}

and then I have .productlink which is the link that I want over the entire product box, it has the following CSS to make it block, absolute so its out of the flow, and a high z-index to put it in front of everything else

.view-products .view-content .views-row .productlink{
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index: 1000;
}

This shows up how I would like it to in some browsers, but in IE6,7,8 and Opera (all the browsers I have tested in other than FF, Safari, and Chrome) the link is behind all the other elements and prevents clicking. Any ideas what could be up. I had a similar problem before, and I thought it was because of invalid HTML, but I fixed all that and its pretty much the same. Any help is appreciated. Thanks!

Well, this probably isn't the answer you want, but avoid using position: absolute. Nothing on your website seems to warrant the use of it. It's very difficult to figure out what different browsers do with z-index, which is only required when you use position absolute. Instead of putting your product links absolutely positioned on top of your site, put them in divs as part of .productsite. You can then position your divs with CSS.

Sorry if this is not the answer you want.

Julian

Hello Bobbo171,
You need to clear your floats and fix your box model.

Read how this clears your floats (http://www.quirksmode.org/css/clearing.html)in #content - #content {
overflow: auto;
padding: 5px;
}
In each 160px high .views-row you have a 160px PLUS 10px margin high .prodDispImg.
margin/padding/border are all included in the total width/height. See how the box model works here (http://www.w3.org/TR/CSS2/box.html).

Well, this probably isn't the answer you want, but avoid using position: absolute. Nothing on your website seems to warrant the use of it. It's very difficult to figure out what different browsers do with z-index, which is only required when you use position absolute. Instead of putting your product links absolutely positioned on top of your site, put them in divs as part of .productsite. You can then position your divs with CSS.

Sorry if this is not the answer you want.

Julian
Well I'm using position absolute to take the link block out of the flow so everything can be placed over/under it, and if these browsers agreed with each other I would be good as gold (that's the biggest most unrealistic if I've ever said) I want to avoid putting the link in there 4 times because that's kinda messy. Ideally there is something I overlooked or that I am not aware of that would make this work in the IEs and Opera

Hello Bobbo171,
You need to clear your floats and fix your box model.

Read how this clears your floats (http://www.quirksmode.org/css/clearing.html)in #content - #content {
overflow: auto;
padding: 5px;
}
In each 160px high .views-row you have a 160px PLUS 10px margin high .prodDispImg.
margin/padding/border are all included in the total width/height. See how the box model works here (http://www.w3.org/TR/CSS2/box.html).
Thanks, I was unaware of using overflow to clear floats, and I must have not been thinking right when I was typing out .prodDispImg. Thanks for pointing those out