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/))


IE UL width fix

The only way I could get the <ul> custom lists to look right within IE 7 was to use the following Javascript code to adjust the widths os the <ul>:


windowWidth = $('content').clientWidth;
$A(document.getElementsByClassName(name)).each(function(element,index) {
// fix only for IE
if (Element.getStyle(element,'padding-left') != null) {
element.style.width = windowWidth - parseInt(Element.getStyle(elemen
t,'padding-left')) - parseInt(Element.getStyle(element,'padding-right')) - parse
Int(Element.getStyle(element,'margin-left')) - parseInt(Element.getStyle(element
,'margin-right'));
}
});


button widths in IE

Then there is a problem with the button widths in IE. I thought it may be fixed in IE 7, but alas it is still there. Thankgoodness there is a work around. To fix the navigation buttons on the left hand side of the Attentive 2 Design web site I set the button style widths to the same as the width of the images. The navigation bar is created in Javascript so this is done in one place. I could have just as easily added a className and used CSS to control the width as well.