Listenmenü-Problem mit Mozilla, Netscape

[Josef Wageneder]

Hallo Spezialisten,

ich habe ein Problem mit einem Listenmenü unter Mozilla(1.7.13) und Netscape(8.1).

Folgender Code:

CSS:
#sidebar {
 float: right;
 width: 247px;
 position: relative;
}

#sidebar ul {
 width: 208px;
 background-color: #a24145;
 margin: 1.7em;
 position: relative;
 height: 100%;
 border-top: 1px solid #CCCCCC;
 border-right: 1px solid #CCCCCC;
 border-left: 1px solid #CCCCCC;
}

#sidebar li {
 list-style-type: none;
 font-size: 1.2em;
 width: 208px;
 height: 100%;
}

#sidebar li a {
 color: #fff;
 background-color: #a24145;
 display: block;
 border-bottom: 1px solid #CCCCCC;
 text-align: right;
 padding-top: 0.2em;
 padding-right: 1em;
 padding-bottom: 0.2em;
 padding-left: 1em;
 height: 100%;
}

#sidebar li a:hover {
 color: #fff;
 background-color: #d7bbbe;
 border-bottom: 1px dashed #f30;
}

HTML:
<div id="sidebar">
      <ul>
        <li><a href="lva.htm" id="lvanav">LVA &Uuml;bersicht</a></li>
     <li><a href="pflichtfach.htm" id="pflichtnav">Pflichtf&auml;cher</a></li>
        <li><a href="wahlfach.htm" id="wahlnav">Wahlf&auml;cher</a></li>
        <li><a href="diplomarbeit.htm" id="diplomnav">Diplomarbeitsthemen</a></li>
        <li><a href="pruefungen.htm" id="pruefnav">Pr&uuml;fungen</a></li>
  <li><a href="skripten.htm" id="skriptennav">Skripten</a></li>
    </ul>

In Firefox(1.5.03), IE(7 ?!?) und Opera (8.5) erfolgt eine korrekte Darstellung. In Mozilla und Netscape erscheint nach dem 4 Listenpunkt keine Linie (border). Vergrößert man die Seite (z.B. Strg ++), so erscheint unter einem anderem Listenpunkt keine Linie. Bei weiterer Vergrößerung tauchen dann alle Linien auf. Die Seite ist leider (Gott sei Dank) noch nicht online.

Hilfe !!!

Mit herzlichem Dank im Voraus
Joe

[Ingo Turski]

Hi,

Du definierst zuviel.

#sidebar {
position: relative;
}

ist überflüssig.

#sidebar ul {
position: relative;
height: 100%;
}

dito. Und ist die Höhenangabe wirklich nötig?

#sidebar li {
width: 208px;
height: 100%;
}

ist überflüssig.

#sidebar li a {
height: 100%;
}

dito.

Probier mal, diese Regeln rauszunehmen - vielleicht löst sich das Problem dann von selbst.

freundliche Grüße
Ingo

[Josef Wageneder]

Hallo Ingo,

habe alles rausgenommen, bis auf

#sidebar li a {
height: 100%;
}

Das ist notwendig, damit auch der IE die Zeilenhöhe richtig interpretiert. Ansonsten ergiebt sich ein kleiner Spalt zwischen Hyperlink und Listenelement. Aber auch wenn ich die Höhe hier zusätzlich rausnehme, ändert sich nichts in Mozilla und Netscape.

LG
Joe

[Josef Wageneder]

Das ist notwendig, damit auch der IE die Zeilenhöhe richtig interpretiert. Ansonsten ergiebt ...

Rechtschreibfehler: ergiebt
Richtig: ergibt

;)
Joe

[Ingo Turski]

Hi,

experimentiere doch mal etwas mit der Schriftgröße. Selbst 0.1em wirken manchmal Wunder.

freundliche Grüße
Ingo

[Josef Wageneder]

Hallo Ingo,

Du hast Recht!

experimentiere doch mal etwas mit der Schriftgröße. Selbst 0.1em wirken manchmal Wunder.

Mit

#sidebar li {
    list-style-type: none;
    font-size: 124%;
}

anstelle von

#sidebar li {
    list-style-type: none;
    font-size: 1.2em;
}

treten keine Probleme auf.

Herzlichen Dank für Deine kompetente Hilfe.

LG
Joe