CSS vertically centering images for bullets on lists 2

[TheInsider]

Hello,

I have used cascading style sheets to replace the standard list item <LI> bullets with images. The bullet image is quite small.

I am using IE 6 and Netscape 7 to test my pages. I notice that IE vertically aligns the bullet image to the top of the text and Netscape vertically aligns the image to the bottom of the text.

I would like to either center the bullet vertically in both browsers, or at least get one browser to conform to the other, i.e. they both align top or both align bottom. I have not seen anyone address this issue in all of my searches on the web thus far.

Thanks,

TheInsider

 

[TheInsider]

anyone?

 

[dkdude]

TheInsider,

Try this -it works for me:

[tt]li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 18px;
padding-left: 20;
}[/tt]

Where

background-position : horiz-displacement vert-displacement

and

padding-left : space from LI's left side to it's contents.

Good luck §;O)


Jakob

 

[cian]

To control lists it is very important to specify the margin and padding. margin for IE&Opera, padding for Nutscrape & Moz, if I remember correctly.
This may not solve the problem (Jakob has posted a solution as u see) but should help overall as lists can be wild little buggers.




- É -

http://www.ssi-developer.net/

 

[TheInsider]

Thank you both, Jacob and cian. I'll give it a try and reply to this thread with my results.

TheInsider

 

[TheInsider]

Again, thank you both! Jakob's work-around method was successful. I did have to add:

list-style-type: none;

to the <li> style definition, in order to hide the default bullets from appearing as well.



TheInsider