How to format a list ( <ul>, <li> ) using CSS.

[KnoxVol]

Hello;

Can somebody tell me if the style sheet formatting for the list below is proper?

I hobbled the CSS formatting for the list together using the information from this page:
http://www.alistapart.com/articles/taminglists/

The list does not have bullets (that's the way I want it to look). I am just wanting to make sure that it does not show bullets in some browsers.

I can't see where the style sheet formatting below specifically omits the bullets. I would feel better about it if I could emphatically express in the CSS formatting that bullets are to be omitted.

Do I need to somehow specifically state in the CSS formatting that bullets are to be omitted or is it ok the way it is?


On the page it looks something like this:

»Oak »Maple »Ash »Pine »Hickory »Redwood (this is how I want it to look)

<style type="text/css">
ul.inlineList
{
margin: 0px;
}
li.inlineList {
border-style: none;
padding-left: 2px;
padding-right: 0px;
padding-bottom: 0px;
display: inline;
margin: 3px;
    }
</style>



<ul class="inlineList">
  <li class="inlineList">»Oak</li>
  <li class="inlineList">»Maple</li>
  <li class="inlineList">»Ash</li>
  <li class="inlineList">»Pine</li>
  <li class="inlineList">»Hickory</li>
  <li class="inlineList">»Redwood</li>
</ul> 

Thanks.

[thamba]

Use the property:
list-style: none;

That will ensure you dont have any bullets or anything else showing up in the list.

For more details on styling the ul,li view:
http://www.w3schools.com/css/css_list.asp

[KnoxVol]

thamba;

Thanks. I appreciate the help.

[OctoberWind]

additionally (since it looks misleading in your post), be sure to escape the right angle brackets in your li.
<li class="inlineList">&raquo;Oak</li>

also: (a question in a response) if you define a class for ul, do you need to redefine the same class for each li? or does that inherit from the parent ul?

[Centauri]

Just a quick note - to save yourself some typing, you don't have to declare a class for each <li> - as the <ul> is identified, you can reference the <li>s from this.

<style type="text/css">
ul.inlineList {
margin: 0px;
}
ul.inlineList li {
border-style: none;
padding-left: 2px;
padding-right: 0px;
padding-bottom: 0px;
display: inline;
margin: 3px;
list-style: none;
}
</style>



<ul class="inlineList">
  <li>&raquo;Oak</li>
  <li>&raquo;Maple</li>
  <li>&raquo;Ash</li>
  <li>&raquo;Pine</li>
  <li>&raquo;Hickory</li>
  <li>&raquo;Redwood</li>
</ul>

[KnoxVol]

Thanks everyone for the help. I appreciate it.

[bulgarian388]

Or you can skip this altogether:

ul.inlineList {
margin: 0px;
}

And do this:

.inlineList {
margin: 0px;
}

No matter what your still selecting the element with the inlineList class attribute, so adding a "ul" in front of the ".inlineList" is pointless. Not that its going to make your page load faster, but if you do it a lot, the difference can be quite nice (I know because I used to write that way).

Also, do you have a border specified somewhere else? Li's don't have borders, so unless your declaring it somewhere else you can get rid of it. It just bloats your code otherwise.