I am having a problem getting rid of small black bullets showing up on my navbar at the right side. Can anyone figure this one out for me please? I would like a 1 px vertical line to separate each of the buttons. Here is the code I am using. I attached the two jpg files I am using for the Navbars and a photo of what the bullets look like.
CSS Stylesheet
/* Navigation Bar */
/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
text-decoration: underline;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size:medium;
border-right: solid 1px #000000;
color:#ffffff;
background:url(pics/button2.jpg) repeat-x center;
display:block;
height:2.5em;
line-height:2em;
text-align:center;
}
/* Navigation Bar */
#navbar{
text-decoration:none;
font-family:Verdana, Geneva, Arial, Sans-Serif;
font-size:medium;
color:#000000;
background:url(pics/button1.jpg) repeat-x center;
display:block;
height: 2.5em;
width: 100%;
line-height: 2em;
border-bottom: solid 1px #000000;
border-right: solid 1px #000000;
text-align:center;
}
#navbar li{
width:25%;
}
#navbar li{
float:left;
}
ul, ol, li {
margin : 0;
padding : 0;
}
Index.htm File
<div id="navbar">
<ul>
<!-- The selected class identifies current page or category -->
<li class="selected"><a href="Index.htm">Home</a></li>
<li><a href="bernedoodles.htm">Bernedoodles</a></li>
<li><a href="puppies.htm">Puppies</a></li>
<li><a href="contract.htm">Ordering or Purchasing</a></li>
</ul>
</div><!-- End navbar -->
CSS Stylesheet
/* Navigation Bar */
/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
text-decoration: underline;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size:medium;
border-right: solid 1px #000000;
color:#ffffff;
background:url(pics/button2.jpg) repeat-x center;
display:block;
height:2.5em;
line-height:2em;
text-align:center;
}
/* Navigation Bar */
#navbar{
text-decoration:none;
font-family:Verdana, Geneva, Arial, Sans-Serif;
font-size:medium;
color:#000000;
background:url(pics/button1.jpg) repeat-x center;
display:block;
height: 2.5em;
width: 100%;
line-height: 2em;
border-bottom: solid 1px #000000;
border-right: solid 1px #000000;
text-align:center;
}
#navbar li{
width:25%;
}
#navbar li{
float:left;
}
ul, ol, li {
margin : 0;
padding : 0;
}
Index.htm File
<div id="navbar">
<ul>
<!-- The selected class identifies current page or category -->
<li class="selected"><a href="Index.htm">Home</a></li>
<li><a href="bernedoodles.htm">Bernedoodles</a></li>
<li><a href="puppies.htm">Puppies</a></li>
<li><a href="contract.htm">Ordering or Purchasing</a></li>
</ul>
</div><!-- End navbar -->