Topic: Styling lists is driving me nuts! (Page 1 of 1)

Ok, I am trying to style some lists... Here is the code:

<ul>
    <li class="page_item"><a href="#" title="Something...">Blah</a></li>
    <li class="page_item"><a href="#" title="Something...">Blah</a></li>
    <li class="page_item"><a href="#" title="Something...">Blah</a></li>
    <li class="page_item"><a href="#" title="Something...">Blah</a></li>
    <li class="page_item"><a href="#" title="Something...">Blah</a></li>
</ul>

Here is the CSS I am trying to use:

.page_item li{
list-style-image: url('bullet-off.png');
}

But nothing is happening, at all...

You can check out my site's source and see the structure, if that would help...

.page_item li

This corresponds to <li> elements which are within *other* elements that have the class page_item. (For instance if you had <ul class="page_item"> this would work.)

You probably want

li.page_item


 

also iirc it's simpler to get cross-browser sameness if you specify ul { list-style: none; } and just give the anchors in the list items background images on the left

Yeah, a background image generally gives a whole lot better results.
These links should be quite useful for you:


http://css.maxdesign.com.au/listamatic/
http://www.maxdesign.com.au/presentation/listutorial/

Thanks guys, I will check those out after work!

Incidentally, I think I would follow Slime's "for instance" and get all those class declarations out of your <li>'s. It's far easier to write your classes as few times as possible.

ul.page_item li { styles }

<ul class="page_item">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

... is much easier to type and read than ...

li.page_item { styles }

<ul>
<li class="page_item">Item</li>
<li class="page_item">Item</li>
<li class="page_item">Item</li>
</ul>

Just recently I was asked to clean up a site in which the designer had a huge table of data in which he had added the same class declaration in each and every <td>, as well as to all the <p>'s inside them, instead of simply adding a one class to the table tag and addressing it as table.class td { styles } and table.class p { styles }.

quote:

---

Just recently I was asked to clean up a site in which the designer had a huge table of data in which he had added the same class declaration in each and every <td>, as well as to all the <p>'s inside them, instead of simply adding a one class to the table tag and addressing it as table.class td { styles } and table.class p { styles }.

---

Man - I see that ALL the time. Thank God for global search/replace! :-)

quote:

---

Pugzly said:

Man - I see that ALL the time. Thank God for global search/replace! :-)

---

no shit. you should see this mess i have to work with right now. oi!

Later,

C:\