Cross browser compatibility - Thoughts

Recently I accomplished a challenging opportunity to make IE6 legacy web application compatible for all modern browsers - Firefox, IE, Safari and Chrome.

Albeit, there were comprehensive rework on CSS, JavaScript, HTML, I wondered about quite a few facts.

• DOM Reserved key words: The variable  location is owned by window in all browsers except IE. You can use that as a local variable :( . Same as the case of few DOM functions such as add, remove etc. Better you should have proper namespaces for all the Java Script functions you write anywhere. That way all we don't accidentally override any of WINDOW variables or DOM functions. 
• FireFox >3.x does not allow controlling resize behavior of child windows. Noway to disable the resize of child window. 
• String prototype method String.trim is not yet available in IE. Use of regular expression s.replace(/^\s+|\s+$/g,"") to trim the string is recommended. 
• To provide hand over behavior with style, cursor:hand is IE specific. Use cursor:pointer
• The select box value can be set to empty only by setSelectedIndex = -1; directly settings the values as element.value="" does not work on FireFox 
• Setting the value for check box through DOM API does not trigger the onclick event registered with the checkbox; the event should be manually triggered 
• Accessing the parentElement is IE specific. Use parentNode instead. 
• To set a class to a element through DOM API, use element.className = "className" instead of element.setAttribute("class", "className");
• While using IFRAMEs in a page, you can not use cascading style with respect to the parent level. You need to create a new Style hierarchy with the IFRAME onload event. 
• To reset the window height and widths, following functions can be used to get the height and width of window. This is optimized across all browsers. 


getDocumentHeight = function(){
var D = document;
return Math.max(D.body.scrollHeight,D.documentElement.scrollHeight,
D.body.offsetHeight,D.documentElement.offsetHeight,
D.body.clientHeight,D.documentElement.clientHeight);
}

Similarly you can get the width by replacing all Height with Width in above function.