Slide Down Box Menu: Problem mit IE

**Patrizius76** · 02.03.2011, 08:28

Hi zusammen,

bevor ichs aufgebe und ein konventionelles Menü einbaue poste ich doch hier mal mein problem. Ich möchte das Slide Down Box Menü auf meiner Seite umsetzen. Das Menü findet Ihr unter:
Slide Down Box Menu with jQuery and CSS3 | Codrops

Hierzu gibt es auch eine Typo3 Extension, die ich verwende:
t3s slidedownboxmenu ? TYPO3 Extensions Index (T3X)

Das Ganze findet sich auf meiner Testseite wieder - Hier der Link:

odessa beach club: odessa beach club

Ich nutze templavoila. Mein html ist wie folgt aufgebaut:

HTML-Code:

<html>
  <head>
      <meta charset="utf-8" />
    </head>
    <body>
      <div id="page">
        <div id="header">
          <div id="logo"></div>
          <div id="menu"></div>
        </div>  
        <div id="content"> 
          <div id="left"></div>
          <div id="right"></div>
        </div> 
      </div>         
    </body>
</html>

Gemappt ist das Menü auf <div id="menu">. Mein Problem wird sichtbar, wenn man die Seite im IE (6,7,8) aufruft. Hier erscheint am unteren Rand ein brauner Balken. Hier das CSS:

ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
width:680px;
float:right;
}

ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
list-style-type:none;
margin:0;
padding:0;
}

ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:url(http://odessabeachclub.com/fileadmin...ut/overlay.png) transparent no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #fff inset;
-webkit-box-shadow:0px 0px 2px #fff inset;
box-shadow:0px 0px 2px #fff inset;
}

ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}

ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}

ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111; /*Fehler im IE*/
top:85;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a {
margin-left:15px;
text-transform:lowercase;
text-shadow:1px 1px 1px #000;
}

ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}

ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}

ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}

ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color: #0B75AF;
}

ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}

ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}

Dieser Balken rührt von dem background der Box, die per jquery nach unten slidet - soweit bin ich schon:

ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111; /*Fehler im IE*/

Ich versteh nun leider überhaupt nicht, warum der IE die "height=0" Anweisung nicht befolgt. Bin mir auch nicht sicher obs ein jquery Problem mit IE gibt, habe dazu nichts brauchbares gefunden. Der JS Code ist wie folgt aufgebaut:

PHP-Code:

 $(function() {
    $('#sdt_menu > li').bind('mouseenter',function(){
        var $elem = $(this);
        $elem.find('img')
             .stop(true)
             .animate({
                'width':'170px',
                'height':'170px',
                'left':'0px'
             },400,'easeOutBack')
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'140px'},500,'easeOutBack')
             .andSelf()
             .find('.sdt_active')
             .stop(true)
             .animate({'height':'170px'},300,function(){
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length){
                var left = '170px';
                if($elem.parent().children().length == $elem.index()+1)
                    left = '-170px';
                $sub_menu.show().animate({'left':left},200);
            }
        });
    }).bind('mouseleave',function(){
        var $elem = $(this);
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length)
            $sub_menu.hide().css('left','0px');

        $elem.find('.sdt_active')
             .stop(true)
             .animate({'height':'0px'},300)
             .andSelf().find('img')
             .stop(true)
             .animate({
                'width':'0px',
                'height':'0px',
                'left':'85px'},400)
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'25px'},500);
    });
});

Weiss jemand Rat oder hatte ein ähnliches Problem? Bin für jeden Hinweis dankbar

Danke und Gruß

**Patrizius76** · 02.03.2011, 12:56

Da ich das problem selbst lösen konnte: Da ich den XML Prolog nicht unterdrückt habe, galt die default Doctype Angaben auch für den IE, also nie vergessen:

doctype=xhtml_trans
xmlprologue=none

Dann klappts auch mit dem IE und dem Wald und den Bäumen:)

**catwiesel** · 10.05.2011, 08:14

Hi,

ich hab zwar nicht Dein Problem, welches Du ja gelöst hast, sondern folgendes:

Im Firefox ist der Aufklappeffekt mit der t3s slidedownboxmenu TYPO3 Extensions ruckelig. Im IE und Opera flutsch es einwandfrei.

Ich hab nun mal Deine "Baustellen" Seite angeschaut, da geht auch im Firefox einwandfrei. Nun meine Frage:

Welche Extensions hast Du noch installiert, welche jQuery benötigen?
Oder was hast Du evtl. bezüglich dessen angepasst?

Gruß
catwiesel