Parent div locks cursor focus from child divs in IE7

Question

Here is the idea: I have a div element, #content_wrapper, which includes three floating divs, #left_column, #nav and #content. Here are the styles on #content_wrapper:

#content_wrapper {
    float: left; 
    background: url ("images / bg-tan.jpg") repeat-y left center; 
    position: relative;
}

However, in Internet Explorer 7, #content_wrapper seems to have stolen the cursor from children. Whenever I hover over #content_wrapper, the cursor always switches to a beam, and I cannot click any of the links or text inside the div. Thoughts?

Update: I tried the following fixes, none of which worked.

• Apply fixed width to all elements, including parent and top levels
• Apply position: relative to all elements, then z-index
• Using! important for all of the above properties in the case of
• Adding the zoom property to the parent and child div
• Adding the overflow property to the parent div

Answer 1

#content_wrapper { position: relative; z-index: -1; width: 1010px; }

EDIT: you set the z-indexC # content_wrapper to -1. That is why this is happening. Get rid of it or set it to a positive value.

Answer 2

Try

#content_wrapper {
    zoom: 1
}