[Würmchen]

Hallo zusammen,
im Grunde ist die Theorie von list-style in CSS ja nicht wirklich schwer. Ich versuche gerade bei meiner Navileiste mit 2 Ebenen die 2. Ebene mit Listenpunkten zu versehen. Aber list-style wird bei mir einfach ignoriert.
Wie man im Code unten sehen kann, wird list-style zunächst auf none gesetzt. Allerdings tut sich da auch nichts, wenn ich was anderes festlege, es kommt einfach kein Listenzeichen...
Auch wenn ich list-style z.B. in die Box für den Hoverzustand eintrage, passiert nix.
Was genau mache ich da denn falsch bzw. wieso werden die list-style-Angaben ignoriert?

P.S. Ich würde ungern den Umweg über eine Hintergrundgrafik gehen, weil manche meiner Menüpunkte ihre Höhe ändern, da sie nach dem Anklicken fett dargestellt werden.
Außerdem soll man ja problemlos die Fontgröße über den Browser regeln können...
Mit Hintergrundgrafiken wird es problematisch, dass dann immernoch alles passt...

Auszug aus der css-Datei...

div#navigation_links{
    width: 200px; 
    height: auto;
    margin-top: 50px;
    margin-bottom: 16px;
    margin-left:0px; 
    text-align: left;
    position: absolute;
    
}
div#navigation_links ul{
    list-style: none;
    margin: 0;
    
    padding:0;
}
div#navigation_links ul li {
    /*list-style: url(none) none inside;*/
    margin: 0;
    padding:0;
    line-height: 130%;
}

div#navigation_links ul li a {
    display: block;
    padding:5px 20px 5px 10px;  
    margin:0;
/*list-style-image:url(../media/bullets/arrow_no.gif);*/
    text-decoration: none;
    color: #333333;    
}
/* 1. Ebene */
div#navigation_links ul li a.navi_links {
    display:block;
    background-color: #FFFFFF;
    border-bottom: 1px dotted #AAAAAA;
    padding-left: 10px;
    color: #333333;
    font-size: 120%;
}
div#navigation_links ul li a.navi_links:hover {
    display:block;
        
    background-color:#575884; /*#E1E1E1;*/
    color: #EEEEEE;
    padding-left: 10px;
    font-size: 120%;
    border-bottom: 1px dotted #AAAAAA;

Gruß, Würmchen

[Cybersmog]

Installier dir doch mal das Firefox Add-On Firebug.
Damit kannst du dann wunderbar sehen, welche CSS Klasse oder ID die gewünschten Eigenschaften überschreibt.

Gruß
Peter

[fuss]

Hellas!

Deine Definition für die weiteren Ebenen kann ja auch nicht greifen, da Du diese an der falschen Stelle vornimmst:
list-style gehört zum übergeordneten ul Element, daher müsste bei Dir das CSS wie folgt. aussehen:

/* list style festlegen für 1. Ebene (sowie alle weiteren, sofern nicht anders definiert) */
div#navigation_links ul{
    list-style: none;
}

/* list style für 2. Ebene sowie alle folgenden */
div#navigation_links ul{
    list-style: square;
}

gruss, fuss

[Würmchen]

?

Das ist doch zweimal der gleiche Code, vom Wert hinter dem "=" mal abgesehen.
Egal wo ich das da

/* list style für 2. Ebene sowie alle folgenden */
div#navigation_links ul{
list-style: square; }

einfüge, es werden doch auf jeden Fall alle Listenpunkte mit "square" versehen.
Ich sehe da im Moment nicht, wie das funktionieren soll...

[fuss]

Huch!
Tatsache, da hat sich in der Hast ein Fehler eingeschlichen, richtig muss die zweite Definition natürlich wie folgt lauten:

/* list style für 2. Ebene sowie alle folgenden */
div#navigation_links ul ul {
    list-style: square;
}

Das zweite ul fehlte - shame on me.

gruss, fuss

[Würmchen]

Mhmm. Damit tut sich auch nix. Ich poste mal den Großteil meiner aktuellen css. Hover, active, etc. nehm ich raus, der Übersicht halber.

div#navigation_links{
    width: 200px; 
    height: auto;
    margin-top: 50px;
    margin-bottom: 16px;
    /*margin-left:-10px; */ 
    text-align: left;
    position: absolute;
    
}
div#navigation_links ul{
    list-style: none;
    margin: 0px;
    padding:0px;
    
    
}
div#navigation_links ul li {
    /*list-style: url(none) none inside;*/
    margin: 0px;
    padding:0px;
    
    line-height: 130%;
}

div#navigation_links ul li a {
    display: block;
    padding-top:5px;
    padding-bottom:5px; 
    margin:0px;
    padding-left:0px;
    padding-right:0px;
    *width: 190px;
    *margin-left:-16px;              /*IE7 ok!!!!*/
    text-decoration: none;
    color: #333333;    
}


/* 1. Ebene */
div#navigation_links ul li a.navi_links {
    display:block;
    background-color: #FFFFFF;
    border-bottom: 1px dotted #AAAAAA;
    padding-left: 10px;
    color: #333333;
    font-size: 120%;
}

/* 2. Ebene */

 div#navigation_links ul li a.navi_links_2 {
    display:block;
    background-color: #E7E7E7; 
    *width:180px;                   /* IE7 ok*/
    
    color: #333333;
    padding-left: 20px;
    font-size: 100%;
}

Gruß, Würmchen