[sun_sam]

Moin,

ich habe hier jetzt nicht so direkt eine Antwort gefunden. Es geht um folgendes:
Ich habe ein horizontales Menü basierend auf einem Grid (960.gs):

.sitewrapper
{
	position: relative;
	width: 840px;
	left: 50%;
	margin: 0 0 0 -420px;
}

#nav
{
	position: relative;
	width: 100%;
	color: white;
	background-color: #001d6c;
	height: 40px;
	line-height: 40px;
	z-index: 3;
}

#nav ul
{
	position: relative;
	list-style-type: none;
	height: 40px;
	z-index: 4;
}

#nav li
{
}

.mainnav
{
	position: relative;
	line-height: 40px;
	height: 40px;
	z-index: 5;
}

.mainnav:hover
{
	height: 42px;
	line-height: 42px;
	margin: -1px 4px 0 4px;
	z-index: 6;
	position: relative;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

#nav a
{
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	color: white;
	display: block;
	font-size: 11pt;
	background-color: #001d6c;

/*GRID*/
.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 840px;
}

.grid_1, /*bis .grid_12 */
{
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

}

<div id="nav">
	<div class="sitewrapper">
		<div class="container container_12">
			<ul>
				<li class="grid_2 mainnav"><a href="">eins</a></li>
				<li class="grid_2 mainnav"><a href="">zwei</a></li>
				<li class="grid_2 mainnav"><a href="">drei</a></li>
				<li class="grid_2 mainnav"><a href="">vier</a></li>
				<li class="grid_2 mainnav"><a href="">fuenf</a></li>
				<li class="grid_2 mainnav"><a href="">sechs</a></li>
				<li class="clear">(hier steht normalerweise ein Leerzeichen)</li>
			</ul>
		</div>
	</div>
</div>

Das mit dem Z-Index ist nur probehalber drinne... Die Seite verhält sich im IE6..7 FF 2.x ... 3.5 Opera 9, safari 3, google Chrome absolut gleich. Für den IE6 sieht der Stylesheet natürlich anders aus. Ich teste die Seite auf ner VM mit der spoon browser-sandbox...

Die Klasse sitewrapper ist für die Unterteilung in Zeilen nötig (head, nav, content, foot...), da wie bei der Nav (bzw. foot) z. B. der Hintergrund die komplette Fensterbreite einnimmt... Bin halt kein fan von margin: auto Zentrierung.. Aber das tut hier jetzt nichts zur Sache!

Das Problem: Im IE8 (IE8-Modus) verschwinden die Links sporadisch unter der Nav, bleiben horizontal aber auf der richtigen Position. Wenn man die Seite neu lädt, kann es passieren, dass die Links an der richtigen Stelle sind.

Nehme ich für die Links: display:block aus, sieht es a) nicht toll aus, und b) verhält sich aber dafür in allen genannten Browsern gleich...

Ich könnte ja für die mainnav-Klasse sagen display:block und für die Links nochmal explizit display:inline. Das hat aber zur Folge, dass die Elemente natürlich (trotz z-index?, natürlich mit absolut positionierten Elementen) nicht mehr größer werden.
Meine Überlegung nun:
- Grid rausschmeißen, Abstände selber bestimmen, Ruhe haben
- IE8 irgendwie dazu bringen, in den IE8-Kompatiblitätsmodus, bzw. IE7-Modus zu gehen
- Ein CSS-Gott, der aus meinem Code schlau wird und mir hilfreiche Tipps geben kann..

Grüße

Nachtrag: Die Seite an sich ist XHTML 1.0 strict und valide. Ich kann keinen Zugriff gestatten, da ich sonst auf meinen Webserver zu Hause umleiten müsste. Und das will ich nicht

[sun_sam]

Moin,

ich hab jetzt mal ne Testseite hochgeladen... Jetzt ist die Wahrscheinlichkeit geringer, dass der IE8 das Menü richtig anzeigt.. Zumindest auf der Test-Maschiene.