CSS DropDown - läuft nicht im IE6

NicolaibassDH · #1 (**permalink**) 17.09.2008, 18:23

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 · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 17.09.2008, 20:35

Tach Corina,

Zitat:

Zitat von fricca

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

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Dropdown Menü	Moepmann123	CSS	9	03.07.2009 23:03
CSS imagemap mit Tooltip - Probleme IE6 und IE7	Evoli	CSS	8	11.06.2009 10:56
3-Spalten CSS - Mittlerer Bereich sackt im IE6 ab	AndreasB.	CSS	6	06.05.2009 10:19
css Problem mit IE6 (current)	pino.bonbon	CSS	4	18.02.2009 16:06
CSS Probleme mit dem IE6	Geschan	CSS	0	07.09.2007 18:32