✔ Liste in IE ganz verzerrt

[tinella]

Meine Lieben

Es wäre toll wenn sich das mal jemand anschauen könnte... ich weiss nicht weiter.

Ich beziehe mich im folgenden Beitrag auf folgende Page: removed

Ich habe eine Menuleiste mit drei Ebenen.
Die erste Ebene (#topnavileveltwo im CSS) besteht aus einem div mit verschiedenen links drin.
Die zweite und dritte Ebene ist eine verschachtelte Liste.
Die zweite Ebene ist sofort sichtbar, die dritte soll über DropDown (alles CSS) angezeigt werden (suckerfish von alistapart).
Ich wär schon glücklich wenn mal die erste und zweite Ebene laufen würden.

Die ganze Seite ist valid.

Im Firefox wird sie korrekt dargestellt, aber im IE leider nicht mal die erste Menuebene

Hier das CSS:

#topnavileveltwo {
	text-align: right;
	height: 25px;
	background: #df0023 url(/themes/energiestiftung/images/menubg-gloss.png) repeat-x top left;
}

#topnavileveltwo ul {
	margin: 0;
	padding: 0;
	float: right;
}

#topnavileveltwo a {
	color: #fafafa;
	text-decoration: none;
	margin: 0px;
	padding: 0 12px;
	font-size: 12px;
	line-height: 23px;
	/*float: left;*/
	background: url(/themes/energiestiftung/images/lvl2bg.png) no-repeat bottom left;
}

#topnavileveltwo a:hover {
	background: url(/themes/energiestiftung/images/lvl2bg-hover.png) no-repeat bottom left;
	color: #ffffff;
	text-decoration: underline;
}

#topnavileveltwo .selected a {
	color: #ffffff;
	text-decoration: underline;
	background: url(/themes/energiestiftung/images/lvl2bg-hover.png) no-repeat bottom left;
}
#topnavileveltwo .selected .leftnavilevelthree a {
	color: #ffffff;
	text-decoration: none;
}

#topnavileveltwo .selected .selected {
	color: #ffffff;
	text-decoration: underline;
}

Vielen Dank schon mal im Voraus,
tinella

 

[Maik]

Hi,

kannst du mal den dazugehörigen HTML-Code zeigen?

 

[tinella]

Klar, der HTML Code ist folgender:
Die picto-ID's sind Bilder, die beim Mouseover eingeblendet werden.
Die Klasse "leftnavilevelfour" wurde nie definiert, sie dient als Orientierungshilfe.

<div id="topnavi">
	<div id="pictograms">
		<div id="picto1"></div>
		<div id="picto2"></div>
		<div id="picto3"></div>
		<div id="picto4"></div>
		<div id="picto5"></div>
</div>
		<a
			href="/energiethemen/energieeffizienz/"
			class="selected">Energieeffizienz</a><a
			href="/energiethemen/erneuerbareenergien/"
			onmouseover="document.getElementById('picto2').style['visibility'] = 'visible';"
			onmouseout="document.getElementById('picto2').style['visibility'] = 'hidden';">Erneuerbare
		Energien</a><a
			href="/energiethemen/atomenergie/"
			onmouseover="document.getElementById('picto3').style['visibility'] = 'visible';"
			onmouseout="document.getElementById('picto3').style['visibility'] = 'hidden';">Atomenergie</a><a
			href="/energiethemen/fossileenergien/"
			onmouseover="document.getElementById('picto4').style['visibility'] = 'visible';"
			onmouseout="document.getElementById('picto4').style['visibility'] = 'hidden';">Fossile
		Energien</a><a
			href="/energiethemen/energiepolitik/"
			onmouseover="document.getElementById('picto5').style['visibility'] = 'visible';"
			onmouseout="document.getElementById('picto5').style['visibility'] = 'hidden';">Energiepolitik</a></div>
	</div>
	
	<div id="horizontalspace"> <!-- leeres div -->
	
		<div id="topnavileveltwo">
			<ul>
				<li class="leftnavilevelfour"><a
					href="/energiethemen/energieeffizienz/2000watt/">2000 Watt</a></li>
				<li class="leftnavilevelfour"><a
					href="/energiethemen/energieeffizienz/einsparpotenziale/">Einsparpotenziale</a></li>
				<li class="leftnavilevelfour"><a
					href="/energiethemen/energieeffizienz/gebaeude/">Gebäude</a>
					<ul>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/gebaeude/waermewarmwasser/">Wärme und Warmwasser</a></li>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/gebaeude/elektroheizungen/">Elektroheizungen</a></li>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/gebaeude/blockheizkraftwerke/">Blockheizkraftwerke</a></li>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/gebaeude/gebaeudestandarts/">Gebäudestandarts</a></li>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/gebaeude/contracting/">Contracting</a></li>
					</ul>
				</li>
				<li class="leftnavilevelfour"><a
					href="/energiethemen/energieeffizienz/geraetebeleuchtung/">Geräte und Beleuchtung</a>
					<ul>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/geraetebeleuchtung/geraete/">Geräte</a></li>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/geraetebeleuchtung/beleuchtung/">Beleuchtung</a></li>
						<li class="leftnavilevelthree"><a
							href="/energiethemen/energieeffizienz/geraetebeleuchtung/standby/">Standby</a></li>
					</ul>
				</li>
				<li class="leftnavilevelfour"><a
					href="/energiethemen/energieeffizienz/industriegewerbe/">Industrie und Gewerbe </a></li>
				<li class="leftnavilevelfour"><a
					href="/energiethemen/energieeffizienz/mobilitaet/">Mobilität</a></li>
			</ul>
		</div>
	</div>

 

[Maik]

Mit deinen Quellcode-Angaben erziele ich im Firefox2 und IE6 (OS: WinXP Prof.) dieselbe Darstellung der Listennavigation:



Was aber im HTML-Code schon mal auffällt, ist ein zuviel notiertes </div>-Tag nach #topnavi, das wohl zu #horizontalspace gehört.

 

[tinella]

Hey Maik, danke für deine Antwort.
Ich war gerade am CSS einbinden und testen, hast genau die falsche Minute erwischt .
Wärst du bitte so gut, und würdest dir das nochmals anschauen?
Das Design ist doch etwas anders als das was du gerade gesehen hast..

Ich schau mir deinen Div-Kommentar jetzt gleich an und verbesser das.

 

[tinella]

Also, das Div hab ich unabsichtlich weggelöscht, da der HTML Code generiert wird und ich den Code mittels Ctrl+Shift+U entnommen hab.
Rein theoretisch müsste das Teil auch für den IE gehn...
Aber was ändern, bzw wie vorgehen das ist mir nicht so ganz klar.

 

[hela]

... Rein theoretisch müsste das Teil auch für den IE gehn...
Aber was ändern, bzw wie vorgehen das ist mir nicht so ganz klar.

Das Markup ist mehrfach nicht wohlgeform, sowhl beim DIV- als auch bei den LI-Elementen. Sieh dir das ganze am besten mal zwecks Korrektur mit XMLSpy oder dem XML-Cooktop an.

 

[Maik]

Da macht sich im IE bei den DIVs #logodiv und #header der "Double-Margin-Bug" bemerkbar, d.h. die horizontalen margin-Werte werden von ihm verdoppelt, was letztlich zu den Verschiebungen im Layout führt.

Unter Hinzunahme der display:inline-Deklaration für diese Elemente wird der Bug gefixt.

Diese Angabe ist aber auch für die Listenpunkte erforderlich, damit die Links von ihm nicht treppenartig angeordnet werden:

#logodiv {
        margin-top: 30px;
        margin-left: 30px;
        width: 194px;
        height: 64px;
        background-color: #ffffff;
        float: left;
        display:inline;
}

#header {
        width: 700px;
        float:left;
        padding: 6px 13px 0 0;
        height: 34px;
        color: #6a645f;
        text-align: right;
        margin-right: 14px;
        display:inline;
}

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

 

[tinella]

@Maik: du bist gut, vielen herzlichen Dank!! Das ist ja echt super!!


Hast du beim Ansehen ev. einen Ansatz gesehen, weshalb die Drop Downs nicht funktionieren? Bei Alistapart suckerfish DropDown funktionieren die, bei meinem Layout jedoch nicht. Ich frag nur, weil du den Code ja nun etwas kennst.


Tinella

 

[Maik]

Hast du denn auch das für den IE6 (und älter) erforderliche Javascript im Dokument eingebunden?

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);

Im Stylesheet fehlt zumindest schon mal dieser Selektor:

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

und das ul-Listenelement besitzt bei dir auch nicht die dazugehörige ID #nav.

Zum Vergleich kannst du ja nochmal auf http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html nachschauen.

Nachtrag: Mir ist eben aufgefallen, dass die Submenüs nun im Firefox falsch positioniert wird, was an der empfohlenen display:inline-Deklaration für die Listenpunkte liegt. Von daher solltest du diese Angabe nur dem IE über den vorhandenen "Conditional Comment" im Stylesheet mainie.css zuführen.