Compatibility issues with IE8 vs Chrome, Safari, and IE9

This could be a challenging one!

I'm very proficient in AJAX and JavaScript even writing OOP JS apps. So you can imagine my frustration when I build a page that works flawlessly in IE7, 8, Opera, FF4. I mean, unless the world has changed, IE and FF were all you ever needed, really, for compatibility testing.... right??

WRONG (apparently)

I have a complicated js app that works great, as I said. But if fails in Chrome and Safari. The scripting is loaded with dynamic DOM creation and attribute manipulation and I think I've isolated the issue within one set of scripting... below.

Can any of you geniouses recognize any JS here that may have issues with Chrome and Safari? I think I've nailed it down to .style calls (think CSS) that break the presentation. BTW, it ends up being the SAME EXACT problem when I test with IE9... this may be a clue.

I've searched far and wide on the web and either I'm missing the correct key words to search for or... whatever :)

    for(var i=0;i<list.length;i++){
    SupportContent.hrefArray[SupportContent.hrefArray.length] = list[i];
    if(i == list.length-1)SupportContent.bookMarkListing();
    ChangeDOM.addChildren({'elType':'div','id':'title~'+list[i]},this.displaySupport);
        var thisTitle = document.getElementById('title~'+list[i]);
        thisTitle.style.paddingTop = '15px';
        thisTitle.onclick = function(){SupportContent.manageLineOpenClose('arrow~'+this.id.split('~',2)[1]+'~c')};
        ChangeDOM.addChildren({'elType':'span','id':'arrowCont~'+list[i]},thisTitle);
            var thisArrow = document.getElementById('arrowCont~'+list[i]);
            thisArrow.style.float = 'left';
            thisArrow.style.width = '30px';
            ChangeDOM.addChildren({'elType':'img','id':'arrow~'+list[i]+'~c','src':'/images/support/arrowClose.jpg','border':'0'},thisArrow);
    ChangeDOM.addChildren({'elType':'div', 'id':'tabs~'+list[i]},this.displaySupport);//tabs container
        var tabContainer = document.getElementById('tabs~'+list[i]);
        tabContainer.style.borderBottom = '5px #35383c solid';
        tabContainer.style.paddingTop = '5px';
        tabContainer.style.backgroundColor = '#151515';
        tabContainer.style.marginTop = '10px';
    ChangeDOM.addChildren({'elType':'div', 'id':'content~'+list[i]},this.displaySupport);//contentContainer
        var contentContainer = document.getElementById('content~'+list[i]);
        contentContainer.style.display = 'none';
        contentContainer.style.overflow = 'hidden';
    for(var j=1;j<5;j++){
        this.buildTab(j,tabNames[j],list[i]);
        this.setContent(j,list[i],contentContainer);
    };

BTW... the ChangeDOM class is a custom class I've created to manipulate the DOM. This code is below...

//custom utility to change the DOM
    //adds children to given node 
    //"keys" format  - {"['elType'] or [element attribute] or     ['text']":"[element type] or [attribute property] or [actual text],"":""...}
function ChangeDOM(){}
ChangeDOM.prototype.addChildren = function(keys,parentNodeObject){
//alert(parentNodeObject.id);
var elName = '';
if (keys["elType"] == 'input'){ 
    if (keys["type"] == 'radio'){
        try{
            elName = document.createElement('<input type="radio" name="fldID" />');  
        }catch(err){  
            elName = document.createElement('input'); 
        }
        try{elName.setAttribute('type','radio');}catch(err){elName.type = 'radio'};
        elName.setAttribute('name','fldID'); 
    }
}
if(elName == '')elName=document.createElement(keys["elType"]);
for(var key in keys){
    if(key != "elType"){
        switch(key){
            case('type'):   if (keys[key] == 'radio')break;
                            elName.type = keys[key];
                            break;
            case('name'):   elName.name = keys[key];
                            break;
            case('value'):  elName.value = keys[key];
          开发者_开发百科                  break;
            case('id'):     elName.id = keys[key];
                            break;
            case('href'):   elName.href = keys[key];
                            break;
            default:        if(key !='text')elName.setAttribute(key,keys[key]);
                            break;
        }
    }
}
parentNodeObject.appendChild(elName);
if(keys['text']){
    if(keys["elType"] == "input"){
        this.addChildren({'text':keys['text']},parentNodeObject);
    }else{
        var txt=document.createTextNode(keys[key]);
        elName.appendChild(txt);
    }
}
return;
}
    //clears all children from given node
ChangeDOM.prototype.clearChildren = function(parentNodeObject){
        if(parentNodeObject.childNodes){
            var nodechildren = new Array();
            nodechildren = parentNodeObject.childNodes;
            if(nodechildren.length>0)for(i=0;nodechildren.length;i++)parentNodeObject.removeChild(parentNodeObject.lastChild);
        }
        return;
    }
    //updates text for a given node
ChangeDOM.prototype.updateText = function(newText,parentNodeObject){
        this.clearChildren(parentNodeObject);
        this.addChildren({'text':newText},parentNodeObject);
    }

I found the solution. It was not the tilde or bad .js. It was what I thought... css. Once I started specifying the widths of the boxes my scripting was building it all came together. Other browsers, it seems, was assuming widths.

Thanks everyone for your input.

On another note, though I do like JQuery and am using it from time to time, I like the raw power of JS better. And even with using JQuery, I would have had to still specify widths to get it right.