Parent div is blocking cursor focus from child divs in IE7

Question

Here's the idea: I have a div element, #content_wrapper, which encompasses three floated divs, #left_column, #nav, and #content. Here's the styles on the #content_wrapper:

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

However, in Internet Explorer 7 the #content_wrapper seems to steal the cursor from the child elements. Whenever I hover over the #content_wrapper, the cursor always switches to a beam and I'm unable to click on any of the links or text inside the div. Thoughts?

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

• Applying fixed width to all elements, including parent and top level children
• Apply position: relative to all elements and then z-index
• Using !important on all the above properties in case
• Adding the "zoom" property to parent and child divs
• Adding the "overflow" property to the parent div

Answer 1

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

EDIT: You are setting the z-index of #content_wrapper to -1. This is why it's happening. Get rid of it or set it to a positive value.