✔ Horizontales Menü / IF-IE 5,6 +7

D

dobber812

Mitglied
Hy,

ich habe ein horizontales css Menü, welches im FF und im IE8 wunderbar funktioniert.

Nur in älteren IE -Version habe ich erhebliche Probleme:

IE.5 und 6 - Es wird nur ein großer "weisser" Kasten ausgegeben, Menüpunkte können nicht angewählt werden

IE.7 - Die Sub-Menüpunkte werden jeweils bei dem nächsten Haupt-Menüpunlt aufgeklappt...

Ich nehme an das wird mit IF-IE gelöst aber ich finde leider die Rätsels Lösung nicht :(

Code: 
css
ul.menu, li.menu {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

 
#header_menu {
position: absolute;
 margin-left: 20px;
background:#555;
}

#header_menu li {
line-height: normal;
}

ul#header_menu  {
z-index: 10; 
clear: both;}

#nav {
	height: 45px;
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
	width: auto;
	position: relative;
}
#nav ul li {
	float: left;
	color: #fff;
	text-align: center; 
	font-weight: normal;
	background: #fff url(menu.gif) no-repeat bottom left;
	}

#nav ul li a {
background-image:url(menu.png);
background-repeat:repeat-x;
display:block;
padding:15px 15px 2px 20px;
text-decoration:none;
height:28px;
font-weight: bold
}


#nav ul li a:hover, #nav li a:focus {}

#nav li a:active, #nav ul li a.active {
background: #d1d2d4;
 border-color: #fff; 
color: #4b4c4d;}


#nav li.menu-current a{
	 background: #fff url(menu.gif) no-repeat bottom left;
	color:#012a9f;
	font-size:12px;
	height:28px;
	padding:15px 15px 2px 20px;
	text-decoration:none;
	font-weight: bold;
}

#nav li.menu-current a{
font-weight: bold;
} 


#nav .menu li ul {
position: absolute;
 width: 12em; 
margin: 0; 
display: none;
 text-transform: none;
 font-size: 12px;}

#nav .menu li ul li {
width: 12em; 
text-align: left; 
font-weight: normal; 
margin: 0; 
padding: 0; 
line-height: 1.2em;}


#nav .menu li ul a {
	width: 11.5em;
	padding: .6em .1em .6em .4em;
	color: #012a9f;
	border: 0;
}


#nav .menu li ul a:hover {
	color: #012a9f;
	border: 0;
	color:#012a9f;
}


#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li.subMenu ul, #nav .menu li li.subMenu ul {display: block;}



#nav .menu li ul li ul li a 	{ width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }


#nav li {position: relative;}

#nav ul ul ul {
	position: absolute;
	top: 1px;
	left: 100%;
}

Wie bekomm das ich in den o.g. IE Versionen korrekt angezeigt?
Besten Dank
LG
 
Hy,

nein ist leider noch nicht online, habe das menü von einem älteren Projekt übernommen (leider auch wieder offline) und dort konnte das Problem durch die csshover.htc auf einen" klatsch" erledigt werden, nur hier scheint das nicht zu klappen...
...dabei wurden nur die Hhintrgrundgrafiken und die Größenangaben etwas verändert, mehr nicht...

Deshalb verwundert mich das ein wenig, laut dem Quellcode wird diese Datei auch ordnungsgemäß "eingebunden" (mit If-ie) jedoch wirkt sich das absolut nicht aus.

puhh :confused:
 
dobber812 hat gesagt.:
IE.5 und 6 - [...] Menüpunkte können nicht angewählt werden
Zum Vergrößern anklicken....

dobber812 hat gesagt.:
dort konnte das Problem durch die csshover.htc auf einen" klatsch" erledigt werden, nur hier scheint das nicht zu klappen...
...dabei wurden nur die Hhintrgrundgrafiken und die Größenangaben etwas verändert, mehr nicht...
Zum Vergrößern anklicken....
Das riecht nach dem "IE Link bug" bei semitransparenten PNGs, der sich bei gewissen Bilddimensionen einstellt, und zur Folge hat, dass das Element nicht mehr geklickt werden kann.

Im Abschnitt "Addendum: IE Link bug" des Artikels Cross-browser semi-transparent backgrounds findest du eine tabellarische Übersicht, bei welchen Dimensionen dies der Fall ist, und bei welchen nicht.

mfg Maik
 
... wenn ich das richtig verstehe, würde das mit Tranzparenzen zutun haben, ich habe jedoch auf Tranzparenzen verzichtet... zum Einsatz kommen ganz "normale" png Grafiken...

Grüße
 
Achso..., dann hab ich da was mißverstanden.

Naja, bevor wir uns nun den Kopf darüber zerbrechen, wie du hier den einzelnen IE-Versionen beikommen kannst, schlage ich vor, das Menü neu aufzusetzen.

bereitet in der IE-Familie keine Probleme.

Und mal ganz ehrlich, wer benutzt denn heute noch den IE5.x (Win95 / Win98)? Selbst der IE6 (Win2k / WinXP) ist mittlerweile ein "Auslaufmodell", ist man doch aktuell beim IE8 angekommen.

mfg Maik
 
War ja garnicht so falsch, wollte auch eig. zuerst ein trazparentes Menü erstellen ;)

Na dann werde ich mal das Menü aus dem alten Projekt nehmen und nach dem Ausschlussverfahren vorgehen und die Formatierungen Schritt für Schritt übernehmen.

Es gibt leider immernoch einige Leute die ihren IE nicht updaten... man möchte es halt allen recht machen und den satz: "optimiert für IE8" setzt ich nicht auf die Seite :D

Den IE7 möchte ich jedenfalls noch mit ins Boot nehmen.

Ich "erledige" meine Anfrage hier mal, werde jedoch das Ergebniss posten wenn ich es habe :)

LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück