JQuery анимированные расслоения проблема в IE

Question

Если вы наведите курсор мыши на <img>, появится «hiddenPanel» <div>. Это хорошо работает в FF и других браузерах, но в IE <div> появляется за «контентом» <div>. Я пробовал z-indexing безрезультатно. У кого-нибудь еще есть такая проблема?

(Кроме того, я не буду перемещать код ПОСЛЕ «содержимого» * ​​1007 * по причинам макета)

РЕДАКТИРОВАТЬ: больше кода; 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

Предложение: проверьте свой CSS! Некоторые вещи хорошо работают в FF, но в IE вам придется переделывать большинство вещей, потому что мы все знаем, что IE - большая проблема, когда дело касается соблюдения стандартов W3C.

Вот демонстрация, которую я сделал:

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

А это 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>

Вы также можете попробовать это демо кода выше, который работает в IE как задумано.

Answer 2

Содержит ли div содержимого файл Flash?

Если это так, вам нужно проверить этот вопрос , у него есть решение.

Если бы вы могли опубликовать свой код jQuery и используемый вами CSS, это бы очень помогло.