CSS padding to list items only applied in IE 10 - html

Question

I have a list of items I'm putting together to scroll across the screen in a ticker.
I have all the CSS working across all browsers except for one element, padding.
You can see in this fiddle the padding left of 12px only works in IE, not in any other browser.
I've tried messing with just about everything I can think of to get it to work in Chrome/Firefox/Safari to no avail.
Any ideas? Thanks.
http://jsfiddle.net/Gmvmc/3/
<div class="exchange-rates">
Exchange rates $ 1 USD:
<a href="http://finance.yahoo.com/currency-converter/" target="_blank">
<div id="scrollerWrapper">
<ul id="scroller">
<li id="USDJPY">TEST</li>
<li id="USDAUD">TEST</li>
<li id="USDEUR">TEST</li>
<li id="USDGBP">TEST</li>
<li id="USDCHF">TEST</li>
<li id="USDCAD">TEST</li>
<li id="USDSEK">TEST</li>
<li id="USDNOK">TEST</li>
</ul>
</div>
</a>
.exchange-rates
{
background:#eeeeff;
padding:10px 19px 10px 59px;
border:1px solid #222266;
color:#222266;
font-size:1.1em;
border-radius:9px;
margin:0 0 0 0;
}
#scrollerWrapper
{
height:25px;
overflow:hidden;
width:70%;
float:right;
}
#scroller
{
height:100%;
margin:0;
padding:0;
position:relative;
color:#222266;
}
#scroller li
{
float:left;
padding:0 0 0 12px;
list-style-position:inside;
}

Answer 1

Tom, I'm guessing what your really trying to achieve here is some control over the space between the bullet and the text of the LI. If so, your most consistent cross-browser solution would be something like this:
#scroller li
{
float:left;
padding:0 0 0 12px;
list-style-position:inside;
list-style: none;
}
#scroller li:before
{
content: "\2022";
margin-right: 10px;/* space between bullet and text */
}
Strongly recommend using the ISO value for the bullet rather than just a bullet in quotes.
More here: how to reduce default gap between bullet and text in <li>?.