CSS-Problem bei Navigation

[city]

Hallo,
habe eine Navigation (siehe URL) mit nachfolgender CSS-Beschreibung erstellt,
die einzelnen Menupunkte werden mit a.navi ausgezeichnet, die jeweils aktuelle Seite mit a.navi2
Bei Firefox alles o.k., allerdings beim IE erscheint die Schrift nicht in weiss.
Was läuft da falsch? (entweder bei mir oder beim IE ;-)

a.navi { display: block;
padding: 3px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #003;
background: #ddf;
border: none;
text-decoration: none;
width: 130px;
}
a.navi:visited { text-decoration: none;
}
a.navi:hover { color: #fff;
background: #003;
border: none;
text-decoration: none;
}
a.navi:active { color: #fff;
background: #003;
border: none;
text-decoration: none;
}
a.navi2 { display: block;
padding: 3px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
background: #003;
border: none;
text-decoration: none;
width: 130px;
}

Danke und Gruss

city

[D.R.]

Hallo,

die einzelnen Menupunkte werden mit a.navi ausgezeichnet, die jeweils aktuelle Seite mit a.navi2

Warum so kompliziert? Du hast doch schon eine <ul> mit der Klasse „navi“. Formatiere alle Links darin einfach durch Verwendung des http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektors. Dann kannst du die die vielen Klassen sparen.

Bei Firefox alles o.k., allerdings beim IE erscheint die Schrift nicht in weiss.

In so einem Fall, solltest du erstmal die http://de.selfhtml.org/css/formate/kaskade.htm#ursprung@title=Spezifität erhöhen. Z.B. über !import. Das scheint hier nämlich das Problem zu sein.

Was läuft da falsch? (entweder bei mir oder beim IE ;-)

Wahrscheinlich der IE. Ich könnte wetten, er vergleicht „navi1:hover“ mit „navi2“.

Aber wie schon erwähnt, würde ich an deiner Stelle mit Nachfahrenselektoren  arbeiten.
Was hältst du davon:

CSS:

  
.navi a {} /*Formatierungen für normale Links in der Navi*/  
.navi a.hierbinich {} /*Formatierungen für Link, der zur aktuellen Kat. führt*/  

  
HTML:  
<ul class="navi">  
<li><a>Link1</a></li>  
<li><a>Link2</a></li>  
<li><a class="hierbinich">Link3</a></li>  
<li><a>Link4</a></li>  
</ul>  

mfg. Daniel

[Gernot Back]

Hallo Daniel,

In so einem Fall, solltest du erstmal die http://de.selfhtml.org/css/formate/kaskade.htm#ursprung@title=Spezifität erhöhen. Z.B. über !import. Das scheint hier nämlich das Problem zu sein.

Bestimmt meintest du !important.

Ich bin ja der Meinung, dass der Einsatz der !important-Regel meist  Ausdruck dessen ist, dass der Web-Autor den Überblick über die Spezifitäten in seinem eigenen Stylesheet verloren hat, gebe aber zu, dass ich mir unlängst bei der Einrichtung eines Stylesheets für den Drucker und die Druckvorschau auch nicht mehr anders als so zu helfen wusste:

  
* {  
   overflow:visible !important;  
}  

Gruß Gernot

[D.R.]

Hallo,

In so einem Fall, solltest du erstmal die http://de.selfhtml.org/css/formate/kaskade.htm#ursprung@title=Spezifität erhöhen. Z.B. über !import. Das scheint hier nämlich das Problem zu sein.

Bestimmt meintest du !important.

Oops, ja du hast Recht.

Ich bin ja der Meinung, dass der Einsatz der !important-Regel meist  Ausdruck dessen ist, dass der Web-Autor den Überblick über die Spezifitäten in seinem eigenen Stylesheet verloren hat

Der Meinung bin ich auch. Allerdings kann es zu Testzwecken nicht schaden.

gebe aber zu, dass ich mir unlängst bei der Einrichtung eines Stylesheets für den Drucker und die Druckvorschau auch nicht mehr anders als so zu helfen wusste

Sieht bei mir ähnlich aus. In meinem Screen-Stylesheet gibt es auch kein !important, im Druck-Stylesheet aber schon.

mfg. Daniel

[City]

Hallo Daniel,

besten Dank,
die Sachemit den nachfahrenselektoren leuchtet ein und macht auchen einen schlankeren Code.

Gruss

city