Unnumbered list items - vertical positioning Options

[Brian Chandler]

Hi chap(esse)s!

I use my raibow icon thingy as a bullet on list items, to obtain a neat effect. That's the theory - in practice in about half the browsers I've looked in (IE5 and Op8 in particular) the vertical alignment of blob and text is totally wonky. The text seems to be way below the bullet. Now, I'm not fussed about precise pixel-fixing, and I don't want to specify an absolute text size; but I don't see how to start improving this, since every browser appears to have different ideas about vertical positioning.

For reference, here's a test page (largish, I'm afraid): about half way down, under "Assortment" you'll notice several puzzles have bits about "features" - glow-in-the-dark etc, with bullets. For the moment there's a red border around the <ul>, to clarify what's going on.

Any suggestions?

[Christian J]

For reference, here's a test page

Link?

You could add some transparent margin to the image file (i.e. not CSS margin). More top will "move" the visible parts downwards.

Or you could stop using list-style-images and instead specify the image as a background to the LI element (together with suitable CSS padding), which lets you position the BG-image.

[Brian Chandler]

For reference, here's a test page

Link?

Sorry: http://imaginatorium.org/shop/test.htm

You could add some transparent margin to the image file (i.e. not CSS margin). More top will "move" the visible parts downwards.

Or you could stop using list-style-images and instead specify the image as a background to the LI element (together with suitable CSS padding), which lets you position the BG-image.

(Isn't your last suggestion unethical, philosophically unsound, and probably illegal?)

But the problem is that if I just jiggle around with the position of the image, moving it down will then make it look funny in the browsers that *don't* seem to mess it up.

I suppose I'm wondering if there is any sort of specification of how things are supposed to be vertically aligned. In Opera, incidentally, when non-Japanese and Japanese text get mixed, the vertical positioning is a total mess - I've always guessed there isn't much one can do about that (unless you are printing exclusively with Opera, so there are some horrible hacks in some of my paperwork documents).

[Christian J]

(Isn't your last suggestion unethical, philosophically unsound, and probably illegal?)

No, why? IMHO it's much better than the official way.

I suppose I'm wondering if there is any sort of specification of how things are supposed to be vertically aligned.

Not that I know of. That, together with a lack of control of the positioning, makes list-style-images a bit inferior.

http://www.w3.org/TR/CSS21/generate.html#q10

[DeaPeaJay]

If the images are content though... they'll disappear with CSS disabled

I thought THAT was a big no no

This post has been edited by DeaPeaJay: Sep 26 2006, 08:25 AM

[Christian J]

If the images are content though... they'll disappear with CSS disabled

I thought THAT was a big no no

No, the images are just decoration, otherwise you should use the IMG element.

Structurally speaking it's just an unordered list, so if each item is indicated (in visual media) by a bullet or an image doesn't matter.

[Brian Chandler]

(Isn't your last suggestion unethical, philosophically unsound, and probably illegal?)

No, why? IMHO it's much better than the official way.

I suppose I'm wondering if there is any sort of specification of how things are supposed to be vertically aligned.

Not that I know of. That, together with a lack of control of the positioning, makes list-style-images a bit inferior.

http://www.w3.org/TR/CSS21/generate.html#q10

Thanks Christian - you persuaded me to do nothing for the time being. Using the image in a CSS background surely leaves similar problems anyway - I would want to align the image (whose height I know in pixels) with the middle of the text line (whose position I only know in ems), so can't compute anyway.

[Christian J]

I would want to align the image (whose height I know in pixels) with the middle of the text line (whose position I only know in ems), so can't compute anyway.

You should be able to use the "center left" background-position, then the BG image appears in the vertical middle of the LI no matter what:

CODE

li {
list-style: none;
background: #fff url(foo.jpg) no-repeat center left;
padding-left: 50px;
}

However if the LI content line-breaks the BG image will show up in the middle of the whole LI, not its first line.