use javascript to change <li> style

Question

I have defined styles for <li>

#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;}
<div id="mainNav">
    <ul>
        <li>Home</li>
        <li>Training and Workshops</li>
        <li>Community Consultations</li>
        <li>Community Surveys</li>
        <li>Program and Facility Assesments</li>
        <li>Reports</li>
    </ul>
 </div>

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

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" && browser == "Firefox") {
    // how do I change the padding for each <li> ?
}

Answer 1

Using jQuery:

jQuery("div#mainNav li").each(function() {
   var $li = jQuery(this);
   $li.css("padding", "0px 14px 0px 0px");       
});

Without jQuery:

var liArr = document.getElementsByTagName("LI");

for(var i = 0; i < liArr.length; i++) {
    var parent = liArr[i].parentNode;
    var grandParent = parent.parentNode;

    if(grandParent != null && grandParent.id == "mainNav") {
       liArr[i].style.padding = "0px 14px 0px 0px";
    }        
}