Unnumbered list items - vertical positioning |
Unnumbered list items - vertical positioning |
Brian Chandler |
Sep 25 2006, 02:25 PM
Post
#1
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
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 |
Sep 25 2006, 03:07 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Sep 25 2006, 03:15 PM
Post
#3
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
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 |
Sep 25 2006, 03:31 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
(Isn't your last suggestion unethical, philosophically unsound, and probably illegal?) No, why? IMHO it's much better than the official way. QUOTE 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 |
Sep 26 2006, 08:24 AM
Post
#5
|
Advanced Member Group: Members Posts: 103 Joined: 21-September 06 From: East Tennessee - USA Member No.: 191 |
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 |
Sep 26 2006, 09:39 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Sep 28 2006, 10:04 AM
Post
#7
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
(Isn't your last suggestion unethical, philosophically unsound, and probably illegal?) No, why? IMHO it's much better than the official way. QUOTE 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 |
Sep 28 2006, 12:40 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. |
Lo-Fi Version | Time is now: 24th April 2024 - 03:44 AM |