use javascript to change <li> style
<p>I have defined styles for <code>&lt;li&gt;</code></p>

<pre><code>#mainNav{clear:both;background-image: url(../images/bg_menu.jpg);width:975px;height:43px;color:#fff;margin-top:-25px;}
#mainNav ul{list-style: none;padding: 0;margin: 0;}
#mainNav ul li{line-height:43px;float:left;background-image: url(../images/bg_menu.jpg);font-size:15px;font-weight:normal;text-align:center;cursor:default;padding:0px 15px;}
#mainNav ul li:hover{background:#332a03;color:#f7df84;}
&lt;div id="mainNav"&gt;
    &lt;ul&gt;
        &lt;li&gt;Home&lt;/li&gt;
        &lt;li&gt;Training and Workshops&lt;/li&gt;
        &lt;li&gt;Community Consultations&lt;/li&gt;
        &lt;li&gt;Community Surveys&lt;/li&gt;
        &lt;li&gt;Program and Facility Assesments&lt;/li&gt;
        &lt;li&gt;Reports&lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>

<p>I now want to go back and change the padding for the <code>&lt;li&gt;</code> to '0px 14px' because for some reason it doesn't render right only on Firefox on Mac. So I have this script so far...</p>

<pre><code>var browser = "other";
var OpSys = "other";
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    browser = "Firefox";
}
if (navigator.userAgent.indexOf('Win') != -1) {
    OpSys = "Macintosh";
}
// if its a Mac and Firefox, then change the padding
if (OpSys == "Macintosh" &amp;&amp; browser == "Firefox") {
    // how do I change the padding for each &lt;li&gt; ?
}
</code></pre>
