browser compatiablity

I have been working all week long to get my A2D web site working correctly in Safari (Mac), Firefox, and IE 7. I finally achieved it, only to find out A2D does not work in the latest Opera. The good news is that it is not due to the way I designed A2D or coded A2D, but Opera reports errors in latest prototype and rico libraries I am using. I did not have time to revert to an older version of Opera or to debug these libraries and fix the code, so for now you cannot click on the toolbar buttons in Opera. This is the error in the Opera Error Console:

message: Statement on line 1194: Type mismatch (usually a non-object value used where an object is required)
  Line 1194 of linked script http://www.attentive2design.com/js/rico.js
      Line 78 of linked script http://www.attentive2design.com/js/prototype.js

Most of the fight involved using text shadow for the "Attentive 2 Design" text. I thought I had it working, but the CSS code is very dependent on certain CSS properties. If you set a "background-color" then the shadowing does not work in IE.

The second largest battle was on the width and height of the browser window. I needed this in order to size the content pane on the right hand side of the A2D web site to fill the browser window. I found a web site with working Javascript code to determine the browser size at:

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
  }
  return {width: myWidth, height: myHeight};

When I had all of this working, I noticed that the active buttons, which I configure to look like horizontal tabs did not look right on Safari as the active buttons were below the content pane. This started happening when I set the "overflow: auto" CSS style on the content pane. The only way I could figure out to fix this problem was to try the following:

Position.relativize(button);
button.style.zIndex = 100;

Then I found out that this code caused Javascript errors in IE, so I had to surround the block with a Safari check:

if (navigator.appVersion.match(/Konqueror|Safari|KHTML/))