The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Unnumbered list items - vertical positioning
Brian Chandler
post Sep 25 2006, 02:25 PM
Post #1


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



tongue.gif sad.gif smile.gif huh.gif

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?



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 25 2006, 03:07 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,216
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Sep 25 2006, 09:25 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Sep 25 2006, 03:15 PM
Post #3


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



QUOTE(Christian J @ Sep 26 2006, 05:07 AM) *

QUOTE(Brian Chandler @ Sep 25 2006, 09:25 PM) *

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).

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 25 2006, 03:31 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,216
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Sep 25 2006, 10:15 PM) *

(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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DeaPeaJay
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 26 2006, 09:39 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,216
Joined: 10-August 06
Member No.: 7



QUOTE(DeaPeaJay @ Sep 26 2006, 03:24 PM) *

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. tongue.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Sep 28 2006, 10:04 AM
Post #7


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



QUOTE(Christian J @ Sep 26 2006, 05:31 AM) *

QUOTE(Brian Chandler @ Sep 25 2006, 10:15 PM) *

(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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 28 2006, 12:40 PM
Post #8


.
********

Group: WDG Moderators
Posts: 8,216
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Sep 28 2006, 05:04 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th September 2019 - 12:53 AM