changing bullet image means link in UL no longer works

[djkaytee]

Hi,
I have changed the appearance of my bullet points using this in my CSS:

UL {
list-style-image: url(orange_bullet.jpg);
}

which looks lovely. But when I put an A link inside the list eg

<UL>
<LI><A HREF="something">something</A></LI>
</UL>

the link does not work. It looks like a link should, but the cursor doesn't change when I hover over it, and clicking on it doesn't take me to "something". The <A HREF> section works fine when I take it out of <UL>, or when I remove the CSS that was changing the appearance of the bullet points.

I guess I need another stylesheet thingy telling <A HREF>s what to do if they're in an unordered list, but beyond that I'm not sure how to do it.

Can anyone help?
Thanks, Katie

[4css]

Hi can you post a bit more of how your styles are set up? Might help out to see a bit more

[Span]

Hi,

are there absolute positioned divs on your page? It looks like something is covering the list.
With or without bullets, links in a list should behave like a link without thingies telling <a> what to do..

[djkaytee]

Here is my whole code then (you did ask!)
Is it because the UL is inside my "main" div?
Katie

CSS:

UL {
list-style-image: url(orange_bullet.jpg);
}

#banner
{
margin: 0 auto;
width: 100%;
text-align:center;
}

#navcontainer
{
position: absolute;
bottom: 0px;
margin: 0 auto;
width: 100%;
text-align:center;
}

#navcontainer li
{
display: inline;
list-style-type: none;
}

#navcontainer li#home a:link, #navcontainer li#home a:visited, #navcontainer li#home a:active {
width: 100px;
height: 140px;
background: url(orange1.jpg) no-repeat;
}

#navcontainer li#about a:link, #navcontainer li#about a:visited, #navcontainer li#about a:active {
width: 100px;
height: 140px;
background: url(pink1.jpg) no-repeat;
}

#navcontainer li#meet a:link, #navcontainer li#meet a:visited, #navcontainer li#meet a:active {
width: 100px;
height: 140px;
background: url(blue1.jpg) no-repeat;
}

#navcontainer li#links a:link, #navcontainer li#links a:visited, #navcontainer li#links a:active {
width: 100px;
height: 140px;
background: url(green1.jpg) no-repeat;
}

#navcontainer li#home a:hover {
background: url(orange2.jpg) no-repeat;
}

#navcontainer li#about a:hover {
background: url(pink2.jpg) no-repeat;
}

#navcontainer li#meet a:hover {
background: url(blue2.jpg) no-repeat;
}

#navcontainer li#links a:hover {
background: url(green2.jpg) no-repeat;
}

#main
{
margin: 20px;
font-family: arial;
font-size: 16px;
}

HTML:

<div id="banner">
<img src="banner.jpg">
</div>

<div id="main">

...content...

<ul>
<li><A HREF="something">something</A></li>
<li>something else</li>
</ul>
</div>

<div id="navcontainer">
<ul>
<li id="home"><a href="home.html" title="Home"></a></li>
<li id="about"><a href="about.html" title="About"></a></li>
<li id="meet"><a href="meet.html" title="Meet"></a></li>
<li id="links"><a href="links.html" title="Links"></a></li>
</ul>
</div>

[g1smd]

There is no anchor text in the example...