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


UCD vs. Activity Modelling

I have been reading about Activity Modelling in contrast to User Centered Design:

Donald Norman's Activity Modelling

The problem is that I am comfortable with UCD so I will have to digest on this a bit before seeing if it can help me.

Swamiji's blog

I helped create a blog for a very good friend, who I was with in India recently:

http://samvaddialogueoflife.blogspot.com/

blog on India

When I was looking for photos of India of the same places I went, I found one of the nicest blogs I have read. The photos are excellent and give you a great feel for the diversity of life in India:

Destination India

India photos

There are many ways to post photos on the internet, but an easy way to organize photos on your PC and then publish to your web site is to use JAlbum. This has been updated recently and is now even easier to use. Yes, I have a Mac laptop and iPhoto exists, but JAlbum works on just about any platform so I use it so I can help friends who use it. I used a very cheap disposable camera while in India and then scanned the photos on my PSC950 HP All-In-One printer/fax/scanner. Nothing high tech here at all, but even with all of this low tech cheap stuff, the photos did not turn out that bad at all:

Photos of India 2007 trip

I also used Google to search for other people's photos of the same areas I visited and created another photo album of these:

India photos found in Google

Both of these were created using JAlbum with different output skins.

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'));
}
});


rounded corners #2

Just when I thought all was well as the nice rounded corners looked so good on Safari and Firefox, I found out that they look horrible on IE 7. The first problem I found was that the Rico library in IE 7 does not like color names, so I switched the "white" color to "#ffffff".


Next I have to find out why the Rico demos work on IE 7 but my special code does not. Why does web development have to be so hard? Who would have believed that setting vertical-align: top on the parent <div> would have caused all of the havoc? It is fixed now and looking the same on Safari, Firefox and IE.