Customised list

terra · August 15th, 2005, 05:16 PM

I'm trying to create a customised list with the list-style-image command,, substituting the bullets with my own images. The problem I have is that the image refuses to line up with the middle of the text and instead appears at the top of the line (above text) which makes it look odd.

Reading through other help files, this seems to be a known problem. My question: is there a command which will ensure that the bullet image lines up with the middle of the text?

The unordered list will need to accomodate five levels (indented) - in the code the first two levels are shown. Line Height has been added to give additional spacing between text.

The CSS code is:

li.first {
    list-style-image: url('images/level1.gif');
    line-height: 5em;
}

li.second {
    list-style-image: url('images/level2.gif');
    line-height: 3em;
}

The HTML code (abbreviated)is:
[list]
<li class="first">First level text goes here</li>
        [list]
            <li class="second">Second level text</li>
            <li class="second">Second level text</li>
        </ul>
<li class="first">First level text goes here</li>
</ul>

The not-so-great-looking result can be seen here:
http://www.wroxham.net/teststuff/tn5_sitestructure.html
with the first bullet (L1) clearly above the text, not at the same height.

If anybody knows the way around this, would be greatly appreciated! :)

richard.york · August 16th, 2005, 08:45 AM

Have you tried applying vertical-align: middle to the text?

Other than that, you can try to adjust the vertical alignment of the text via a specific length, experiment with line-height, use a background image in the <li> elements instead of list-style-image, or add some extra white space in the image used via list-style-image to manipulate where the image appears.

I've found that list-style-image isn't very consistent between platforms, the placement of the image, of course as you have already discovered, being the difficult part to control. In my own pages where I've needed this functionality, I ended up going with a background image positioned to the left, center with left padding equal to the size of the background image. That allows for more consistency and freedom with respect to placement.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

terra · August 16th, 2005, 11:45 AM

Hi Richard - many thanks for your reply!

I've tried various codes & come up with a working solution based on the following:

1. The main problem seemed to be the line-height command as it distorted the text/bullet alignment. I've removed the line-height and replaced with the margin command to achieve the desired spacing. Result: bullet a lot closer to the text :)

2. I've applied the vertical-align: middle command as you suggested and now the bullet lines up perfectly with text - sorted! :D

I did try the background image workaround but found that because I have up to 5 sub-levels, the indenting went all wonky and it got a bit complicated for what was meant to be a simple hierarchical list.

Main lesson I've learnt: don't use the line-height command when also using the list-style-image command as it will affect the bullet alignment quite badly. Instead I'll now use margin wich doesn't affect the image position.

Final CSS:

li.first {
    list-style-image: url('images/level1.gif');
    font-weight: bold;
    margin: 0em 0em 1em 1em;
    vertical-align: middle;
}

li.second {
    list-style-image: url('images/level2.gif');
    font-weight: normal;
    margin: 1em 0em 1em 1em;
    vertical-align: middle;
}

Result can be seen online at: http://www.wroxham.net/teststuff/tn5_sitestructure.html

Many thanks! edith

meow · August 31st, 2005, 12:19 AM

Just curious. I don't see that vertical-align does anything...and I don't think it should. The third level list items look the same and they don't have the vertical-align.

http://yupapa.com

terra · August 31st, 2005, 03:52 AM

Meow - you're right. Forgot that vertical-align only works with inline & cell elements, so it's useless within the LI element. Took the vertical-align out of the css and the test example looks exactly the same.

Thanks for finding the error! Terra

richard.york · August 31st, 2005, 07:04 AM

Yeah, you're right. From some reason I was thinking the vertical-align should work there though. In this context it ought to work like text-align. But, after referencing the specification, and MY OWN BOOK, it seems I'm wrong ;). It only applies to inline or table cell elements.

You can do something like this though.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type='text/css'>
            span {
                vertical-align: -10px;
            }
        </style>    
    </head>
    <body>
        [list]
            <li><span>test</span></li>
            <li><span>test</span></li>
        </ul>
    </body>
</html>

Sorry for the misinformation.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

meow · September 1st, 2005, 01:28 PM

Darn! I thought you two had discovered a new juicy glitch. The dissapointment...

:D

http://yupapa.com