CSS <UL> and <LI> bullets 1

[sylve]

I've never used css before so I am trying to work the example given at

http://www.mattkruse.com/javascript/mktree/index.html

I'm having trouble replacing the bullets by images. It catches the mktree class but seems to ignore anything with .bullet
This line works fine, i can set bullet styles/images in it if i want.

ul.mktree  li { list-style: none; }

These however, seem to be ignored.

ul.mktree  li           .bullet { padding-left: 15px;}
ul.mktree  li.liOpen    .bullet { cursor: pointer; background: url(minus.gif)  center left no-repeat; }

I followed the directions from the example. I probably can get it to work with some tinkering but im still curious as to what went wrong?

 

[Vragabond]

Let's review your code. It is a good thing to learn simple css syntax before you start experimenting. You can find all you need to know about css at the W3 website. What you're saying, in english is:

Select any element that has a class named bullet that is a descendant of an element <li> that is itself a descendat of an element <ul> which has a class mktree. Now, if that is what you want and you're actually setting the padding left to an element withing the <li>, then you have a problem. But if it is simply not understanding css syntax, it can be easily remedied. Also, check this page if you want to translate css syntax to english:

http://gallery.theopalgroup.com/selectoracle/

If it is anything else than what I assumed, please post your html code as well, so that we can see where these classes are applied.

 

[sylve]

Thank you Vragabond, that site is very helpful!

Alright so i get that the css is declaring about 3 classes: mktree->liOpen->bullet

Here is the part that confuses me, if i check out the source of the example code, he never applies the bullet class. It's like it applies it by default.

Here is a example of my html code:

<ul class='mktree' id='mytree'>
  <li class='liOpen'>Pizza
    <ul>
      <li>Cheese</li>
      <li>Pepperoni</li>
    </ul>
</li>

I get no bullets with that, but if i put <li class='bullet'>Cheese</li> i will get the minus.gif near it. I get why it does it but i dont understand why the author of this code says it works.

 

[sylve]

Nevermind, i got it to work! Thank you very much for the help and consideration