Topic: Styling lists is driving me nuts! Pages that link to <a href="https://ozoneasylum.com/backlink?for=25955" title="Pages that link to Topic: Styling lists is driving me nuts!" rel="nofollow" >Topic: Styling lists is driving me nuts!\

 
Author Thread
Ensellitis
Bipolar (III) Inmate

From: Kansas City, MO , USA
Insane since: Feb 2002

IP logged posted posted 06-04-2005 07:29 Edit Quote

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

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:

code:
.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...

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 06-04-2005 07:58 Edit Quote

.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


 

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 06-04-2005 08:07 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-04-2005 14:21 Edit Quote

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/

Ensellitis
Bipolar (III) Inmate

From: Kansas City, MO , USA
Insane since: Feb 2002

IP logged posted posted 06-04-2005 17:20 Edit Quote

Thanks guys, I will check those out after work!

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 06-05-2005 18:58 Edit Quote

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.

code:
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 ...

code:
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 }.

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 06-22-2005 16:32 Edit Quote
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! :-)

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 06-30-2005 20:23 Edit Quote
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:\



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu