jQuery animate layering issue in IE

Question

If you hover over the <img> the 'hiddenPanel' <div> is to appear. This works fine in FF and other browsers, but in IE the <div> appears BEHIND the 'content' <div>. I've tried z-indexing to no avail. Anyone else having this problem?

(Also, I will not move the code AFTER the 'content' <div> for layout reasons)

EDIT: More code; jQuery / HTML / CSS ...

jQuery

    /* Column Left #1 */      
    $('.columnLeft_spec1_panel').hide().css('opacity','0.0');
    $('.columnLeft_spec1').mouseover( function() { $('.columnLeft_spec1_panel').animate({ width: '337px', height: '234px', opacity: 1.0 }, 1250 ); });
    $('.columnLeft_spec1_panel').mouseout( function() { $('.columnLeft_spec1_panel').animate({ width: '1px', height: '1px', opacity: 0.0 }, 1250 ); });

Html

<div class="columnLeft">
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec1.gif" class="columnLeft_spec1" alt="" />
  <a runat="server" href="~/" class="columnLeft_spec1_panel">&nbsp;</a>
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec2.gif" class="columnLeft_spec2" alt="" />
  <a runat="server" href="~/" class="columnLeft_spec2_panel">&nbsp;</a>
</div>

<div class="columnRight">
  <img runat="server" src="~/images/pc_blocks_columnRight_spec1.gif" class="columnRight_spec1" alt="" />
  <a runat="server" href="~/" class="columnRight_spec1_panel">&nbsp;</a>
</div>

<asp:ContentPlaceHolder ID="main" runat="server"></asp:ContentPlaceHolder>

<div class="subnav">
  <asp:ContentPlaceHolder ID="subnav" runat="server"></asp:ContentPlaceHolder>
</div>

<div class="content">
  <div class="leftPanel">
    <asp:ContentPlaceHolder ID="leftPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="midPanel">
     <asp:ContentPlaceHolder ID="midPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="rightPanel">
    <asp:ContentPlaceHolder ID="rightPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
</div>

CSS

    /* CONTENT
    ======================================================================*/
    .content {
      position:relative;
      height:auto; width:800px; _width:795px;
      margin:5px 5px 0px 90px; padding:20px 10px;
      min-height:250px; z-index:0;
      background:#FFF;
    }
    .leftPanel, .midPanel { float:left; }
    .rightPanel { float:left; }

    .content .leftPanel {
      height:auto; width:150px;
    }
    .content .midPanel {
      height:auto; width:375px;
      border-right:solid 1px #78A22F;
      padding:0px 30px 30px 30px;
    }
    .content .rightPanel {
      height:auto; width:180px;
      padding:0px 0px 0px 20px;
    }

    /* COLUMNS
    ======================================================================*/
    .columnLeft, .columnRight {
      height:245px; width:85px;
      background:#EEEEEE;
      margin-top:5px; position:relative;
    }
    .columnLeft {
      float:left; background:url(../images/pc_blocks_columnLeft.gif) no-repeat;
    }
    .columnLeft .columnLeft_spec1 {
      position:absolute;
      top:0px; right:0px;
    }
    .columnLeft .columnLeft_spec1_panel {
      display:none; background:url(../images/pc_columnLeft_spec1.jpg) no-repeat;
      position:absolute; z-index:5;
      left:0px;
    }

Answer 1

Does the content div contain a Flash file?

If it does then you need to check this question, it has your solution.

If you could post your jQuery code and the CSS you are using, that would help a lot.

Answer 2

Suggestion: check your CSS! Some of the things work in FF good, but in IE you have to redo most of the things because we all know IE is a big problem when it comes to follow the W3C standards.

Here is a demo I made:

$(document).ready(function () 
    {
     $(".hoverMe").mouseover(function ()
     {
      $(".hiddenPanel").fadeIn('slow');
     }).mouseout(function ()
     {
      $(".hiddenPanel").fadeOut('slow');
     });
    });

And this is the html:

<img class="hoverMe" alt="HOVER ME" /> <div class="hiddenPanel" style="display: none; color: blue; font-size: 20px; font-weight: bold;">This is the hidden panel</div> 
    <div class="content" style="color: red;">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

You also can try out this demo of the code above which works in IE as intended.