Probleme im IE mit Hover-Effect für ein Menü!

Status
Nicht offen für weitere Antworten.
D

daddz

Mitglied
Ich bins mal wieder...und mal wieder spackt der IE rum. Ich weiß nicht wieso aber naja...
Das ganze ist hier zu betrachten: Klick!
Zum Problem:
Im IE wird beim Menü der Hover Effekt nur zur hälfte angezeigt! Ich weiß nicht wieso aberich vermute das es daran liegt das ein div auf dem anderen drauf ist und ich irgendwas mit dem z-index ändern muss...hab ich aber erfolglos ausprobiert! Vielleicht hab ich den z-index einfach nur in die falschen divs geschrieben! Naja...ich hoffe ihr könnt mir helfen...
Hier ein bisschen Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 		"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Roessleins Radlereck</title>
		<link rel="stylesheet" type="text/css" href="main.css">
		<link rel="stylesheet" type="text/css" href="menu.css">
	</head>
	<body>
		<div id="box">
			<div id="header">
				<div id="logo_bg"></div>
				<div align="center">
					<div id="logo" ></div>
				</div>
				<div id="main_menue">
					<div class="menu">
						<div class="menu_punkt a">
							<a href="#">Main1</a>
							<a href="#">Main2</a>
							<a href="#">Main3</a>
							<hr>
							<a href="#">Main4</a>
						</div>
					</div>
					<div id="menu_footer"></div>
				</div>
				<div id="sub_menue">
					<div class="menu2">
						<div class="menu_punkt a">
							<a href="#">Sub1</a>
							<a href="#">Sub2</a>
							<a href="#">Sub3</a>
							<hr>
							<a href="#">Sub4</a>
						</div>
					</div>
					<div id="menu_footer2"></div>
				</div>
			</div>
			<div id="center">
				<div id="content"></div>
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>

CSS-Datei:
HTML: 
#box {
	position: absolute;
	top: 10px;
	left: 5%;
	width: 90%;
	right: 5%;
	border-width: 1px;
	border-color: black;
	border-style: solid;
}

#header {
	position: relative;
	height: 189px;
}

#logo {
	position: relative;
	background: url('pics/roess_rad_logo.gif') no-repeat;
	width: 300px;
	height: 189px;
}

#logo_bg {
	position: absolute;
	background: url('pics/logo_bg2.jpg') repeat-x;
	width: 100%;
	height: 189px;
}

#main_menue {
	position: relative;
	float: left;
	top: -86px;
	width: 89px;
	text-align: center;
}

#sub_menue {
	position: relative;
	float: right;
	top: -86px;
	width: 89px;
	text-align: center;
}

#menu_footer {
	position: relative;
	background: url('pics/ecke2.jpg') no-repeat top left;
	width: 89px;
	height: 23px;
}

#menu_footer2 {
	position: relative;
	background: url('pics/ecke3.jpg') no-repeat top right;
	width: 89px;
	height: 23px;
}

Danke schonmal!

greetz
daddz
 
Okay...hier ist die menu.css:
HTML: 
.menu {
	border-width:1px;
	border-style:solid;
	border-color:#545457;
	border-top:0px;
	border-bottom:0px;
	border-left:0px;
	background-color:#6487DB;
	padding:3px;
}


.menu_punkt a {
	display:block;
	border-width:1px;
	border-style:solid;
	border-color:#6487DB;
	background-color:#6487DB;
	padding:5px;
	text-decoration:none;
	font-size:12px;
	font-family:Verdana, Arial, Sans-Serif;
	color:white;
}

.menu_punkt a:hover {
	display:block;
	border-width:1px;
	border-style:solid;
	border-color:#A2B7E9;
	background-color:#7393DF;
	padding:5px;
	text-decoration:none;
	font-size:12px;
	font-family:Verdana, Arial, Sans-Serif;
	color:white;
}

.menu2 {
	border-width:1px;
	border-style:solid;
	border-color:#545457;
	border-top:0px;
	border-bottom:0px;
	border-right:0px;
	background-color:#6487DB;
	padding:3px;
}

greetz
daddz
 
Also entweder ich bin blind oder du hast garkeinen z-index vergeben. Aber ich würde für a nicht nur den hovereffekt definieren sondern auch noch den Rest (visited, link, active).
Obs daran liegt weiß ich jetzt nicht müßte das erst mal ausprobieren, hab nachher vielleicht etwas Zeit dafür.

MFG
 
Ja ich habe den Z-Index wieder rausgenommen weils nicht funktioniert hat! Wo müsste ich ihn richtigerweise hinschreiben?

greetz
daddz
 
Hi,
also das mit dem z-index ist eigentlich dafür ja nicht gedacht und es hilft dir auch nicht wirklich weiter.
Ich hab mal alles bei dir ausseinander genommen und ausprobiert aber hatt alles nichts genützt.
Meiner Meinung nach hast du auch ein paar ID und classen die du in andere integrieren kannst.

Ich denke das liegt irgendwie an irgendeinem ID weil die sind ja primärer als classen, versuch mal das menü ohne den Rest zu erstellen um zu sehen ob du da schonmal einen Unterschied hast.
 
Das Menü alleine funktioniert ja! Das ist nicht das Problem! Das div vom Logo überlappt das Menü im IE anscheinend! Aber ich weiß nicht wie ich es wegbekomm!

greetz
daddz
 
Hallo daddz,

um den z-index für die beiden MenüDIVs anwenden bzw.steuern zu können, müssen sie auch absolut positioniert werden - bei einer relativen Position funktioniert die Angabe z-index nämlich nicht!

Okay, habe mal in deiner main.css folgende Modifikationen vorgenommen:
[ Browsercheck: IE 5.5, Moz 1.6, NN 7.0, Opera 7.23 ]

Code: 
#main_menue {
        position: absolute;
        left: 0;
        top: 103px;
        width: 89px;
        text-align: center;
        z-index: 2;
}

#sub_menue {
        position: absolute;
        right: 0;
        top: 103px;
        width: 89px;
        text-align: center;
        z-index: 2;
}

Im HTML-Source ist mir zudem ein Syntax-Fehler aufgefallen:

Code: 
<div class="menu_punkt a">

<!-- korrigiert -->
<div class="menu_punkt">

greez, maik.l
 
@michaelsinterface: Aber das komische ist doch das das Menü überall gleich aufgebaut ist also müßte der Hover doch auch überall funktionieren ohne das man den Z-Index vergibt, oder?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück