List Items Not Aligning Properly In Ff...

[mboehler3]

Hi, I have a simple unordered list with my own image for the bullets. In IE, it looks like this:But in FF, it looks distorted:My CSS is very simple:

ul.silverArrow {list-style-image: url('/images/960/global/silverListArrow.gif'); vertical-align:top; line-height:17px;}ul.silverArrow li {margin-bottom:20px; vertical-align:top;}

What is the problem here?

[Ingolme]

Hmm, it seems that Firefox puts the list marker on the first line of the text, and it aligns the image to the bottom of the line height.I don't think you can do much, really.

[jlhaslip]

reduce the image size might help

[dsonesuk]

as most browsers seem to follow the image position as firefox, try inserting text in span and use positioning, but you will require conditional option for IE.<style type="text/css">ul.silverArrow {list-style-image: url('silverListArrow.gif');}ul.silverArrow li {margin-bottom:20px; vertical-align:top;}ul.silverArrow li span{ position:relative; top:-14px; padding-left:8px;}</style><!--[if IE]><style type="text/css">ul.silverArrow li span{ top:0;}</style><![endif]--><ul class="silverArrow"><li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></li><li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></li><li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></li><li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></li></ul>

[dsonesuk]

another option:<style type="text/css">ul.silverArrow {list-style-image: url('silverListArrow.gif');}ul.silverArrow li {margin-bottom:20px; vertical-align:top;}ul.silverArrow li span{ padding-left:8px; line-height: 18px; display:inline-block;}</style><!--[if IE]><style type="text/css">ul.silverArrow {margin-top:20px;}</style><![endif]-->

[mboehler3]

another option:<style type="text/css">ul.silverArrow {list-style-image: url('silverListArrow.gif');}ul.silverArrow li {margin-bottom:20px; vertical-align:top;}ul.silverArrow li span{ padding-left:8px; line-height: 18px; display:inline-block;}</style><!--[if IE]><style type="text/css">ul.silverArrow {margin-top:20px;}</style><![endif]-->

Thanks, this code worked. I wouldn't have thought of using <span>... thanks a lot for your help.