XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS DropDown - läuft nicht im IE6 (http://xhtmlforum.de/showthread.php?t=53691)

NicolaibassDH 17.09.2008 18:23

CSS DropDown - läuft nicht im IE6
 
Hallo zusammen,

ich habe ein ziemliches Problem, meine DropDown Navigation läuft nicht im IE6.

Hier mal der Code der Navigation:
Code:

<div class="navsub_tp_bg"></div>

                                <h1 class="invisible">Navigation Main</h1>
                                <div id="navigation_main">
                                                <div class="navigation_tp">
                <ul id="nav_top">
                        <li><a id="nav_01" href="ddd.html" title="Nav 01">Nav 01</a>
                        <ul id="nav-01-dd">
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                        </ul>
                       
                        </li>
                        <li><a id="nav_02" href="ddd.html" title="Nav 02">Nav 02</a>
                        <ul id="nav-02-dd">
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                        </ul>
                        </li>

                        <li><a id="nav_03" href="ddd.html" title="Nav 03">Nav 03</a>
                        <ul id="nav-03-dd">
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                        </ul>
                        </li>
                        <li><a id="nav_04" href="ddd.html" title="Nav 04">Nav 04</a>
                        <ul id="nav-04-dd">
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                        </ul>
                        </li>
                        <li><a id="nav_05" href="ddd.html" title="Nav 05">Nav 05</a>
                        <ul id="nav-05-dd">
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                        </ul>
                        </li>
                </ul>
        </div>

Hier dann der CSS Code:
Code:


ul#nav_top {
        margin-left:2px;
        margin:0em;
        padding:0em;
}

ul#nav_top a:link,
ul#nav_top a:visited {
        padding:0.40em 0 0 0;
        /*width:20%;*/
        text-align:center;
        height:1.95em;
        color:#fff;
        text-decoration:none;
        background-color:#D4003B;
        cursor:pointer;
        display:block;       
        float:left;
        font-weight:bold;
        font-size:0.80em;
        letter-spacing:0em;
}


ul#nav_top li {
        display:inline;
}

*.navigation_tp>ul#nav_top li a:hover#nav_01,
*.navigation_tp>ul#nav_top li a:hover#nav_02,
*.navigation_tp>ul#nav_top li a:hover#nav_03,
*.navigation_tp>ul#nav_top li a:hover#nav_04,
*.navigation_tp>ul#nav_top li a:hover#nav_05 {
        background-color: transparent;
        background-image:url(../images/navsub_bg_tp.png);
        color:#D4003B;
}

*.navigation_tp>ul#nav_top li a#nav_top_active, *.navigation_tp>ul#nav_top li a#nav_top_active_01, *.navigation_tp>ul#nav_top li a#nav_top_active_02, *.navigation_tp>ul#nav_top li a#nav_top_active_03, *.navigation_tp>ul#nav_top li a#nav_top_active_04, *.navigation_tp>ul#nav_top li a#nav_top_active_05 {
        background-color: transparent;
        background-image:url(../images/navsub_bg_tp.png);
        color:#D4003B;
}

/* Navigation */

ul#nav_top a#nav_01, *.navigation_tp>ul#nav_top li a#nav_top_active_01 {
        width: 12%;       
}

ul#nav_top a#nav_02, *.navigation_tp>ul#nav_top li a#nav_top_active_02 {
        width: 33%;       
}

ul#nav_top a#nav_03, *.navigation_tp>ul#nav_top li a#nav_top_active_03 {
        width: 29%;       
}

ul#nav_top a#nav_04, *.navigation_tp>ul#nav_top li a#nav_top_active_04 {
        width: 18%;       
}

ul#nav_top a#nav_05, *.navigation_tp>ul#nav_top li a#nav_top_active_05 {
        width: 8%;       
}



/* Navigation with DropDown */

ul#nav_top li ul {
        display: none;
        position: absolute;
        top: 1.9em;
}

ul#nav_top li:hover ul {
        display: block;
}

ul#nav_top li ul li {
        width: 12em;
        display: block;
       
}

ul#nav_top ul#nav-01-dd li a, ul#nav_top ul#nav-02-dd li a, ul#nav_top ul#nav-03-dd li a, ul#nav_top ul#nav-04-dd li a, ul#nav_top ul#nav-05-dd li a {
        float: none;
        background-color: transparent;
        color: #414141;
        text-align: left;
        background-color: #e6e6e6;
        border-top: 1px solid #fff;
        padding-left: 1em;
}

ul#nav-02-dd {
        left: 5.85em;
}

ul#nav-03-dd {
        left: 21.9em;
}

ul#nav-04-dd {
        left: 35.9em;
}

ul#nav-05-dd {
        left: 36.45em;
}

ul#nav_top li ul#nav-01-dd, ul#nav_top li ul#nav-02-dd, ul#nav_top li ul#nav-03-dd, ul#nav_top li ul#nav-04-dd, ul#nav_top li ul#nav-05-dd {
        display: none;
        overflow: hidden;
}

ul#nav_top li:hover ul#nav-01-dd, ul#nav_top li:hover ul#nav-02-dd, ul#nav_top li:hover ul#nav-03-dd, ul#nav_top li:hover ul#nav-04-dd, ul#nav_top li:hover ul#nav-05-dd {
        display: block;
        overflow: visible;
}

Im Header habe ich dann noch folgendes eingefügt:
Code:

<!--[if lte IE 7]>
          <style type="text/css" media="screen">#navi { behavior:url("filadmin/templates/css/csshover.htc"); }</style>
<![endif]-->

Die .htc Datei enthält allgemeinen Code, welcher nicht mit einzelnen Klassen zusammenhängt. Die Datei kann hier runtergeladen werden.

Woran liegt es das die Navigation im Firefox wie IE7 eingeblendet wird, im IE6 jedoch nicht?

Vielen Dank für Eure Hilfe
nic.

hubspe 17.09.2008 19:04

Hi,

der IE6 kennt :hover nur in Verbindung mit a.
Mit li:hover kann er nix anfangen.

Guckst du hier: Der Zuckerfisch mit JS für den IE6, oder
hier ganz ohne JS. ;)

edit. ein Blick in die CSS-FAQ könnte auch erhellend wirken.

fricca 17.09.2008 20:03

hubspe, auch Peter Nederlofs whatever:hover ist eine Möglichkeit, dem IE < 7 das Hovern beizubringen.
Warum es hier nicht funktioniert? Wie soll das jemand an Codeschnipseln herausfinden?
Auf der gerade verlinkten Seite finden sich Hinweise zum nötigen MIME-Type. Denen wäre vielleicht nachzugehen.

BTW: Sucker nicht Zucker. Vielleicht ist es ja kein Vertipper, sondern soll ein Witz sein. Für Benutzer der Suchfunktion sind solche "Abwandlungen" jedenfalls doof, weil nicht auffindbar.

hubspe 17.09.2008 20:35

Tach Corina,

Zitat:

Zitat von fricca (Beitrag 402813)
hubspe, auch Peter Nederlofs whatever:hover ist eine Möglichkeit, dem IE < 7 das Hovern beizubringen.

danke für den Link, den kannte ich noch nicht. :)

Meine geposteten Links hatte ich der FAQ entnommen.

Zitat:

Zitat von fricca (Beitrag 402813)
BTW: Sucker nicht Zucker. Vielleicht ist es ja kein Vertipper, sondern soll ein Witz sein. Für Benutzer der Suchfunktion sind solche "Abwandlungen" jedenfalls doof, weil nicht auffindbar.

Ja, ich neige manchmal zu Verballhornungen.
In dem Fall auch nur, weil ich die "Verballhornung" verlinkt hatte und der Link außerdem in der FAQ zusätzlich aufgeführt war.


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023