Jump to content

List Items Not Aligning Properly In Ff...


mboehler3
 Share

Recommended Posts

Hi, I have a simple unordered list with my own image for the bullets. In IE, it looks like this:ie.gifBut in FF, it looks distorted:ff.gifMy 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?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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]-->

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...