<ul> bullet list with image as bullet, line up start of <li>

[antonyx]

hi, i have a bullet list. i want to have the text in the <li> go on two lines without it distorting..

here is what it currently looks like..

http://www.londonheathrowcars.com/bulletprob1.jpg

i want it took look like this.

http://www.londonheathrowcars.com/bulletprob2.jpg


can this be down within the actual bullet list itself?

thanks

ul.bullet {
 list-style-type: none;
 padding-left:0;
 margin-left:20px;
 margin-bottom:0px;
 margin-top:30px;

}

li.bulletlist {
 background: url(http://www.londonheathrowcars.com/arrowbullet.png) left center no-repeat;
 color:#666666;
 font-family:arial;
 font-size:9pt;
 margin-bottom:8px;
 margin-right:20px;
}

<ul class="bullet">
			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Heathrow Based</b> - Pre-book or call on arrival, we are based at Heathrow (LHR).</li>
			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Fixed Prices</b> - Set fares per vehicle from A to B, no taxi meters, no hidden charges.</li>
			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Flight Time Monitoring</b> - We monitor your flight, guaranteed no waiting time costs.</li>

			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Nationwide Service</b> - We also transfer between London and any UK destination.</li>
		</ul>

[Dan Schulz]

Get rid of the classes and the non-breaking space entities in your list items. Then set the bullet as a background image on the list item, set its position to left top and finally give the list items a left padding equal to the width of the background image, plus some extra space to accomodate the space between the background image and the text.

[antonyx]

hi, i have done the above and there is still a slight problem.

here is the code and a screen shot.. i want the top of the text to line up with the top of the bullet point..

what am i doing wrong?

<ul class="bullet">

			<li class="bulletlist"><font style="color:#393b44;"><b>Heathrow Based</b></font> Pre-book or call on arrival, we are based at London Heathrow Airport (LHR).</li>
			<li class="bulletlist"><font style="color:#393b44;"><b>Fixed Prices</b></font> Set fares per vehicle from A to B, no taxi meters, no hidden charges.</li>
			<li class="bulletlist"><font style="color:#393b44;"><b>Flight Time Monitoring</b></font> We monitor your flight free of charge, guaranteed no waiting time costs.</li>
			<li class="bulletlist"><font style="color:#393b44;"><b>Nationwide Service</b></font> We transfer between London and any destination in the UK.</li>

		</ul>

ul.bullet {
 list-style-type: none;
 padding-left:0;
 margin-left:15px;
  margin-right:15px;
 margin-bottom:0px;
 margin-top:24px;
}

li.bulletlist {
 color:#666666;
 font-family:arial;
 font-size:9pt;
background: url(car.gif) left top no-repeat;
padding-top:0px;
padding-left:25px;
padding-bottom:10px;
}

you can see it not lining up here:

http://londonheathrowcars.com/gg/untitled.jpg

[Erik J]

You can adjust the background bullet top position here (red 5px)

li.bulletlist { 
  color:#666666; 
  font-family:arial; 
  font-size:9pt; 
  background: url(car.gif) 0 5px no-repeat; 
  padding-top:0px; 
  padding-left:25px; 
  padding-bottom:10px; 
}

[antonyx]

thank you sir, that has done the trick