Empty Div doesn't register CSS events in IE6

I have two elements that have the same event onmousedown. The elements also have a Cursor: move property set in the CSS style. The elements are empty, and need be be empty, or at least transparent, except for the border.

In IE 6 the only the border registers the cursor change or activates the javascript event handler. IE6 treats the empty div's like they don't exist. If 开发者_JAVA技巧you hover or click on the border, it changes the cursor and can activate the onmousedown event.

This is not a problem in FF... Anyone know what's going on?

Example Fiddle

It's because IE6 hates web developers.

Make it happy by forcing the div to be non-empty, with a   as content.

<div id="ie6-hates-you">&nbsp;</div>

It works in ie6 if you remove position:absolute;top:0;left:0 from both containers.

Add float:right to #container2 and you get the same layout.

Wrap a container around the 2 divs and set it to position:relative;

<div id="test-container">
    <div id="container1"><div id="container2"></div></div>
</div>

css

#test-container{position:relative;width:300px;height:300px}

This works in ie6.

Updated fiddle

that is becouse the absolute positioning..

you must set the width to 100%

width: 100%;