Bullet point images - Problem with text alignment

[Andy K]

Has anyone encountered a problem with text alignment when using images for bullet list-style-image?

As shown in the image below, the text is aligned on the base. I have text-align set to middle which corrected to problem in IE (suprisingly) But in FF and Opera the problem remained.


I have all the padding and margins set to 0 and even adjusting these does very little.

Any suggestions for the best way to approach using image bullets please

[D3mon]

tried setting the text (or bullet image) to vertical-align: middle?

[JohnMitch]

Is the bullet the same pixel size as the text? This can offset it as well I know in FF.

[Smokie]

add 3 pixels of white space to the top of the image.

[Andy K]

Hi

The vertical-align is set to middle but only corrected it in IE.

Tried putting some white space at the top but the text stayed along the base.

I think the best idea is reducing the size of the bullet image, but the image quality and size looks rubbish.

CSS is great but I cant help thinking customising image bullet points is amaturish

[Rob]

Hi Andy, one way round this problem is to use the image as the background which you can force the positioning of...

Something like this:-
background: transparent url(images/bullet.gif) no-repeat 5px 4px;

Obviously play with the px values until you are happy. oh, and set the list-style-type to none.

[Andy K]

Hi Rob

That seams to be the best solution. Thanks