Inside Technique : Animated Page Sets : Cross-Browser Issues

Getting consistent results on both browsers proved to be quite the challenge. We originally authored and tested this article in Internet Explorer. When we finished the article and tested it in Netscape (with the object model differences already handled), we ran into one scripting issue and a number of style sheet issues.

Script Issues

Outside of designing around the object model differences, the only other scripting issue we experienced related to Netscape's implementation of JavaScript. We experienced a bizarre problem with the SWITCH statement when trying to use our animation constants. Below demonstrates how we originally coded all the switch statements:

  switch (type) {
    case _constants.PAGE_STANDARD:
       ....
    case _constants.PAGE_SLIDELEFT:
       ....
  }

While this ran fine in Internet Explorer, for some reason, this generated script errors in Netscape. Our fix was to hard-code the constant values into the switch statement (eg., case 1, case 2...).

Style Sheet Issues

This is where we hit the most difficulties. Our planned to define the appearance of the page list using only global style sheets. Our original global style sheet was defined as follows:

  .pageList {clip: rect(0 100% 100% 0)} 
  .pageList, DIV.page {position: absolute; width: 100; height: 100;}
  .pageList DIV.page {visibility: hidden}
  #page1 {background: lightblue}
  #page2 {background: green}
  #page3 {background: navy}

This stylesheet worked fine in Internet Explorer, but was completely ignored by Netscape. None of the elements were positioned, and the background colors were not applied.

Instead, we discovered that in Netscape, the style sheet needed to be defined in-line on each element. Since Explorer has no problems with the in-line style sheet, we moved from the global style sheet to a completely in-line one:

<DIV CLASS="pageList" ID="pageSet1" 
        STYLE="position: absolute; width: 100; height: 100; 
               clip: rect(0 100 100 0)">
  <DIV CLASS=page ID="page1" 
        STYLE="background: lightblue; position: absolute; 
               width: 100; height: 100;visibility: visible">Page 1</DIV>
  <DIV CLASS=page ID="page2" 
        STYLE="background: green; position: absolute; 
               visibility: hidden; width: 100; height: 100;">Page 2</DIV>
  <DIV CLASS=page ID="page3" 
        STYLE="background: navy; position: absolute;  
               visibility: hidden; width: 100; height: 100;">Page 3</DIV>
</DIV>

This got us very close. However, Netscape failed to correctly apply the background color to the entire positioned region. The solution required two additional steps: 1) We needed to use a proprietary Netscape CSS property, layer-background-color and 2) We needed to embed a table within the positioned elements to make Netscape render the correct width. The complete HTML to run on both browsers now is:

<DIV CLASS="pageList" ID="pageSet1" 
        STYLE="position: absolute; width: 100; height: 100; 
               clip: rect(0 100 100 0)">
  <DIV CLASS=page ID="page1" 
          STYLE="position: absolute; layer-background-color: lightblue; 
                 visibility: visible;background: lightblue; height: 100">
    <TABLE width=100><TR><TD>
      Page 1
    </TD></TR></TABLE>
  </DIV>
  <DIV CLASS=page ID="page2" 
          STYLE="position: absolute; layer-background-color: lightblue; 
                 visibility: visible;background: lightblue; height: 100">
    <TABLE width=100><TR><TD>
      Page 2
    </TD></TR></TABLE>
  </DIV>
  <DIV CLASS=page ID="page3" 
          STYLE="position: absolute; layer-background-color: lightblue; 
                 visibility: visible;background: lightblue; height: 100">
    <TABLE width=100><TR><TD>
      Page 3
    </TD></TR></TABLE>
  </DIV>
</DIV>

This gave us a solution that ran in both browsers. To run on Netscape, we give up some source code maintainability (loss of constants), and the reusability of CSS global style sheets and clean separation of style from content. Next, we provide the complete source code for the page animation library.

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