Custom bullets on li that are also links?

bullets li a ul

[suite102]

So, I want an unordered list with custom bullets. No sweat. Now, I want bulletA to appear as the default customer bullet. I want bulletB to appear when the list item is linked.

My style sheet is:

.bodyBorder ul {
font-size: 11px;
line-height: 14px;
color: #333333;
list-style-image: url(/images/common/bullet.gif);
padding: 4px 0px 0px 18px;
margin: 0px;
}
.bodyBorder ul a:link, .bodyBorder ul a:visited, .bodyBorder ul a:active {
color: #333333;
text-decoration: none;
list-style-image: url(/images/common/arrow_red.gif);
}
.bodyBorder ul a:hover {
color: #990000;
text-decoration: underline;
list-style-image: url(/images/common/arrow_red.gif);
}

SO I get the bullet by defaul, but the arrow when te li is linked.

Now, this doesn't seem to work in Firebird (which is okay). The problem is that in IE6, it works except when you mouseover the link, the bullet turns into a standard HTML round bullet for a split second and returns to the arrow. It's not obvious, but it's there and it's driving me crazy.

If I don't bother with special custom bullets for linked (i.e. they are all the default custom bullet), i don't see the HTML flicker.

Has anyone seen this before?

Thanks,

James Ellis

[drbrain]

list-style only applies to elements that have the display property set to list-item. You'll need to set the list-style on li, not on ul or a.

To differentiate between linked and non-linked list items, I recommend setting a class on the ul/ol, or if you have mixed linked and non-linked list items, on the list items themselves.

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

.linked li {
list-style-image: url('arrow.gif');
}

<ul><li>foo<li>bar</ul>

<ul class="linked"><li><a href="...">foopy</a><li><a href="...">noopy</a></ul>