Strohhalm

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Privat

 

Anmelde-Formular



Als Strohhalm-Mitglied registrieren.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Linktipps

 

passende Links in der aktuellen Rubrik

Xhtml / CSS Einführung.15.04.2005, 18:02
Michael Jendryschik bietet einen sehr umfangreichen und doch recht leicht verständlichen Einstieg in…
Der DIV-Wahnsinn.13.07.2005, 12:57
Eric Eggert fasst seine Übersetzung des Textes Div Mania von Gez Lemon so zusammen: Immer mehr…
MAMP - der Entwicklungsserver für den Mac.10.10.2007, 22:20
Als Macuser braucht ihr auf eine Art XAMPP nicht zu verzichten, für den Mac gibt es das in der…
gotAPI - Reference Lookup Service.20.07.2006, 16:43
gotAPI.com indexiert im Internet erhältliche Dokumentationen und bietet eine Navigation per AJAX.…
snippetcenter.org - Das Snippet-Verzeichnis.27.04.2006, 01:30
snippetcenter.org ist ein zentrales Archiv für Codeschnipsel, im Fachjargon auch Snippets genannt.…

Insgesamt sind 8 Links in dieser Kategorie

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Forum

 

strohhalm.org / Forum / Forenübersicht / Einsteiger / Nachricht 2789 lesen

Slide Down Box Menu: Problem mit IE

  1. Slide Down Box Menu: Problem mit IE

    Patrizius76.+0 -0.02. März 2011, 10:31

    Hallo zusammen,

    meine Frage betrifft das Slide Down Box Menu with jQuery and CSS3. Siehe:
    externer Linkhttp://tympanus.net/…/slide-down-box-menu/

    Dieses habe ich per Extension in Typo3 eingebaut. Das Ganze findet sich auf meienr Testseite unter:
    externer Linkhttp://www.odessabeachclub.com

    Unter Firefox kein Problem. Aber mir macht der IE zu schaffen. Hier erscheint am unteren Rand ein brauner Balken. Nachfolgend 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, was dies auslöst. Das JS sieht wie folgt aus:


    $(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);
    });
    });

    Ich hoffe ich bin mit meinem Problem hier richtig; Weiss jemand Rat oder hatte ein ähnliches Problem? Bin für jeden Hinweis dankbar

    Schöne Grüße

    PM

    Antworten [/forum/index.php?topic=2789&strukturid=2789&action=newEntry]

  2. Re: Slide Down Box Menu: Problem mit IE

    wahsaga.+0 -0.02. März 2011, 13:19

    Ich versteh nun leider überhaupt nicht, warum der IE die "height=0" Anweisung nicht befolgt.

    Ältere IE setzen height nun mal wie min-height um (dagegen hilft overflow:hidden);
    und da du auch aktuelle IE durch die Doctype-Angabe in den Quirks Mode schickts, emulieren sie die Fehler älterer Versionen.
    HTML 4.0 - ernsthaft?

    Antworten [/forum/index.php?topic=2789&strukturid=2789&action=newEntry]

  3. Danke!

    Patrizius76.+0 -0.02. März 2011, 13:51

    xmlprologue=none - das wars. Vielen Dank für den schnellen und hiilfreichen Hinweis!

    Antworten [/forum/index.php?topic=2789&strukturid=2789&action=newEntry]

 
Nach oben springen

.(c) 2002 - 2019 strohhalm.org Community.Server powered by Manitu.Software powered by Mathias Bank
.Impressum + Team.Datenschutz