Snygg punktlista med css

Hej
Jag försöker få till en snygg punktlista i html/css.
Med snygg menar jag att första raden ska ha ett hängande indrag på -10px (eller valfritt) så att textraderna (jag har flera rader under varje punkt) blir justerade i vänsterkant och punkten "hänger ut" 10 px. Dvs, som en punktlista brukar se ut i t.ex. Word.

Följande kod ser utmärkt ut i Dreamweaver, men blir inte rätt i vare sig IE6, Firefox eller Opera. Den ser annorlunda ut i alla tre.

#content ul {
padding: 10px 30px 10px 15px;
line-height: 110%;
}
#content li {
padding-bottom: 8px;
text-indent: -10px;
}

Någon som stött på problemet och kanske löst det?
Ännu en fråga - hur styr jag avståndet mellan punkten och texten på första raden?

/Bengt

Så här skulle jag ha gjort - om jag nu fattar hur du vill ha det... :)

[B]CSS:[/B]
#content { padding-left: 15px; }
#content ul, li { margin: 0; padding: 0; line-height: 110%; }
#content ul { padding-top: 10px; padding-bottom: 10px; }
#content li { padding-bottom: 8px; }

[B]HTML:[/B]
<div  id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...</p>
<ul>
<li>Bla bla bla...</li>
<li>Bla bla bla...</li>
<li>Bla bla bla...</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...</p>
</div>

Blir lite osäker på vad du vill ha, för följande kod (som är nästan identisk med din) funkar utmärkt i Firefox och Safari:

[b]CSS:[/b]
#content { width: 160px;} //bara för att tvinga texten att radbryta
#content ul { 
      padding: 10px 30px 10px 15px; 
      line-height: 110%;}
#content li { padding-bottom: 8px;} 

[b]XHTML:[/b]
<div id="content">
	<p>Lite vanlig text här</p>
	<ul>
		<li>Första punkten och en del text</li>
		<li>Andra punkten</li>
	</ul>
</div>

Det var Dreamweaver som lurade mig att börja trixa med text-indent. När jag tog bort den, funkade det som det skulle.
Tack för visat intresse och tankemödan.

/Bengt