bullets showing in other than IE browsers

[AnkaS]

Hello,
I have the left nav built as a list with no bullets, i.e.

list-style-type: none;
background: url('/files/images/BulletRedArrow.jpg') no-repeat left top;

I am using IE and my left nav looks beautiful, no bullets, but the images. When you use any other browser or a tablet, the bullets are visible in addition to the images (looks really bad). Does anyone know how to solve this problem?

Thanks, Anka

[penders]

I think what you have is sufficient. Do you have any errors in your CSS (ie. does it validate?) that might prevent it from working as it should?

[AnkaS]

I don't have any errors. I always cross check my websites on different browsers especially when the page is CSS driven and usually I am able to fix any problems. This time, I really don't know what to do. I am thinking about removing the list entirely...

[penders]

As mentioned, what you have would normally be sufficient. However, do you have any conflicting styles, perhaps with a higher specificity, that could be overriding this style rule?

If you examine the element in firebug for instance, you should be able to see what style rule is applying the bullet.

[AnkaS]

Ok, I will do it and let you know of the results. Thanks a lot.

[lucy24]

Where do you give the list-style-type? Under ul or under li? How about replacing "background" with a straight url? My equivalent (picking a css at random) has

li {list-style: disc inside url("images/smalltape.png");}

The "disc" (or bullet or whatever) will only display if the image can't be found.

[penders]

Where do you give the list-style-type? Under ul or under li?

I was also wondering this, however, since the background-image appears to display OK I had assumed it was on the li. But it did make me wonder whether it is actually correct to set it on the ul? It does appear to work OK (in all browsers I've tried) if list-style-type is set on the ul and not the li, but the spec does state that it applies to "elements with 'display: list-item'". However, the value is inherited, so if set on the ul, I assume the li inherits this value - is that correct?

[AnkaS]

I changed the code to

li {list-style: disc inside url("images/smalltape.png");}

but it didn't help. It's still the same. I would like to test it on Firebug, but I have to admit I don't know how to download Firebug and how to use it.
Also, the list-style-type is under li and under ul. Believe me, I tried almost all the possibilities. I am more opting toward a theory that I have a code somewhere overriding the list-style-type in the left nav...

[penders]

It's still the same.

It can't be quite the same... since you've removed the code for the background-image?

As lucy24 mentions, with the new code:

li {list-style: disc inside url("images/smalltape.png");}

The list-style-type (disc) and list-style-image (url) are mutually exclusive. Either one or the other are displayed, never both. The list-style-image is not the same as the background-image.

[AnkaS]

This is my code, perhaps I did something wrong...

ul#links {
font-family:Arial,serif;
font-size: 12px;
display: block;
margin-left: 4;
list-style-type:none;
text-align: left;
line-height: 10px;
}

#links li a{
list-style: disc inside url("/files/images/BulletRedArrow.jpg");
padding-left: .8em;
}

#links li a:hover{
list-style:none;
list-style-type:none;
background:url('/files/images/BulletBlkArrow.jpg') no-repeat left top;
background-position: 0 .1em;
padding-left: .8em;
}
You can see under #links li a:hover I have the old code and under #links li a, the new code. In the IE browser, it looks exactly the same and in Chrome the bullets show.

[penders]

#links li a {  
  list-style: disc inside url("/files/images/BulletRedArrow.jpg");

You can't apply list-style to an anchor. list-style's relate only to list-item's (li's).

Although this doesn't explain why the bullets show in other browsers when you have list-style-type:none; set on the parent ul. Unless you have an overriding style elsewhere in your stylesheet?

[penders]

In the IE browser, it looks exactly the same and in Chrome the bullets show.

Despite the errors in the CSS, as mentioned above, the code you have posted works the same in IE8, Chrome and Firefox - the bullet is hidden in all browsers. So it would seem there is code elsewhere that is overriding your list-style-type?!

[AnkaS]

Can you tell me how to download and use the Firebug?

[penders]

Firebug is Firefox Add-On. So, using Firefox, navigate to the firebug page at mozilla.org....
[addons.mozilla.org...]

And click "Add to Firefox", and follow the instructions.

There are similar tools built in to Google Chrome (right mouse and select "Inspect Element" to access the debugger). And in Opera there is Opera Dragonfly (again, right mouse and select "Inspect Element"). IE8 has the Developer Tools (F12).