Problem with aligning list

benton · 04-03-2008, 02:24 PM

I'm trying to display a list that uses my own image for the button and where the list items are on two lines like

HTML Code:

 Line 1
 text

 Line 2
 text

It all looks fine in FireFox but in IE, the second line is flushed left and the space between the button image and the text is too great. The text appears as

HTML Code:

 Line 1
text

 Line 2
text

The css I am using is

HTML Code:

ul { 
 list-style-image: url('images/bullet.jpg');
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: normal;
 padding-left: 20px;
 margin-left: 0;
 margin-top: .5em;
}
li {
  margin-left: 0;
  margin-right: 0px;
  margin-top: .5em;
  margin-bottom: .5em;
  font-weight: bold;
  border: solid 1 px;
}

and the list code is

PHP Code:


			
<ul>

 <li><a href="somedomain.com">Line 1<br>text</a></li>

 <li><a href="somedomain.com">Line 2<br>text</a></li>

</ul>

Would someone please point out what I am doing wrong?