TalkPHP - View Single Post

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?

04-03-2008, 02:24 PM	#1 (permalink)
benton The Contributor Join Date: Apr 2008 Posts: 78 Thanks: 0	Problem with aligning list 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?