When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips

Sections:
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
XML Info
Information:
Feedback
Author an Article
ASP ASP.NET ASP FAQs Message Board Feedback
Print this page.
Published: Wednesday, January 12, 2000

Incompatibilities in IE and Netscape: HTML & Javascript

By Brian Rhee


Have you ever wondered what the world would be like if there were only one programming language? How about a world where a set of standards were equally supported and backed by every single organization? The "pipe dream" that I described above is just that and unfortunately we have to live in a world that deals with incompatibilities and lack of standardization at every turn. So where am I going with all this? Hold on, I'll explain...

- continued -

About two years ago I was assigned to a project to help build an application for a client that involved the use of ASP technology. The requirements were gathered and the original spec docs required the use of IE4 by the users of the application. So naturally, the client side scripting language of choice was VBScript and all the testing was done using IE4.

Later on as the project grew and the application began to expand in scope, as well as in user base, more and more individuals were crying out that they did not want to give up their Netscape browsers just to use our application. So we were commissioned to convert all the existing HTML and VBScript code to be more cross browser friendly, namely the reformatting of our HTML and also converting the VBScript to JavaScript. Upon finishing the conversion we had tested the application with IE and everything seemed to work perfectly fine, but when testing with Netscape commenced, we had some very disheartening results.

To name a few of the problems, functions that worked perfectly well under an IE environment did not even "fire" under Netscape, in addition alignment of text and images were off and sometimes images did not even appear! Not to mention that Netscape does not by itself come with its own debugger and the one that can be downloaded from the Netscape site is a broken link! So the development team and I were left to figure out how and why things worked in IE but not in Netscape. The development team scoured the Internet for any possible information as to why the JavaScript code was not working in Netscape and why the formatting was all screwed up. We found some very useful links (such as developer.netscape.com) as to what properties of JavaScript were supported and which ones were not but not the information that we had been looking for. Namely, the fixes we were looking for had nothing to do with the JavaScript language itself, but how each browser handles specific oddities.

Here are a list of some of the quirks we have found with the IE/Netscape compatibility conversion and their explanations.

1. To Do: When centering objects on an HTML page use <center> OBJECT </center>
Not To Do: The <p align=center> OBJECT </p> that IE uses does not work in Netscape

2. To Do: Image names cannot have spaces, otherwise the image disappears in Netscape!
Not To Do: If you use a name in the image tag like this <img src="my image.gif"> Netscape does not display it, you must connect the string to either <img src="my_image.gif"> or be sure to reference the filename in HTML like: <img src="my%20image.gif">

3. To Do: Any form element that is created in Netscape must be included within a form, or else Netscape does not even show the button.
Not To Do: Do not do:

<input type=button name=mybutton>

Rather, do it like:

<form name=buttonpanel> <input type=button name=mybutton> </form>

3a. To Do: In addition to including all elements within form tags you must also reference the form elements by calling them out explicitly such as document.buttonpanel.mybutton, not just mybutton, otherwise you cannot access these elements in Netscape.

4. To Do: When using the select() function to access a value within an element, like text within a field, first use focus() then select() to allow Netscape to work properly.
Not To Do: Do not try to highlight text like this in Netscape

document.formname.textbox.select()

Use this instead

document.formname.textbox.focus()
document.formname.textbox.select()

5. To Do: The window.open options string must contain no spaces otherwise the function will fail to fire properly with the correct options in Netscape.

6. To Do: All tables must have proper closing tags such as </td>, </tr>, </table> or else the entire table disappears in Netscape. Netscape is ruthless in this respect, if you have a table with multiple inner tables trying to find that one missing tag can be a really tough job! Best way to solve this problem is to indent and indent with accuracy.

7. To Do: Use document.formname.selectname[document.formname.selectname.selectedIndex].value to access values in a <select> box.
Not To Do: Do not use the document.formname.selectname[i].value method because in Netscape the value will return undefined.

8. To Do: Use document.formname.radioname[i].checked for radio buttons.
Not To Do: Do not use document.formname.radioname.item[i].checked otherwise the value will be returned as undefined in Netscape.

9. To Do: On forms in IE when finished completing items on a page the Enter key submits the information. In Netscape you must first focus on the Submit button first in order to submit information. There are a couple of workarounds to this problem that are transparent to the user, and will even work with a submit image. An article exists that explains how to perform this functionality using client-side JavaScript!

10. To Do: You must create a form object before referencing the item, or else the object will not be able to see the form item.

11. To Do: In IE the msgbox allows one to rename the title of the pop up window, in JavaScript no such thing is available for the alert messagebox.

12. To Do: Since we were converting all of our VBScript functions to JavaScript, we were daunted with the task of either rewriting major chunks of code or try to figure out a way to use the existing code we had. Since we maintained proper variable declarations and used lower case variable names and constants we had a much easier time of converting our VBScript functions than we could have had. We first built a JavaScript library that included many of the same common VBScript functions we used such as Trim(), CDbl(), CStr(), IsNumeric(), IsNull(), DateDiff(), etc, and named those functions under the same naming conventions. We then included this library into every page. To see some conversions from VBScript to JavaScript, be sure to check out the VBScript - to - JavaScript Function Translation resource on 4Guys.

The next obstacle we encountered was to try and trigger those even driven VBScript functions to now fire under JavaScript event driven functions. The actual solution was elegant but simple, for example take this VBScript code that will work under IE:

<script Language="VBScript"> Sub myButton_OnClick() alert("Hello World") End Sub </script>

To make this work in JavaScript all we had to do was this:

<script Language="JavaScript"> <!-- function myButton_OnClick() { alert("Hello World"); } document.myform.myButton.onclick = myButton_OnClick; // --> </script>

You see the magic here lies in the last part of the script. Referencing the event handler with the implied function causes the desired action. BTW: Keep in mind DO NOT place any of your JavaScript inside tables what-so-ever...This will only lead to problems!

Happy Programming!

BTW: Much props go out to my fellow developers Matthew Faust and Steven Schirripa


ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article