zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE(6-8)-Bug beim clearen von Listen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.08.2010, 14:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2010
Beiträge: 6
pHamez befindet sich auf einem aufstrebenden Ast
Standard IE(6-8)-Bug beim clearen von Listen

Hi allerseits,

plage mich nun schon seit Stunden mit einem Problem rum, dass eine Sitemap - bestehend aus verschachtelten Listen - im IE nicht richtig angezeigt wird. Problem ist, dass mehrere Listen mittels "float: left" aneinandergereiht sind, ein clearer die nächsten Elemente dann in die nächste Reihe befördern soll. Das klappt außer im IE in allen anderen Browsern.

Hier mal ein Screen vom FF, so wie es aussehen soll:


Hier ein Screen im IE:


Man sieht, dass die Liste nach dem clearer im IE nicht ganz nach links geschoben wird, sondern an der nächst-längeren Liste "hängen" bleibt. Gibt man den Listen eine Höhe, sodass alle gleich hoch sind, bricht die Liste im IE richtig um und schiebt sich ganz nach links. Eine fixe Höhe ist aber nicht erwünscht, die Sitemap sollt nämlich später dynamisch aktualisiert werden können.

Hier habe ich den HTML-Code für die Sitemap:
HTML-Code:
<!-- LEVEL 1 -->
		<ul class="lv1">

			<li><a href="#">Test</a>

				<!-- LEVEL 2 -->
				<ul class="lv2">
					<li><a href="#">Test 1</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>
					<li><a href="#">Test 2</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>
					<li><a href="#">Test 3</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>
					<li><a href="#">Test 4</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>

					<div class="clear"></div>

					<li><a href="#">Test 5</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>

					<li><a href="#">Test 6</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>
					<li><a href="#">Test 7</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>
					<li><a href="#">Test 8</a>

						<!-- LEVEL 3 -->
						<ul class="lv3">
							<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>
						<!-- // LEVEL 3 -->

					</li>

					<div class="clear"></div>

					<li><a href="#">Test 9</a></li>

				</ul>
				<!-- // LEVEL 2 -->

			</li>
</ul>
<!-- // LEVEL 1 -->
Und hier das dazugehörige CSS:
Code:
#sitemap ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#sitemap ul li {
	display: inline-block;
	margin: 0px 0px 15px 0px;
	padding: 0px;
	list-style: none;
	font-family: Arial,sans-serif;
	font-size: 78.56%;
	font-weight: bold;
}

#sitemap ul li a {
	float: left;
	color: #887F6F;
}

#sitemap ul li ul {
	float: left;
	margin-left: 155px;
	margin-top: -15px;
	width: 720px;
}

#sitemap ul li ul li {
	float: left;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 0px 20px;
	background-image: url('../img/sitemap-arrow.gif');
	background-repeat: no-repeat;
	background-position: 0px 3px;
	font-size: 100%;
	font-weight: bold;
	width: 155px;
}

#sitemap ul li ul li ul {
	clear: both;
	width: 155px;
	margin-left: 0px;
	margin-top: 0px;
	
}

#sitemap ul li ul li ul li {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	background-image: none;
	font-size: 100%;
	font-weight: normal;
}

#sitemap ul li ul li ul li a {
	color: #CDC8BE;
}
Diverse Hacks und Fixe wie "zoom:1" etc. brachten auch kein Erfolg. Ich hoffe, dass jemand von euch einen Tipp hat. Danke schonmal!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.08.2010, 14:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Deine clearer-Konstruktion ist nicht valide, das solltest Du als erstes beheben.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.08.2010, 15:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2010
Beiträge: 6
pHamez befindet sich auf einem aufstrebenden Ast
Standard

Meinst du, dass ich <div> zwischen Listen packe? Oder was genau ist nicht valide?

Kann auch dem Listen-Element selbst die Klasse "clear" geben, führt aber im IE genauso zu Darstellungsproblemen.
Mit Zitat antworten
  #4 (permalink)  
Alt 26.08.2010, 15:08
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von pHamez Beitrag anzeigen
Meinst du, dass ich <div> zwischen Listen packe? Oder was genau ist nicht valide?
Das sagt Dir der Validator: The W3C Markup Validation Service

Eine Alternative wäre noch, das Ganze nicht per float, sondern per inline-block zu lösen, dann entfällt das clear-Element eh komplett.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 26.08.2010, 15:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2010
Beiträge: 6
pHamez befindet sich auf einem aufstrebenden Ast
Standard

Okay, wie gedacht spuckt der Validator das <div> aus, was zwischen den Listen steht. Das löst aber leider nicht das Problem, selbst wenn ich clearer in die Listen mache vergeigt der IE die Anzeige.

Die Listen sind ja bereits auf "inline-block" gesetzt. Welche Elemente müssen noch auf diesen Wert gesetzt werden?
Mit Zitat antworten
  #6 (permalink)  
Alt 26.08.2010, 15:31
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wirf vorläufig mal jegliches float raus. Und inline-block brauchen ausschließlich die Kind-li von .lv2, denn das sind die Elemente, die das entsprechende Verhalten brauchen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 26.08.2010, 15:37
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ja, das gibt es. IE < 8 und FX < 3 kennen es zwar nicht, aber man kann es ihnen relativ leicht beibringen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #8 (permalink)  
Alt 26.08.2010, 16:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2010
Beiträge: 6
pHamez befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich die ganzen floats raus nehme und für die Kind-Elemente von li.lv2 den "display: inline-block" setze, werden im IE alle Listen untereinander aufgeführt. Im FF stehen die Listen komischerweise noch nebeneinander, allerdings wie bei "vertical-align: bottom" unten angeordnet.
Mit Zitat antworten
  #9 (permalink)  
Alt 26.08.2010, 16:41
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Eher "baseline" - aber vertical-align funktioniert bei inline-block, also kannst Du es auch wie gewünscht deklarieren.

Und dass der IE eine Sonderbehandlung braucht, schrieb ich ja bereits.

In jedem Falle wäre für alle weiteren Fragen sinnvoll, Du postest einen Link mit dem aktuellen Stand.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.08.2010, 12:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2010
Beiträge: 6
pHamez befindet sich auf einem aufstrebenden Ast
Standard

So, mal wieder ein kleines Update:

Als ich zum Test eine leere HTML Seite mit lediglich der Listenstruktur als Inhalt erstellt habe und die Styles nach deinen Angaben aktualisiert habe (floats raus, display: inline-block und vertical-align:top setzen), ging die Sitemap auf einmal im IE8 - aber nur lokal. Sobald ich das Gerüst auf den richtigen Server lade, werden im IE8 die Listen wieder alle untereinander angezeigt. Da führt er die Seite irgendwie im Kompatibilitätsmodus aus. Zum Test habe ich das Ganze mal auf meinen eigenen Server hochgeladen, da funktioniert es im IE8, wenn ich die Kompatibilitätsansicht aktiviere, allerdings auch nicht mehr:
Sitemap

In allen anderen Browsern funktioniert es wie gehabt.

Woran kann das liegen? Was muss für den IE noch zusätzlich angeben, damit die Listen nicht untereinander, sondern nebeneinander angezeigt werden?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
IE6: 3px Bug in Paragraph 0xBAADFEED (X)HTML 3 04.02.2011 16:47
Anfängerfrage zum Thema clearen im ie6 blond CSS 0 13.04.2010 06:47
Welcher IE6 Bug ist das? UL-Float bei LI mit "height" martinpet CSS 5 20.08.2009 10:21
Kennt jemand diesen IE6 Bug? philipp CSS 2 05.01.2008 19:47
IE6 und FF Darstellungsproblem! Bug? Speedy19102000 CSS 27 14.12.2007 16:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:28 Uhr.