Despite having a list-style-type: disc in my CSS, Firefox still shows my bullet points as diamonds. IE7 shows them correctly as discs.

Here's the page:
http://icdmeister.com/site/Codes/Blood/anemia.htm

What am I doing wrong here?

Andrew

try removing list-style-type:disc;

this is the default, and if no list style type is specified, then it will use a disc

Thanks for the reply and the suggestion, Gilligan. I tried this and it didn't change the appearance of the bullets.

This article talks about the different appearance of bullets in IE and FF http://webdesign.about.com/od/css/a/aa012907.htm (but interestingly, when I view the first example http://webdesign.about.com/od/exampl...s.htm#standard in FF the bullets look like discs not diamonds)

Another thing I found suggested designating the • • as the list style type so it would be consistent across browsers. This seems a bit cumbersome.

Any other thoughts?

Andrew

Okay, in your css. replace

list-style-type:disc;

with

list-style-image:url('http://z.about.com/d/webdesign/1/0/n/C/1/bullet_ie.gif');

Thanks for the suggestion. I've read that using an image for bullet points can slow page loading because of latency. Not sure how important this is. This article suggests using unicode characters in place of standard bullets to reduce this.
http://nadeausoftware.com/articles/2...mbolcharacters

I'd rather not slow my load time by using an image for a bullet (some of my pages have hundreds of bullets) nor gum up my code by adding the span tag to every <li> as the above article suggests for using unicode bullets.

I think I'll settle for the slightly different appearance in FF since there seems to be no solution that doesn't have a cost in one way or another.

Andrew

images for bullets are going to be tiny - less than 1k unless you're using something really fancy! and as you'll be referencing the same one (or same few) once the first is cached the rest will take no time to load. it's not a problem

http://validator.w3.org/check?uri=ht...Inline&group=0

You've got validation issues. Start there. Clean code often makes browsers do what you want.

Change your character encoding to UTF-8, too.

One of the two should get you where you want to go.

Thanks for the input. I realize that the size of an image for a bullet is likely trivial but I'm still going to avoid that fix. It feels like a patch and the problem isn't bad enough to warrant it.

I tried the suggestion to change the character encoding to UTF-8 (much easier than validating and cleaning up my code) but this didn't resolve the problem. In fact, I created a fresh page with minimal content (www.icdmeister.com/test.htm) which still shows the bullets as diamonds in FF.

Re: Validation. Clean code seems like a suggestion that's hard to argue with. I've just started learning CSS to get rid of tables (which has made things much cleaner although likely not properly validated). I looked at the suggestions for validating my code and it was pretty much all incomprehensible to me. I think tackling that is more than I can handle at this point.

Thanks for all the suggestions. I think I'm going to leave it as is for now (although I'm willing to try other quick fixes if anyone has any other suggestions).

Andrew

The other thing you can do, it you really want a circle, is to use a background image of a circle (whip off a 4 x 4 pixel one quickly in Photoshop). It's cross-browser compatible and it works every time.

I'd show you an example, but I have to apply it across the board on the site I'm working on.

Originally Posted by aschecht

Thanks for the input. I realize that the size of an image for a bullet is likely trivial but I'm still going to avoid that fix. It feels like a patch and the problem isn't bad enough to warrant it.

it's not a fix; it's not a patch: it's part of the css specifications, explicitly put there to achieve what you're after.

what's the problem?

man, just use an image and specify it in your style sheet!

there's no reason to be using background images or anything - do it as per css spec and get on with it

D - I think you've convinced me already
I'll give it a try - designating a tiny image as the bullet to achieve uniformity.

A.

Hmmm. I added the graphic bullet. That was easy. Thanks for your persistence.

A.

glad it worked