Bullet Point Problem

[Mr_Lloyd]

Hi There,

I’m having a problem with <ul> and <li> tags. I’m trying to create a link which has a bullet point then the link comes off it on the right hand side.

I can get it all working in IE but when viewed via Mozilla I get the bullet point about 3 pixels further down the page making it not in line with the link.

HELP!

<ul id="nav_link">
<li><a href="#" class="main_link">Link Text</a></li>
</ul>

ul#nav_link
{
white-space: nowrap;
margin: 10px 0px 0px;
list-style: none;
padding: 0px;
}
#nav_link li
{
padding-left: 25px;
background-image: url(../img/arrow.gif);
background-repeat: no-repeat;
background-position: 0 0.6em;
margin-left: 20px;
font-size: 11px;
}

[createErrorMsg]

background-image: url(../img/arrow.gif);
background-repeat: no-repeat;
background-position: 0 0.6em;

Instead of using the image as a background, try...

list-style-image: url(../img/arrow.gif);

Try it in the UL first (it ought to cascade). if it doesn't work there, move it to the LI style declaration, instead.

cEM

[Bonusbana]

Also try changing:

background-image: url(../img/arrow.gif);
background-repeat: no-repeat;
background-position: 0 0.6em;

into:

background: url(../img/arrow.gif) no-repeat 0 50%;