Aligning bullets | WPDFD.com Forums

Vladimir said:

11/14/04, 319 42 2004 2004:%i:1100421775 03:42:55

Hi,

How do you make sure that bullets and their text line up?

In CSS, I've specified


list-style-image: url(bullet.gif);
      list-style-position: outside;
      list-style-type: none;
      vertical-align: middle;
        line-height: 18px;

I tried adjusting the vertical-align with all sorts of values "middle" "baseline" "top", etc. but still had some disparities across browsers.

Thanks

Joe Gillespie said:

11/14/04, 319 49 2004 2004:%i:1100425743 04:49:03

Vladimir said:

How do you make sure that bullets and their text line up?

Virtually impossible. You will get it to work in one browser with a bit of fiddling but it won't work in others or if the text is resized by the user. If alignment matters so much, either make the bullet and text as GIFs and provide alts or spoof the visual look of a list with regular gifs, paragraphs and indents. It depends on how semantically correct you want to be.

Vladimir said:

11/14/04, 319 11 2004 2004:%i:1100470300 17:11:40

Thanks. I think my tests have already proved your point. For some reason, on my IE 6 and Opera 7.5, they line up, but not in Firefox 1.0. My friend tested it out on his IE 6 but he said it didn't line up. >

Is there some kind of fix for this in CSS3? Perhaps vertical-align shouldn't be used since it's applied to

, and

includes both the bullet AND the text.

Joe Gillespie said:

11/15/04, 320 36 2004 2004:%i:1100507784 03:36:24

I remember reading something about certain browsers (IE possibly) that apply line-height to images as well as text, so that adds a few pixels to the image height in some cases and not others. This leaves an unexplained gap between an image and the bottom of a table or div. Might affect lists too. Experiment.