custom bullets

overlap problem?

[fallinfrom0feet]

Im kinda new to this whole css thing, but im designing a website for a buisness and thot i would implement it. I have some custom bullets but they overlap with the text/links next to them. Im not sure why or how to fix this? I tryed compairing the code with a free layout i downloaded a long time ago but i cant seem to figure out why my site does the overlap and theres doesnt.

the 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;
}

#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;
}

any ideas?

[Xapti]

Well you're putting a background image up, and removing the bullet. Because it's a background-image, it will naturally overlap text. All you need to do is add some padding. Margins are executed outside of the element's background, so it's not as good of an idea to use (you could put a margin or text indent on the anchor element, instead of the padding on the li for instance)
Here is a simple example you should understand:

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}

[swa66]

An alternative might be not to use background images to change the style of bullets.

ul li {
 list-style-image: url(your-bullet.gif);
 list-style-type: circle
}

It can be combined to:

ul li { 
 list-style: square url('arrow.gif'); 
}

There's a third property "list-style-position" that can be set to outside (default) or inside (to put the bullet in the text block (try it on multiple line paragraphs.)

The circle (or square etc) is for when the image should not be available.

I'm not sure how old browsers handle it.

[SuzyUK]

Welcome to WebmasterWorld, fallinfrom0feet

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

you need to zero the margin *and* the padding on a list <ul> or <ol> if you truly want to remove the indent (the space for the bullet which you have removed via the list-style property)

then you can set your own list indent using one or other of left-padding or left-margin, if required. You're using a margin, and that should be OK, and should move the position of the entire list, then you need to make sure you have enough left padding on the <a> to allow the background image, set on it, to show through clearly, the left side of the <a> should sit at the left side of the <ul> - the padding on the <a> should be *at least* as much as the width of the background image