✔ Liste in IE ganz verzerrt

Status
Nicht offen für weitere Antworten.
da hab ich wirklich nicht viel studiert... ich hab jetzt alles eingebunden.

@Maik: vielen Dank für das Anschauen deinerseits, es hat mir ziemlich geholfen!

das menu erscheint zwar noch unpositioniert aber immerhin ist es schon sichtbar.

Falls jemand eine Lösung / Lösungsansatz erkennt, bitte antwortet auf diesen Post, es wäre mir sehr geholfen.

mein Problem:
Falsche bzw. gar keine Positionierung des Dropdowns.

Hier das dazugehörige ie css:
Code: 
#ieddtopnavifix li:hover ul, #ieddtopnavifix li.sfhover ul {
	left: auto;
	background: url(/themes/energiestiftung/images/lvl3bg-f.gif) no-repeat bottom left;
	display: block;
	z-index:7000;
}

Danke schon mal fürs Anschauen.
 
Zuletzt bearbeitet:
Hi,

ich vermute mal, dass es daran liegt, dass du zum einen das Listenmenü im Stylesheet main.css in den Selektoren über das DIV #topnavileveltwo ansprichst, respektive formatierst, und zum anderen die ID #ieddtopnavifix in den ul-Listenelementen der zweiten Menüebene aufrufst.

Die in dem Javascript implementierte ID gehört aber im Listenelement der ersten Ebene aufgerufen, und das Listenmenü im Stylesheet in den Selektoren über seine ID formatiert.

Schau dir hierzu bitte den Quellcode auf http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html nochmal genauer an.

Außerdem darf eine ID im HTML-Quelltext nur einmal vergeben werden, durch deine Methode taucht die ID #ieddtopnavifix aber nun fünfmal auf.
 
Also ich bin etwas weiter gekommen.
Es ist so, dass die Navigation jetzt für IE7 funktioniert.

Leider geht IE6 dafür gar nicht, die dritte Ebene (das DropDown Element) erscheint erst gar nicht.

ich vermute mal, dass es daran liegt, dass du zum einen das Listenmenü im Stylesheet main.css in den Selektoren über das DIV #topnavileveltwo ansprichst, respektive formatierst, und zum anderen die ID #ieddtopnavifix in den ul-Listenelementen der zweiten Menüebene aufrufst.
Zum Vergrößern anklicken....
ich erkenne den Fehler nicht, weshalb ist das deiner Meinung nach ein Risiko?

Die in dem Javascript implementierte ID gehört aber im Listenelement der ersten Ebene aufgerufen, und das Listenmenü im Stylesheet in den Selektoren über seine ID formatiert.
Schau dir hierzu bitte den Quellcode auf http://www.htmldog.com/articles/suck...le/bones1.html nochmal genauer an.
Zum Vergrößern anklicken....

Das stimmt, aber die ID für den IE wird auch im zweiten Level (also im richtigen) aufgerufen. Habe ich etwas übersehen?

Hier die aktuelle Struktur des Menus:
Code: 
<div id="topnavileveltwo">
<ul class="ieddtopnavifix">
	<li class="leftnavilevelfour"><a
		href="http://ses/energiethemen/erneuerbareenergien/wasser/">Wasser</a>
	<ul class="ieddtopnavifix">
		<li class="leftnavilevelthree"><a
			href="http://ses/energiethemen/erneuerbareenergien/wasser/laufwasserkraftwerke/">Laufwasserkraftwerke</a></li>
		<li class="leftnavilevelthree"><a
			href="http://ses/energiethemen/erneuerbareenergien/wasser/speicherkraftwerke/">Speicherkraftwerke</a></li>
		<li class="leftnavilevelthree"><a
			href="http://ses/energiethemen/erneuerbareenergien/wasser/pumpspeicherung/">Pumpspeicherung</a></li>
	</ul>
	</li>
</ul>
</div>

Außerdem darf eine ID im HTML-Quelltext nur einmal vergeben werden, durch deine Methode taucht die ID #ieddtopnavifix aber nun fünfmal auf.
Zum Vergrößern anklicken....
Habe ich gefixt, danke für den Hinweis!

Hier das aktuelle CSS:
Code: 
/* TOPNAVI */
#topnavileveltwo, #topnavileveltwo ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#topnavileveltwo a {
	display: block;
}

#topnavileveltwo li {
    display:inline;
    position:relative;
    float: left;
}

#topnavileveltwo li ul { 
	position: absolute;
}

#topnavileveltwo li:hover ul li {
	display: inline;
	float: left;
	clear: left;
	width:160px;
}

#topnavileveltwo li.sfhover ul li {
	display: inline;
	float: left;
	clear: left;
	width:160px;
}

.ieddtopnavifix li.sfhover ul li { /* lists nested under hovered list items */
	left: auto;
	background: url(/themes/energiestiftung/images/lvl3bg-f.gif) no-repeat bottom left;
	display: block;
	z-index: 9000;
	position: absolute;
	top: 0;
	left: 0;
}
 
Zuletzt bearbeitet:
Und nun schau dir bitte zum Vergleich die Struktur dieses Quellcodes genauer an:

Code: 
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
Code: 
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Code: 
<ul id="nav">
	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>
		</ul>
	</li>
	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>
		</ul>
	</li>
	<li><a href="#">Gobioidei</a>
		<ul>
			<li><a href="#">Burrowing gobies</a></li>
			<li><a href="#">Dartfishes</a></li>
			<li><a href="#">Eellike gobies</a></li>
			<li><a href="#">Gobies</a></li>
			<li><a href="#">Loach gobies</a></li>
			<li><a href="#">Odontobutidae</a></li>
			<li><a href="#">Sandfishes</a></li>
			<li><a href="#">Schindleriidae</a></li>
			<li><a href="#">Sleepers</a></li>
			<li><a href="#">Xenisthmidae</a></li>
		</ul>
	</li>
</ul>
 
@Maik: Danke für deine Antwort.

Ich hab das jetzt mal genau umgebaut nach Vorlage. Aber er will nicht. :mad: Irgendwas mach ich noch falsch, bloss was. Auf jeden Fall siehts jetzt so aus:

HTML-Struktur:
Code: 
	<ul class="nav">
		<li><a href="http://ses/energiethemen/erneuerbareenergien/wasser/">Wasser</a>
		<ul>
			<li><a href="http://ses/energiethemen/erneuerbareenergien/wasser/laufwasserkraftwerke/">Laufwasserkraftwerke</a></li>
			<li><a href="http://ses/energiethemen/erneuerbareenergien/wasser/speicherkraftwerke/">Speicherkraftwerke</a></li>
			<li><a href="http://ses/energiethemen/erneuerbareenergien/wasser/pumpspeicherung/">Pumpspeicherung</a></li>
		</ul>
		</li>
	</ul>

CSS:
Code: 
/* TOPNAVI */
#topnavileveltwo, #topnavileveltwo ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#topnavileveltwo a {
	display: block;
}

#topnavileveltwo li {
    display:inline;
    position:relative;
    float: left;
}

#topnavileveltwo li:hover ul li {
	display: inline;
	float: left;
	clear: left;
	width:160px;
}

#topnavileveltwo li.sfhover ul li {
	display: inline;
	float: left;
	clear: left;
	width:160px;
}

#var, #var ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#var a {
	display: block;
}

#var li {
    display:inline;
    position:relative;
    float: left;
}

#var li ul { 
	position: absolute;
}

#var li.sfhover ul li { /* lists nested under hovered list items */
	left: auto;
	background: url(/themes/energiestiftung/images/lvl3bg-f.gif) no-repeat bottom left;
	display: block;
	z-index: 9000;
	position: absolute;
	top: 0;
	left: 0;
}

Javascript:
Code: 
sfHover = function() {
	var sfEls = document.getElementById("var").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) { 
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) {
	window.attachEvent("onload", sfHover);
}
 
Zuletzt bearbeitet:
Dem Listenelement fehlt die ID #var:

Code: 
<ul class="nav" id="var"> ... </ul>
und formatier das Menü ausschliesslich über seine ID #var:

Code: 
#var, #var ul {
        padding: 0;
        margin: 0;
        list-style: none;
}

#var a {
        display: block;
}

#var li {
    display:inline;
    position:relative;
    float: left;
}

#var li:hover ul li, #var li.sfhover ul li {
        display: inline;
        float: left;
        clear: left;
        width:160px;
}

#var li.sfhover ul li {
        display: inline;
        float: left;
        clear: left;
        width:160px;
}

#var .leftnavilevelthree a {
        /*overwrites values from main.css*/
}

#var li ul {
        position: absolute;
        display:none;
}

#var li:hover ul, #var li.sfhover ul  { /* lists nested under hovered list items */
        left: auto;
        background: url(/themes/energiestiftung/images/lvl3bg-f.gif) no-repeat bottom left;
        display: block;
        z-index: 9000;
        position: absolute;
        top: 20px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück