Empty div hover event not firing in IE

Question

I have a div with a child div inside it. I'm using jQuery to show / hide the child div whenever a mouse hovers over the parent div (parent div spans the entire bottom of the page. Width: 100% and height 100px). I've used both firebug and ie developer toolbar to confirm that the parent div is on the page.

I can hover over the empty parent div in both Chrome and FireFox and everything works fine. IE requires that I have some sort of text inside to hover over. The div hover event will not fire with just an empty div.

All plausible work arounds for this issue?

--Update

Tried all of your suggestions but nothing has worked yet.

<div id="toolBar">          
  <div>
    <button id="btnPin" title="Click to pin toolbar" type="button">
      <img id="pin" src="../../images/icons/unpin.png" alt="Pin" /></button>
      <img src="../../images/icons/search.png" border="0" alt="Search" />
  </div>
</div>

The above html is contained within a master page div container. The child div is hidden with jQuery with some hover in/out events. The parent div (toolBar) is always visible on the page. When a hover occurs on toolBar the child div is shown.

Heres the jQuery code

$('#toolBar').hover(ToolBar_OnHover, ToolBar_OnBlur);

function ToolBar_OnHover() {

  $(this).children().fadeIn('fast');
  $(this).animate({ height: "100px" }, "fast");

}

function ToolBar_OnBlur() {

  $(this).children().fadeOut('fast');
  $(this).animate({ height: "50px" }, "fast");

}

Finally here's a little css

#toolBar { width: 100%; height: 100px; text-align:center; vertical-align:middle; position: absolute;  bottom: 0; background-color: Transparent;  }
#toolBar div { padding: 5px 5px 0px 5px; width:75%; height: 95px; background: transparent url('/images/toolbar-background.png') repeat-x; margin-right: auto; margin-left: auto; }

Answer 1

It's kind of hacky, and I don't know if it'll change the layout, but you could always just put an   inside the div.

Answer 2

Just insert an empty comment inside the "empty" element. :)

<div><!-- --></div>

This'll force IE to render the element

Answer 3

it will work if you set a background-color or a border ...

if you could match either of these with the existing look then you would be ok..

Answer 4

It might be that the hasLayout flag of the element needs to be forced. This can be done by applying the CSS property zoom:1 to it.