I am a bit new to css, but im a pretty fast learner and understand the basics. My problem is that I have a nav bar with custom bullets and they SEEM to overlap with the text/links next to them. Im not sure why or how to fix this?

Ive tryed compairing my code with the code of another layout that implemented a custom bullet but I can seem to find the problem. Any ideas or suggestions would be greatly appriciated...

the css code

UL {
margin-left: 3em;
}

ul li {
}

ol {
margin-left: 3em;
}

ol li {
}

a {
color: #6633FF;
}

a:hover {
text-decoration: none;
}
#menu {
padding: 0px;
}

#menu ul {
margin: 25px;
list-style: none;
}

#menu li {
display: inline;
list-style-position:outside;
}

#menu a {
display: block;
padding: 5px;
background: url(../../../goldco/images/img04.gif) no-repeat left center;
text-decoration: none;
text-transform: uppercase;
color: #2782DC;
}

#menu a:hover, #menu .active a {
background-image: url(../../../goldco/images/img05.gif);
color: #2782DC;
}Hmm... mixing ems with pxes for MARGINS - that'd be the first AREA to check. Pointing us at a sample web page that includes the bullet gifs would HELP.