When text wraps, bullet image on unordered list does not align correctly on IE 6.

[BUTA]

Hello, everyone.
I've searching a solution for my problem, but I could not find anything in this forum. Please forgive me if there's already a similar thread out there.

My question is what's the best way to create vertical unordered list with custom bullet graphic to avoid following two problems on IE 6.

1. As text wraps, bullet graphic apts to align vertically on the center of two lines if the method ( http://css.maxdesign.com.au/listamatic/vertical05.htm ) is used.

2. Bullet graphic slightly aligns off the the center if another method (http://catcode.com/csstips/graphic_list.html) is used.

I want my bullet graphic to align at the center of the first line of each text as text wraps. Neither method works perfectly.

Is there another way to make bullet graphic align center as text wraps??

Thanks for help.

[Paul O'B]

Hi,

The first method will allow you to do exactly what you want. You just have to adjust the top position to exactly match the size of the text in the first line.


e.g.

	background-position: 0 .2em;

The second number is the vertical position and it will not center vertically if you specify a specific dimension. It will only centre if you use 50% (or the keyword center). All you need to is set the dimension that matches your text

[BUTA]

Thank you, Paul!!
I see, I did not know the vertical position at 50% or center causes a big difference. I don't think my CSS mastery book mentions about such pitfall.

Anyhow, I'll try to set it to a specific dimension.
Thanks!

[Paul O'B]

I see, I did not know the vertical position at 50% or center causes a big difference.

Yes if the list wraps then the height of the element increases and the background image at 50% will move down to the centre of the two lines. If you just set the top position at 5px (or whatever is appropriate) then it wouldn't move down when the text wraps because it will always stay at 5px from the top.