nicht angemeldet
Hallo!
Ich hab da ein Problem mit der Darstellung meiner Navigation in den veschiedenen Browsern. Irgendwie schneidet Mozilla Firefox etwas von meinem Navigations-Container auf der rechten Seite ab. Im IE ist der Navigatioons-Container größer als im Firefox, und so will ich es auch eigentlich von der Größe her haben. Kann mir jemand vielleicht sagen, wie ich verhindern kann, dass Firefox mir was vom Container abschneidet? Der aktive Menüpunkt (im Beispiel "Startseite") hat die gewünschte Breite.
Hier erstmal der Quelltext:
---------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nav</title>
<style type="text/css"><!--
#hauptnavigation {
width:11em;
background-color: #3a6ea5;
border: 1px solid #A9B0D7;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #2E3192;
font-size:0.7em;
}
#hauptnavigation ul, #hauptnavigation ul li {
padding: 0px;
margin: 0px;
list-style: none;
}
#hauptnavigation a {
text-decoration: none;
display: block;
color: #FFFFFF;
border-left:5px solid #FFF;
border-color:#3a6ea5;
padding-right:3px;
}
#hauptnavigation a:hover {
text-decoration: none;
display: block;
background-color:#FFFFFF;
color:#3a6ea5;
border-left: 5px solid #FFF;
border-color:#3a6ea5;
padding:6px 7px;
}
#hauptnavigation a:active {
text-decoration: none;
display: block;
background-color:#FFFFFF;
color:#000000;
border-left: 5px solid #000;
}
* html #hauptnavigation a {
width: 100%;
}
#hauptnavigation ul li {
font-weight: bold;
border-bottom: 1px solid #FFFFFF;
}
* html #hauptnavigation ul li {
height: 1em;
}
#hauptnavigation ul li a {
padding: 6px;
}
/*Klasse unsichtbar für den Anker zum Überspringen der Navigation*/
.unsichtbar {
position: absolute;
left: -1000px;
top: -1000px;
width: 0px;
height: 0px;
overflow:hidden;
display:inline;
}
/*Unterpunkte*/
#hauptnavigation ul li ul li a {
padding: 6px;
padding-left:7px;
}
#hauptnavigation ul li ul li {
font-weight: normal;
border-top: 1px solid #A9B0D7;
border-bottom: 0 solid #A9B0D7;
}
/*Ausgewählter Menüpunkt*/
.selected {
width:100%;
color:#000000;
text-decoration: none;
background-color:#FFFFFF;
border-left: 5px solid #000;
padding:6px 7px;
}
//--></style>
</head>
<body style="background-color:#0000FF;">
<div id="hauptnavigation">
<p class="unsichtbar"><a href="#zielAnker">Navigation überspringen</a></p>
<strong class="unsichtbar">Hauptnavigation</strong>
<ul>
<li><div class="selected">Startseite</div></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="team.html">Wir über uns</a>
<ul>
<li><a href="team2.html">Das Team der Bücherei</a></li>
<li><a href="team3.html">Kontakt</a></li>
</ul>
</li>
<li><a href="medienbestand.html">Medienbestand</a></li>
<li><a href="service.html">Serviceleistungen</a></li>
<li><a href="veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="kinder.html">Für Kinder</a></li>
<li><a href="benutzung.html">Benutzung</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<a name="zielAnker" class="unsichtbar"></a>
</div>
</body>
</html>
----------------------------------------------------------------
Vielleict könnt ihr euch die Seite ja mal im IE und im Firefox anschauen.
Hoffe ihr könnt mir helfen. Danke im Voraus.
MfG, Jannsen
Gunnar Bittersmann