nicht angemeldet
Frage zu Pulldown-Menü und Box-Modell
Hallo Forum,
habe versucht, das Box-Modell richtig zu verstehen. Trotzdem gelingt mir mein Pulldown-Menü nicht ganz. Im Firefox 2.0 ist alles okay, der IE 6.0 erzeugt in der Menüzeile links einen zusätzlichen Freiraum und bricht das Menü dadurch um. Ich kann nicht finden, wo der Freiraum herkommt bzw. ich weiß nicht, wie ich diesen Freiraum im IE vermeiden kann. Der Grund, warum ich das Menü so exakt positionieren möchte/muss, ist, dass oberhalb des Menüs genau gleich große Grafiken positioniert sind, unter welchen die einzelnen Menüpunkte erscheinen sollen/müssen. Ich habe nur zum Test die Grafiken weggelassen. Kann mir bitte jemand helfen?
Anbei die (validierte) Test-Datei
Schönen Gruß
vom Bronimus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test für Box-Modell</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<script type="text/JavaScript">
<!--
if (top != self) { top.location = self.location; }
window.onload=anzeigen;
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
function anzeigen(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('submenu'+i))
{ document.getElementById('submenu'+i).style.display='none'; }
}
if (d) { d.style.display='block'; }
}
//-->
</script>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
font-size:1em;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
margin-bottom:5px;
background-color:#78A001;
}
#inhalt {
position:absolute;
width:790px;
left:50%;
margin-left:-395px;
background-color:#FFFFFF;
border:1px solid #FFBA00;
z-index:10;
}
#navigator {
height:22px;
padding-top:5px;
padding-left:0px;
background-color:#78A001;
border-bottom:1px solid #FFBA00;
font-size:0.9em;
z-index:10;
}
#navigator a {
color:#FFFFFF;
text-decoration:none;
}
#navigator a:hover {
color:#999999;
text-decoration:none;
}
#navigator dt {
width:143px;
border:1px solid #FFFFFF;
margin-right:6px;
margin-left:7px;
background-color:#AACD17;
font-weight:bold;
text-align:center;
cursor:pointer;
display:block;
float:left;
}
#navigator dd {
width:145px;
border:1px solid #999999;
border-bottom:0;
background-color:#aacd17;
text-align:center;
display:block;
z-index:100;
}
#navigator .submenu1 {
position:absolute;
top:30px;
left:6px;
}
#navigator .submenu2 {
position:absolute;
top:30px;
left:164px;
}
#navigator .submenu3 {
position:absolute;
top:30px;
left:322px;
}
#navigator .submenu4 {
position:absolute;
top:30px;
left:480px;
}
#navigator .submenu5 {
position:absolute;
top:30px;
left:638px;
}
#navigator ul {
padding:0;
line-height:1.6;
}
#navigator li {
padding-top:1px;
padding-bottom:2px;
padding-left:5px;
border-bottom:1px solid #999999;
margin:0;
text-align:left;
vertical-align:middle;
list-style-position:inside;
list-style-type:none;
}
//-->
</style>
</head>
<body>
<div id="inhalt">
<div id="navigator">
<dl id="menu">
<dt onmouseover="javascript:anzeigen('submenu1');" onmouseout="javascript:anzeigen();"><a href="#">Menü 1</a></dt>
<dd id="submenu1" class="submenu1" onmouseover="javascript:anzeigen('submenu1');" onmouseout="javascript:anzeigen();">
<ul>
<li><a href="#">Auswahl 1 1</a></li>
<li><a href="#">Auswahl 1 2</a></li>
<li><a href="#">Auswahl 1 3</a></li>
</ul>
</dd>
<dt onmouseover="javascript:anzeigen('submenu2');" onmouseout="javascript:anzeigen();"><a href="#">Menü 2</a></dt>
<dd id="submenu2" class="submenu2" onmouseover="javascript:anzeigen('submenu2');" onmouseout="javascript:anzeigen();">
<ul>
<li><a href="#">Auswahl 2 1</a></li>
<li><a href="#">Auswahl 2 2</a></li>
<li><a href="#">Auswahl 2 3</a></li>
</ul>
</dd>
<dt onmouseover="javascript:anzeigen('submenu3');" onmouseout="javascript:anzeigen();"><a href="#">Menü 3</a></dt>
<dd id="submenu3" class="submenu3" onmouseover="javascript:anzeigen('submenu3');" onmouseout="javascript:anzeigen();">
<ul>
<li><a href="#">Auswahl 3 1</a></li>
<li><a href="#">Auswahl 3 2</a></li>
<li><a href="#">Auswahl 3 3</a></li>
</ul>
</dd>
<dt onmouseover="javascript:anzeigen('submenu4');" onmouseout="javascript:anzeigen();"><a href="#">Menü 4</a></dt>
<dd id="submenu4" class="submenu4" onmouseover="javascript:anzeigen('submenu4');" onmouseout="javascript:anzeigen();">
<ul>
<li><a href="#">Auswahl 4 1</a></li>
<li><a href="#">Auswahl 4 2</a></li>
<li><a href="#">Auswahl 4 3</a></li>
</ul>
</dd>
<dt onmouseover="javascript:anzeigen('submenu5');" onmouseout="javascript:anzeigen();"><a href="#">Menü 5</a></dt>
<dd id="submenu5" class="submenu5" onmouseover="javascript:anzeigen('submenu5');" onmouseout="javascript:anzeigen();">
<ul>
<li><a href="#">Auswahl 5 1</a></li>
<li><a href="#">Auswahl 5 2</a></li>
<li><a href="#">Auswahl 5 3</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>