Layout: Aligning bullets

started by Vladimir on Nov 14, 2004 — RSS Feed

Vladimir Vladimir
Posts: 53

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 Joe Gillespie
Posts: 528

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 Vladimir
Posts: 53

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 <li>, and <li> includes both the bullet AND the text.

Joe Gillespie Joe Gillespie
Posts: 528

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.

You must login to reply