Inside Technique : DHTML Pegs : Cross-Browser Issues

Below lists the issues we had when writing the game to run on both browsers. We originally wrote and tested the game on Internet Explorer 4.0 and then rewrote various portions of the game in an effort to make it cross-browser. We originally set out to make this game to work on the 3.0 and later browsers so we also include the issues we found when trying to author for everyone.

• Converting Characters to ASCII equivalents
  Our first issue occurred when we ran the game in Navigator 3.0. We store the coordinates of the buttons as column, row where the column is a letter and the row is a number. We originally calculated column offsets by converting the letter that represents the column to its ASCII equivalent and then if necessary convert it back to a letter. This made it very easy to determine which columsn were to the right and left of the selection. However, this feature is new to the 4.0 browsers. Our work-around for Navigator 3.0 was to create an object where we associated a numeric representation of the column, that we can manipulate and convert back to a column letter using an array of the letters:

  var keyPos = new Object()
  keyPos["a"] = 0; keyPos["b"] = 1; keyPos["c"] = 2; keyPos["d"] = 3
  keyPos["e"] = 4; keyPos["f"] = 5; keyPos["g"] = 6
  var keys = new Array("a","b","c","d","e","f","g")
  

• Return values to the onclick handler
  This was an odd issue. In Internet Explorer, to prevent the browser from processing the click, you return false. This is consistent with all other event handlers supported by both Netscape and Internet Explorer. However, in Netscape, the return values are reversed for the radio button. We added a simple browser check that reverses the return value for netscape:

    if (navigator.appName=="Netscape") 
      return !ok
    else
      return ok
  

• Singular radio buttons in Navigator 3.0 always return true
  This is the issue that almost prevented the game from running in Navigator 3.0. For some reason, when you only have one radio button in a group (each radio button is mutually exclusive in this game), the checked property always returns true, regardless if it is really checked or not. This basically prevents the game from running.
    This also causes problems with multiple assignments. In the assignment below, the first radio button e7 is unchecked, and the second radio button, is checked. This is because the checked property always returns true so the assignment of e7 to c1 is true.

    f.c1.checked = f.e7.checked = false
  

  We fixed this problem by creating a second variable that masks the checked property, bChecked, and use this property to track the real checked state. We also eliminated multiple assignments for unchecking the checkbox.
• Navigator paints table backgrounds incorrectly
  If you ran the original code I wrote in Navigator 3.0, 4.0 and then Internet Explorer 4.0, you would have seen two different renditions of the game board. Before we performed any cross-browser magic, we had different results on all three browsers just for setting the tables BGCOLOR attribute. The correct representation was created by Internet Explorer (a solid. light grey background behind the entire table). Navigator 3.0 came close but only painted the background in cells that have contents. Navigator 4.0 is similar to Navigator 3.0 but adds an opaque white rectangle around each radio button making the game board quite ugly. The unpainted cells can be fixed by making sure all empty cells contain a non-breaking space:  , but we could not find a solution for Navigator 4.0's radio buttons.
    To get the backgrounds closer, we chose to try and match Navigator 3.0. This required us to remove the empty cell's background in Internet Explorer. We accomplished this by adding BGCOLOR=white to each empty cell.
• Netscape does not provide a focus rectangle
  This is purely a usability issue. In Internet Explorer, clicking on the radio button provides a small focus rect that identifies which radio button is active. In Netscape, there is no such indication. This makes your current move less obvious, but more importantly, this makes standard forms slightly less friendly.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.