title: use javascript to change <li> style
body: <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>