✔ Menü sieht im IE anders aus...

Status
Nicht offen für weitere Antworten.
H

Harzteufel

Erfahrenes Mitglied
Hallo,
ich habe folgendes Menü erstellt, komme jetzt aber nicht weiter... Der IE stellt es mir anders dar, als der Firefox usw. Wie bekomme ich die Browserkompatibiltät hin?
Verbesserungsvorschläge sind ebenfalls willkommen :)

Besten Dank,
Harzteufel

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>
<style type="text/css">
<!--
body {
background: #ABDBDB;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: #FFFFFF;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 10px;
left: 0px;
width: 180px;
}
#menu dd {
position: absolute;
z-index: 100;
left: 178px;
margin-top: -29px;
width: 120px;
line-height: 2px;
}
#menu ul {
padding: 2px;
}
#menu li a {
color: #ffffff;
padding: 7px;
padding-left: 3px;
display: block;
border-bottom: 1px solid #ffffff;
font: 10px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: right;
}

#menu li a:hover {
color: #000000;
border-bottom: 1px solid #000000;
}
#menu dt a {
color: #ffffff;
padding: 7px;
padding-left: 3px;
display: block;
border-bottom: 1px solid #ffffff;
font: 12px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: right;
}
#menu dt a:hover {
color: #000000;
border-bottom: 1px solid #000000;
text-decoration: none;
}
-->
</style>
</head>
<body>
<!-- Menu  -->
<dl id="menu">
<dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
	<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> 
    	<ul>
     	 <li><a href="#">Menu 1.1</a></li>
    	  <li><a href="#">Menu 1.2</a></li>
    	  <li><a href="#">Menu 1.3</a></li>
  	  </ul>
  	</dd>	
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Menu 2</a></dt>
	<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> 
    	<ul>
  	    <li><a href="#">Menu 2.1</a></li>
  	    <li><a href="#">Menu 2.2</a></li>
  	  </ul>
	</dd>	
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"><a href="#">Menu 3</a></dt>
	<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> 
		<ul>
	      <li><a href="#">Menu 3.1</a></li>
 	      <li><a href="#">Menu 3.1</a></li>
 	      <li><a href="#">Menu 3.1</a></li>
	      <li><a href="#">Menu 3.1</a></li>
 	      <li><a href="#">Menu 3.1</a></li>
 	      <li><a href="#">Menu 3.1</a></li>
		</ul>
	</dd>
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a href="#">Menu 4</a></dt>
	<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> 
		<ul>
		  <li><a href="#">Menu 4.1</a></li>
 	      <li><a href="#">Menu 4.1</a></li>
		</ul>
	</dd>
</dl>
</body>
</html>
 
Den einzigen Unterschied, den ich zwischen den beiden Browsern feststellen kann, ist der Abstand der Submenüs in der Vertikalen.

Lösungsvorschlag:

Code: 
#menu dd {
position: absolute;
z-index: 100;
left: 178px;
margin-top: -29px;
width: 120px;
line-height: 0;
}
 
Cool, vielen Dank... Ich beschäftige mich erst seit kurzer Zeit mit CSS. Hätte da mal noch zwei kleine Fragen... Du hast bei "line-height" keine Angabe hinter der Null gemacht. Was nimmt er denn für ein "Maß", wenn ich nichts dahinter schreibe oder macht man das nur bei der Null so, weil Null eben Null ist (egal welches Maß)?

Dann habe ich in dem Menü noch das Problem, dass beim ersten Unterpunkt die Linien noch auf einer Linie sind, dann aber jeweils ein Pixel bei der Höhe fehlt - woran könnte das liegen?

Vielen Dank.
 
Wenn der Wert null beträgt, ist keine Einheitsangabe erforderlich.

Diese Verschiebungen habe ich in meinem ersten Posting gemeint, und könnten aus den unterschiedlichen Schriftgrößen resultieren.


[editpost] Hier das korrigierte Stylesheet:

Code: 
body {
background: #ABDBDB;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 10px;
left: 0px;
width: 180px;
}
#menu dd {
position: absolute;
z-index: 100;
left: 178px;
margin-top: -29px;
width: 120px;
line-height: 0;
}
#menu ul {
padding: 0;
}
#menu li a {
color: #ffffff;
padding: 7px;
padding-left: 3px;
display: block;
border-bottom: 1px solid #ffffff;
font: 12px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: right;
}

#menu li a:hover {
color: #000000;
border-bottom: 1px solid #000000;
}
#menu dt a {
color: #ffffff;
padding: 7px;
padding-left: 3px;
display: block;
border-bottom: 1px solid #ffffff;
font: 12px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: right;
}
#menu dt a:hover {
color: #000000;
border-bottom: 1px solid #000000;
text-decoration: none;
}
 
Top, jetzt siehts gleich aus :)
Leider habe ich gerade noch ein Problem festgestellt, was vermutlich eher im Javascript liegt.
Beim ersten Menüpunkt funktioniert alles super, aber bei den anderen Punkten bleibt immer nur der erste Unterpunkt stehen... Möchte ich dann die weiteren Unterpunkte berühren, verschwinden alle Unterpunkte. Hast Du vielleicht auch hier noch ne Idee für mich?

Besten Dank!
 
Seltsam..., im Original-Script funktioniert's einwandfrei und in deiner CSS-Variante taucht das Problem nur im IE auf :confused:
 
Trotz mehrmaliger "Neustarts" bekomme ich das Problem nicht in den Griff... Firefox, Netscape und Opera haben keinerlei Probleme, nur der Internet Explorer mag nicht... aber ich kann die User des Browsers nicht vernachlässigen Jeder Hinweis wird dankbar angenommen
 
Hi,

wenn du #menu dd einen Hintergrund zuweist, sollte es funktionieren - warum, frag mich nicht.
Soll er transparent sein, so bietet sich ein transparentes GIF an.
Code: 
#menu dd {
position: absolute;
z-index: 100;
left: 178px;
background: url(spacer2x2.gif);
margin-top: -29px;
width: 120px;
line-height: 0;
}
Ciao
Quaese
 
Hammer Vielen Dank... eine Erklärung brauch ich nicht, egal! Wichtig ist, dass es funktioniert und hinzugelernt habe ich trotzdem

Besten dank an euch beide
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück