div und IE6

[Swat]

Moin

ich brauch mal eure Hilfe ... bin seit einer Woche am Probieren im FF (wie nicht anders zu erwarten) geht es den IE7 habe ich auch unter Kontrolle bekommen aber dann habe ich das mal mit dem IE6 probiert

Also ich wollte folgendes realisieren, haben einen Header (div) mit background-image, da hinein sol ein weiterer div (so ein Tab/Reiter wie auch hier im Menü zu finden ist) auch mit einem background-image, das CSS des letzten div's wird über "onmouseover" gewechselt (verschiedene background-images). Das ganze schaut wie gesagt im FF und IE7 auch klasse aus und klappt alles, nur im IE6 will das nicht so klappen.

Hier mal der entsprechende Teil des Codes:

Code: Alles auswählen

<div id="header">
			<div class="nav_m_h" 
				onmouseover="this.className='nav_m'"
				onmouseout="this.className='nav_m_h'"
				onclick="location.href='index.php?cat=beispiel1'">
			</div>
			<div class="nav_p_h" 
				onmouseover="this.className='nav_p'"
				onmouseout="this.className='nav_p_h'"
				onclick="location.href='index.php?cat=beispiel2'">
			</div>
<div id="nav">**Untermenü**</div>
</div>

Hier der CSS:

Code: Alles auswählen

#header{
	position:relative;
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
	width:800px;
	height:152px;
	margin-top:20px;
	border:1px #000 solid;
	z-index:2;
}
#nav{
	position:relative;
	background-image:url(images/blende.png);
	background-repeat:repeat;
	width:800px;
	height:32px;
	margin-top:120px;
	z-index:3;
}
.nav_m{
	position:relative;
	background-image:url(images/beispiel1.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:540px;
	z-index:4;
	float:left;

}
.nav_m_h{
	position:relative;
	background-image:url(images/down.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:540px;
	z-index:4;
	float:left;

}
.nav_p{
	position:relative;
	background-image:url(images/beispiel2.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:15px;
	z-index:4;
	float:left;
}
.nav_p_h{
	position:relative;
	background-image:url(images/down.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:15px;
	z-index:4;
	float:left;
}

Seht ihr durch ? sorry was nicht wie ich das anders beschreiben könnte.

Habt ihr eine Idee wie man das hin bekommt ?

Danke

[gn#36]

Wenn ich eines hässlich finde dann sind das Javascriptbasierte Menüs in irgend einer Art, denn die grenzen unter Garantie irgendwelche User aus (z.B. in dem Fall IE6 user, vermutlich auch IE5..., vielleicht auch Opera oder Safari oder Konqueror ...).
Warum nicht per CSS normale Links so aussehen lassen wie DIV Container?
Da gibt es z.B. die Pseudoklasse a:hover die angesprochen wird, wenn sich der Mauszeiger über einem Element befindet. Da braucht es keine Skripte um das zu realisieren. Das hat den Vorteil dass es auch ohne Skript funktioniert und optisch sollte es eigentlich keinen Unterschied machen, denn beides lässt sich über display:block annähernd identisch formatieren.

[Pyramide]

Warum nicht per CSS normale Links so aussehen lassen wie DIV Container?

Hier gibts z.B. viele Beispiele dazu: http://css.maxdesign.com.au/listamatic/