IE6/7 und Navigation in zwei Blöcken

[dieselross]

Hallo Gemeinde,

folgende Navigationsstruktur reagiert im IE6/7 seltsam:

<div id="header">  
	<ul id="headnav"> <!-- Hauptnavigation linker Block -->  
		<li id="home">  
			<a href="#" class="home"> <!-- Navigationsbutton -->  
				<span class="beschriftung">Home</span> <!-- Beschriftung abgesetzt für Positionierung -->  
			</a> <!-- Ende Navigationsbutton -->  
		</li>  
		<li id="kontakt">  
			<a href="#" class="kontakt">  
				<span class="beschriftung">Kontakt</span>  
			</a>  
		</li>  
		...  
	</ul> <!-- Ende Hauptnavigation linker Block -->  
	<ul id="toolbar"> <!-- Hauptnavigation rechter Block -->  
		<li id="englisch">  
			<a href="#" class="englisch">  
				<span class="beschriftung">Englisch</span>  
			</a>  
		</li>  
		<li id="deutsch">  
			<a href="#" class="deutsch">  
				<span class="beschriftung">Deutsch</span>  
			</a>  
		</li>  
		...  
	</ul> <!-- Ende Hauptnavigation rechter Block -->  
</div>

/* Positionierung der Blöcke: */  
#headnav, #toolbar {  
	position: absolute;  
	display: block;  
	height: 80px;  
	padding-top: 5px;  
}  
#toolbar {  
	right: 0px;  
}  
/* Definition der einzelnen Buttons: */  
#headnav li {  
	position: relative;  
	display: block;  
	width: 70px;  
	height: 70px;  
	float: left;  
	margin-right: 5px;  
}  
#toolbar li {  
	position: relative;  
	display: block;  
	width: 70px;  
	height: 70px;  
	float: right;  
	margin-left: 5px;  
}  
#headnav li a {  
	width: 60px;  
	height: 60px;  
	display: block;  
	padding: 5px;  
	background-repeat: no-repeat;  
	background-position: 0px 0px;  
}  
#toolbar li a {  
	width: 60px;  
	height: 60px;  
	display: block;  
	padding: 5px;  
	background-repeat: no-repeat;  
	background-position: -70px 0px;  
}  
/* Positionierung der Beschriftung: */  
#headnav li a .beschriftung {  
	display: block;  
	position: absolute;  
	right: 22px;  
	bottom: 22px;  
	color: #fff;  
	font-size: 7px;  
	font-weight: bold;  
	text-align: right;  
}  
#toolbar li a .beschriftung{  
	display: block;  
	position: absolute;  
	right: 6px;  
	bottom: 22px;  
	color: #fff;  
	font-size: 7px;  
	font-weight: bold;  
	text-align: right;  
}  
/* Definition des Rollover-Verhaltens: */  
#headnav li a:hover {  
	background-position: -70px 0px;  
}  
#toolbar li a:hover {  
	background-position: 0px 0px;  
}  
#headnav li a:hover .beschriftung,  
#toolbar li a:hover .beschriftung {  
	display: inline;  
	color: #fff;  
	font-size: 10px;  
	font-weight: bold;  
	position: absolute;  
	right: 6px;  
	bottom: 6px;  
}

Während der rechte Block reagiert wie erwartet (der Navigationsbutton zeigt den entsprechenden Rollover-Status beim Erreichen der Grenzen des Buttons) reagiert der linke Block nur, wenn der Pointer auf der Beschriftung ist. Hat jemand eine Idee, wo der Fehler liegt? (Die Definitionen für die background-images habe ich weggekürzt weil ich denke, die tun hier nichts zur Sache)

Gruß
dieselross

[dieselross]

Wirklich keine eine Idee?

Gruß
dieselross

[Matthias Apsel]

Om nah hoo pez nyeetz, dieselross!

Wirklich keine eine Idee?

Wo kann man sich das anschauen?

Matthias

[dieselross]

Hier:

85.214.55.51/REWAKON/Neuansatz/

Gruß
dieselross

[Matthias Apsel]

Om nah hoo pez nyeetz, dieselross!

Du hast float und display: block gleichzeitig festgelegt. Möglicherweise verschlucken sich die alten IE daran.

Verschiedentlich wurde display: inline als Fix empfohlen.

Matthias

[dieselross]

Hallo Matthias,

Dein Tipp mit dem display:block brachte mich auf die Idee, die Positionierung noch einmal zu überdenken. Und siehe da:

#headnav, #toolbar {  
	position: relative;  
	display: block;  
	height: 80px;  
	padding-top: 5px;  
}  
#toolbar {  
	position: absolute;  
	right: 0px;  
}  
#headnav li {  
	position: relative;  
	display: block;  
	width: 70px;  
	height: 70px;  
	float: left;  
	margin-right: 30px;  
}  
#toolbar li {  
	position: relative;  
	display: block;  
	width: 70px;  
	height: 70px;  
	float: right;  
	margin-left: 30px;  
	margin-top: -90px;  
}

That did the trick.

Danke für die Inspiration!

Gruß
dieselross

[Melvin Cowznofski]

Hallo dieselross!

folgende Navigationsstruktur reagiert im IE6/7 seltsam:

Ich kenne Deine Projektvorgabe nicht, aber was IE < 9 betrifft, ist der allgemeine Konsens, sich mit einem "es ist valide, funktioniert und ist bedienbar" zu begnügen, statt auf Biegen und Brechen alles daran zu setzen, im IE6 eine ident aussehende Ausgabe wie in einem aktuellen Browser zu erreichen.

Und so nebenbei: Du musst in einem CSS idente Angaben für verschiedene Elemente nicht doppelt notieren!

.foo p {background: rgb(200,200,200); border: 1px solid rgb(010,010,010); }  
.bar p {background: rgb(200,200,200); border: 1px solid rgb(010,010,010); }

ist das Gleiche wie

.foo p, .bar.p {background: rgb(200,200,200); border: 1px solid rgb(010,010,010); }  

Doppelte CSS Angaben machen das Sheet nur unnötig größer und unübersichtlicher.

Mit lieben Grüßen

Melvin Cowznofski

[Matthias Apsel]

Om nah hoo pez nyeetz, Melvin Cowznofski!

… aber was IE < 9 betrifft, ist der allgemeine Konsens, sich mit einem "es ist valide, funktioniert und ist bedienbar" zu begnügen, statt auf Biegen und Brechen alles daran zu setzen, im IE6 eine ident aussehende Ausgabe wie in einem aktuellen Browser zu erreichen.

Das ist, denke ich, nicht des Dieselrosses Ziel. Es handelt sich hierbei um eine Einschränkung der Usability, die man beheben sollte, falls man eine Lösung findet.

Doppelte CSS Angaben machen das Sheet nur unnötig größer und unübersichtlicher.

Es kann aber auch sinnvoll sein, die Styles für einzelne Elemente an einer Stelle zu konzentrieren und nicht über das Stylesheet zu verteilen.

Matthias

[dieselross]

Hallo Melvin,

Ich kenne Deine Projektvorgabe nicht, aber was IE < 9 betrifft, ist der allgemeine Konsens, sich mit einem "es ist valide, funktioniert und ist bedienbar" zu begnügen, statt auf Biegen und Brechen alles daran zu setzen, im IE6 eine ident aussehende Ausgabe wie in einem aktuellen Browser zu erreichen.

Das wäre zu schön, um wahr zu sein. Der Kunde ist pixel-pingelig.

Und so nebenbei: Du musst in einem CSS idente Angaben für verschiedene Elemente nicht doppelt notieren!

.foo p {background: rgb(200,200,200); border: 1px solid rgb(010,010,010); }

.bar p {background: rgb(200,200,200); border: 1px solid rgb(010,010,010); }

>   
> ist das Gleiche wie  
>   
> ~~~css

.foo p, .bar.p {background: rgb(200,200,200); border: 1px solid rgb(010,010,010); }  

> 

Stimmt. Im Prinzip weiß ich das auch. Teilweise rühren Doppeldefinitionen noch vom herumprobieren her.
Und im Endeffekt möchte ich später das css ohnehin der Übersichtlichkeit wegen in Module aufteilen, die ich dann per @import in einer zentralen styles-Datei sammeln will. In sofern ist die Eine oder Andere Doppeldefinition sogar zweckdienlich.

Ansonsten: herzlichen Dank für die Kommentare.

Gruß
dieselross