css list-style-image positioning fix
Saturday, June 7th, 2008I found that the location of my bulletlist image varied between browsers and went googling. The only solution I could find was terrible (they were setting the list-style-type: none; and then adding a background image to the li ) This method makes no sense as far as css standards go and requires more work, which got me thinking… what are the actual differences between the browsers?
Well, it turns out that where the image loads relative to the list item is based on the line height. Let’s say your line height is 30px and your image you are trying to load for the bulletpoint is half that. Internet Explorer and Opera will attach the image to the top of the line. This is why your image appears to be shifted up. Firefox and Safari will attach the image to the bottom of the line.
This means if we add whitespace in photoshop to the top of our bulletlist image it will cause it to shift down in IE and Opera, and as long as the image doesn’t exceed the line height it should remain uneffected in Firefox and Safari.
Will you ever get the image placement to be exactly the same in all four browsers? Probably not, but you will be able to get to the point where it looks acceptable in every browser.
I hope this helps someone out. It sure saved me a lot of work on one of my client’s site.
—————-
now playing: Deep Dish – Flashdance
