I can't center the bullets of a list in Safari

[Coffee-Drinker]

Hi, everyone,
I am trying to center a bulleted list and a list with PNGs as bullets using XHTML 1.0 and CSS 2, everything coded by hand. In Firefox 3, IE 7 and Opera 9 they render fine. W3C says, all is correct. Still they don't center in Safari, well that is the list text centers fine, but the bullets / PNGs stay on the left. I already searched lots of forums, looked in selfhtml, and tried several things, I found on the WWW. So far I couldn't achieve any success. Could someone please help me on this matter? I put a link to the problematic sites below and added the corresponding Safari screenshot (sorry that I could not add both sides, but there is not enough space), xhtml and css files as pdf attachements.
Many thanks for any help on this and best regards.

Coffee-Drinker

http://www.duofue.ch/de/repertoire.html
http://www.duofue.ch/de/beispiele.html

 

[nuxx]

Adding list-style-position: inside; to the .note li selector should fix the problem as the default value is outside. If that throws it off-center a bit you could also add a negative margin-left declaration.

.note li {
    list-style-image: url(pics/note.png);
    [B]list-style-position: inside;[/B]
    vertical-align: middle;
    padding-top: 10px;
    padding-left: 20px;
    [B]margin-left: -10px;[/B]
}

A bit of a hack, but........

 

[Coffee-Drinker]

Dear nuxx,
Thank you very much for your kind reply. I will try it and post the result.
Thanks again.

Coffee-Drinker

 

[nuxx]

You're welcome. Hope it does the trick.

 

[Coffee-Drinker]

At last I could test your proposals. Adding "list-style-position: inside;" alone to the two classes did the trick. Thank you very much. Below is the CSS code with the important bits highlighted, just in case others experience the same issue.

.liste li {
	margin-top: 20px;
	margin-left: 240px;
	line-height: 2em;
	[B]list-style-position: inside;[/B]
}

.note li {
	list-style-image: url(pics/note.png);
	vertical-align: middle;
	[B]list-style-position: inside;[/B]
	padding-top: 10px;
	padding-left: 20px;
}

Thanks again for your great help.

Coffee-Drinker