CSS navigation

AdRock · July 15th, 2006, 07:35 AM

Hello nice people

I am really stumped on this one

I have some CSS i useto ge the effect i want using an unordered list to create my navigation. The only problem is that it is taking out the bullet but what I want to do is to be able to use either a square bullet or use my own. Apart from that it is perfect.

Can someone please have a look at the code and see what is going wrong?

Many thanks

Adam

Code:

 
#navigation {padding: 0; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border-bottom: 1px solid gray; width: 13em;}
#navigation li {list-style: square; margin: 0; padding: 0.25em;
  border-top: 1px solid gray;}
#navigation li a {text-decoration: none;}

Code:

 
<ul id="navigation">
<li><a href="index.html" id="home">Home</a></li>
<li><a href="products.html" id="products">Products</a></li>
<li><a href="services.html" id="services">Services</a></li>
<li><a href="fun.html" id="fun">Fun!</a></li>
<li><a href="support.html" id="support">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html" id="contact">Contact</a></li>
</ul>

ukgeoff · July 15th, 2006, 07:56 AM

The symbol selected using list-style or list-style-type actually appears in the left-hand margin space.

If you give your ul a margin-left: 20px for example, you will see the square.

This has the issue that the squares are to the left of your seperation lines but that may not be an issues for you. If it is, the best way around it I think is to provide your own image.