Fehlerhafte Darstellung im IE

hansmaulwurf82 · 29. März 2007

Hi,
ich habe folgendes Problem. Ich habe für eine Homepage ein vertikales Navigationsmenü.
Per Mouseover wird unten drunter ein 2. vertikales Menü angezeigt. Funktioniert im firefox auch wunderbar, allerdings nicht im IE.

Code:

<html>

<head>
<title>Feuerwehr</title>

<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<link rel="stylesheet" type="text/css" href="sub.css"></link>
</head>

<body link="#000000" vlink="#000000" alink="#000000" bgcolor="#B90000" background="uebergang.jpg">

<div id="menu">
<br>
<br>
<br>
<br>
	<dl>
		<dt onmouseover="montre('smenu1');"><a href="#">Aktuelles</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu2');"><a href="#">Feuerwehr</a></dt>
			<dd id="smenu2">
				<dl>
					<dt><a target="haupt" href="fahrzeuge-geraete/fahrzeuge-geraete.htm">Fahrzeuge</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Geräte</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Feuerwehrhaus</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Termine</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Beitrittserklärung</a></dt>
				</dl>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu3');"><a href="#">Personal</a></dt>
			<dd id="smenu3">
				<dl>
					<dt><a target="haupt" href="#">Jugendfeuerwehr</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Einsatzabteilung</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Führungsstruktur</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">"Junge Alte"</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Musikkorps</a></dt>
				</dl>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">Einsätze</a></dt>
			<dd id="smenu4">
				<dl>
					<dt><a target="haupt" href="einsaetze/2007/2007.htm">2007</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="einsaetze/2006/2006.htm">2006</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="einsaetze/2005/2005.htm">2005</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="startseite.htm">Archiv</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="einsaetze/besondere einsaetze/besondere einsaetze.htm">Besondere Einsätze</a></dt>
				</dl>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu5');"><a href="#">Bilder</a></dt>
			<dd id="smenu5">
				<dl>
					<dt><a target="haupt" href="bilder/2007/2007.htm">2007</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="bilder/2006/2006.htm">2006</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="bilder/2005/2005.htm">2005</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="startseite.htm">Archiv</a></dt>
				</dl>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu6');"><a href="#">Allgemeines</a></dt>
			<dd id="smenu6">
				<dl>
					<dt><a target="haupt" href="#">Gästebuch</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Links</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Heiliger Florian</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Impressum</a></dt>
				</dl>
				<dl>
					<dt><a target="haupt" href="#">Bürgerinformationen</a></dt>
				</dl>
			</dd>
	</dl>

</div>

</body>

</html>

Code:

body {
	margin: 10px;
	padding: 0;
	font: 16px Verdana, Arial, Helvetica, sans-serif;
}

a {
	text-decoration: none;
}

dt, dl, dd, ul, li {
	list-style-type: none;
	margin: 0 10px 0 0;
	padding: 0;
}

dd {
	margin-top: 4px;
}

#menu {
	position: absolute;
	left: 50px;
	top: 20px;
	height: 40px;
	width: 100%;
}

#menu a {
	color: #000;
	text-decoration: none;
}

#menu a:hover {
	text-decoration: none;
}

#menu dl {
	float: left;
	width: 15%;
}

#menu dt {
	width: 90%;
	background: #f00;
	text-align: center;
	padding: 2px;
}

#menu dd {
	text-align: center;
	width: 100%;
}

#menu li {
	display: inline;
}

#menu ul {
	display: inline;
}

#menu li a {
	color: #ff0000;
}

#menu li a:hover {
	text-decoration: none;
}	

#smenu1 dt, #smenu2 dt, #smenu3 dt, #smenu4 dt, #smenu5 dt, #smenu6 dt{
	background: #f0f;
}
	
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
	position: absolute;
	left: 0;

}

Maik · 29. März 2007

Hi,

orientiere dich mal an den Original-Beispielen von Raphaël Goetter und setze die Submenüs in das Listenelement ul mit den Listenpunkten li ein - also:

Code:

<dl>
   <dt onmouseover="montre('smenu2');"><a href="#">Feuerwehr</a></dt>
        <dd id="smenu2">
             <ul>
                   <li><a target="haupt" href="fahrzeuge-geraete/fahrzeuge-geraete.htm">Fahrzeuge</a></li>
                   <li><a target="haupt" href="#">Geräte</a></li>
                   <li><a target="haupt" href="#">Feuerwehrhaus</a></li>
                   <li><a target="haupt" href="#">Termine</a></li>
                   <li><a target="haupt" href="#">Beitrittserklärung</a></li>
             </ul>
     </dd>
</dl>

Oder wofür wird ansonsten diese Regel im Stylesheet benötigt?

Code:

#menu li {
        display: inline; /* Listenpunkte horizontal ausrichten */
}

Zudem fehlt dem Dokument eine Doctype-Deklaration, weshalb der IE in den Quirksmode gesetzt wird und er das Boxmodell falsch interpretiert bzw. nicht unterstützt.

Achja, die Ausrichtung "deines" Menüs ist horizontal, und nicht vertikal.

Fehlerhafte Darstellung im IE

hansmaulwurf82

Maik

Neue Beiträge