css and unordered lists

[pinbrook]

I am fairly c**p as css, i have bought a template and am redoing the pinbrook site, but i need abit of css assistance.

My css has overridden all <ul> <li> tags, i dont want to touch them as it will have a knock on effect but i do want to add into my css the ability to do a simple unordered list ie the one with simple bullets.

How do i code this in the css (i know it has to go at the bottom, and i know my code will look like this)

<ul jolist>
<li> first item</li>
<li>second item</li>
</ul>

TIA

[leehack]

If you have in your stylesheet, something like:

ul {
blah blah
}

This sets global rules for all UL.

If you want an UL to do something different from that, then you will need to create either an ID (if exclusive on page) or a class to control your new UL.

#josList {
blah blah
}

or

.josList {
blah blah
}

and the on your ul, do:

<ul class="josList">
<li>blah</li>
</ul>

or

<ul id="josList">
<li>blah</li>
</ul>

dependent on what you chose (i'd go with the class option).

Remember in your new style you need to rewrite the global rules set in the master UL class that are affecting your UL. So if the master UL has set margins to 0px for example, you will need to put them back. Reverse any styles that you want back basically.

[pinbrook]

ta lee, the thing i need to know is the actual code ie

ul {
blah blah
}

what is the blah blah - is there a resource somewhere that lists what ul li are if they aren't overridden

[leehack]

There is no specific code though Croccy, you put the styles into there that you want to control/change. Reverse the way you are thinking, code your list, look at what you want to change and then add the styles inside to do that change. If you can give an indication of what you want to do i can help guide that.

Margins and padding differ between browsers, so there are no defaults, which is why people tend to set their own styles in their entirety. Reinstating padding, margins and list-style-type are probably the 3 things you need to do.

[Duncan Rounding]

I use TopStyle to manage my css - why not give that a go.

[pinbrook]

Ta both. I got it now....


#pb-list { padding-left:12px; line-height:25px; color:#868686;}
#pb-list li{ margin-left:15px; list-style:square; font-size: 11px;}