List-Style / Height issue

Hi Guys,

I've created a new bullet of an unordered list and the image is 35px high.

How do I get the text to align in the middle (height wise)?

This is what I have used:-

Code:

---

#usp {
        list-style-image:url(images/pill35.gif);
        line-height: 35px;
        vertical-align: middle;
}

---

Needless to say it doesn't work.

The other thing is :- should I really be going there with fixing line height? What happens if an user enlarges the font for accessibility, will it break? Should I really avoid?

Thanks in advance.

35 pixels is pretty high for a bullet. In my experience the graphics need only be about 10px by 10px, with the bullet somewhere in there, you can move it about slightly until it lines up nicely.

I think you are approaching this incorrectly. You need to change the code for your list items. If you were to put it on your #usp div as above, you'll need something like this...

#usp li{
list-style-image:url(images/pill35.gif);
padding: 10px 0px;
}

That would replace the bullet with your customised one, then give each item in the list padding of 10px above and below so that you can get the spacing you want. Obviously you can change this to whatever looks best.

Find out more here...

http://css.maxdesign.com.au/listamatic/

Hi,

I've found it almost impossible to line up list images in the various browsers and usually resort to putting a background image in the list and adding some left padding to clear the image.

The advantage of this method is that you can set the background position of the image exactly and not rely on the browsers default.

Some info in this thread:

http://www.sitepoint.com/forums/show...ght=list+image

Quote:

---

The other thing is :- should I really be going there with fixing line height? What happens if an user enlarges the font for accessibility, will it break? Should I really avoid?

---

Well I assume you could set the line height in ems to be the same as the height in ems as long as the font is ems and they will all expand together.

However the easiest way is just to try it out and see :) Remember that ie will not alter text sizes from the browser controls if they are in pixels.

Paul

Thanks for the info.

I agree a bullet of 35px is large - in the process of convincing others now ;)

I like the idea of using a background image too.

Thanks again.