Darstellung im IE und Mozilla Firefox
Jannsen
- css
0 Ingo Turski0 Maz
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
Hi,
Vielleict könnt ihr euch die Seite ja mal im IE und im Firefox anschauen.
Welche Seite?
freundliche Grüße
Ingo
hier der Link:
http://www.stadtbuecherei-niebuell.de/test/navigation.html
Hi,
Vielleict könnt ihr euch die Seite ja mal im IE und im Firefox anschauen.
Welche Seite?freundliche Grüße
Ingo
Hi Jannsen,
hier der Link:
http://www.stadtbuecherei-niebuell.de/test/navigation.html
Wo ist da ein Link?
Hier ist einer: http://www.stadtbuecherei-niebuell.de/test/navigation.html
Hier noch einer: </faq/#Q-19>
Gruß,
Gunnar
Hi,
http://www.stadtbuecherei-niebuell.de/test/navigation.html
Der Fehler liegt darin,
/*Ausgew�hlter Men�punkt*/
.selected {
width:100%;
}
für standardkonforme Bowser anzugeben. Und außerdem ist ein Menüpunkt zu lang bzw. die Liste hierfür zu schmal.
freundliche Grüße
Ingo
Der Fehler liegt darin,
/*Ausgew�hlter Men�punkt*/
.selected {
width:100%;
}
für standardkonforme Bowser anzugeben. Und außerdem ist ein Menüpunkt zu lang bzw. die Liste hierfür zu schmal.
Wenn ich "width:100%" wegnehme, dann wird der aktuelle Listenpunkt aber leider im IE nicht vollständig weiß gefärbt. Weißt du, wie ich das vielleicht hinbekomme? Im Firefox sieht es ohne "width:100%" zwar super aus, jedoch ist der Container immer noch schmaler als im IE.
Danke aber für deine schnelle Antwort.
hi,
Wenn ich "width:100%" wegnehme, dann wird der aktuelle Listenpunkt aber leider im IE nicht vollständig weiß gefärbt.
deshalb sagte Ingo ja auch, dass es ein fehler ist, das für _standardkonforme_ browser anzugeben.
Weißt du, wie ich das vielleicht hinbekomme?
in dem du dafür sorgst, dass nur der IE diese formatierung interpretiert, per conditional comments oder per CSS hack (der "star html hack" würde sich bspw. anbieten).
gruß,
wahsaga
in dem du dafür sorgst, dass nur der IE diese formatierung interpretiert, per conditional comments oder per CSS hack (der "star html hack" würde sich bspw. anbieten).
Ok, ich probier´s mal aus. Danke für die Antworten.
Moinsen,
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.
ich vermute eine fehlende Definition von padding und margin als Ursache. Somit macht jeder Browser was an Voreinstellungen da ist, und duie sind nicht überall gleich.