Javascript Differences in Mozilla Firefox and Internet Explorer


document.all

Internet Explorer 4 introduced the document.all DOM (document object model) to allow access to the various parts of the web page. Soon after that the standard DOM method getElementById was introduced and is therefore available in all version 5+ browsers. This means that the document.all references are only needed to support IE4.

document.all doesn’t work  mozilla why?

Some proprietary document objects such as document.all and document.layers are not part of the W3C DOM and are not supported in Mozilla. (There is partial undetectable support for document.all, though, in newer versions of Mozilla. However, that functionality only exists for compatibility with sites authored specifically for IE. You should not rely on Mozilla’s document.all support on new pages.) The method document.getElementById() can be used instead.

In the Standards mode Mozilla does not generate implicit top-level JavaScript variable bindings for elements with the id or name attribute. The correct way to access an element by id is to call the document.getElementById() method with the id as a string as the argument.

Also, old client sniffers can shut out new browsers. The point of having a common API (the W3C DOM) is interoperability, and checking for a particular browser defeats that purpose. When working with the DOM, it is better to check for the existence of the methods and objects you are planning on using. For example, the existence of document.getElementById() can be checked as follows:

if(document.getElementById) {
  /* code that uses document.getElementById() */
}

1. Window/Body OnLoad

When dealing with a site that uses Master Pages, you lose some control, including the ability to declare a page specific event handler. There are ways around this, and I found that the following code example works pretty well.

<script language=”javascript” type=”text/javascriptfor=”window” event=”onload“>
    if (document.all)
    {
        initialize();
    }
   else
    {
        window.document.addEventListener(“DOMContentLoaded”, initialize, true);
    }
</script>

2. Get Control Inner Text

Retrieving the text of an element is done by using element.innerText in Internet Explorer and element.textContent in Mozilla Firefox.

function getText(control)
{
if (document.all)
    {
return control.innerText;
    }
else 
    {
return control.textContent;
    }
}

function setText(control, value)
{
if (document.all)
    {
        control.innerText = value;
    }
else
    {
        control.textContent = value;
    }
}

3. Element Height and Width

To retrieve an element’s height and width, use element.currentStyle for Internet Explorer and element.style for Mozilla Firefox.

if (document.all)
{
    top += parseValue(element.currentStyle.borderTopWidth);
    …
}
else
{
    top += parseValue(element.style.borderTopWidth);
    …
}

4. Source Elements

To get a reference to the element that fired an event within an event handler, use event.srcElement for Internet Explorer and event.target for Mozilla Firefox.

function getSourceElement(event)
{
if (document.all)
    {
return event.srcElement;
    }
else
    {
return event.target;
    }
}

5. Firing Events

You can call fireEvent on an element in Internet Explorer, but it’s more complicated in Mozilla Firefox, requiring an event to be instantiated, initialized, and dispatched.

function fireClickEvent(control)
{
if (document.all)
    {
        control.fireEvent(“onclick”);
    }
else
    {
var clickEvent = window.document.createEvent(“MouseEvent“);
        clickEvent.initEvent(“click“, false, true);
        control.dispatchEvent(clickEvent);
    }
}

6. Window Height and Width

Internet Explorer exposes the visible content area dimensions using document.body.offsetHeight and document.body.offsetWidth, whereas Mozilla Firefox uses document.body.offsetWidth and window.innerWidth.

function getWindowHeight()
{
if (document.all)
    {
return document.body.offsetHeight;
    }
else 
    {
return window.innerHeight;
    }
}

function getWindowWidth()
{
if (document.all)
    {
return document.body.offsetWidth;
    }
else 
    {
return window.innerWidth;
    }
}

7. Why doesn’t Mozilla display my alt tooltips?

Contrary to a popular belief stemming from the behavior of a couple browsers running on the Windows platform, alt isn’t an abbreviation for ‘tooltip’ but for ‘alternative’. The value of the alt attribute is a textual replacement for the image and is displayed when the image isn’t.

Mozilla doesn’t display the alt attribute as a tooltip, because it has been observed that doing so encourages authors to misuse the attribute.

  • * When the alternative text is shown in a tooltip, some authors write bad alt texts, because they intend the text as auxiliary tooltip text and not as a replacement for the image. (‘Bad’ in the sense that the textual alternative is less useful for people who don’t see the image.)
  • * When the alternative text is shown in a tooltip, other authors don’t want to supply textual alternatives at all, because they don’t want tooltips to appear. (Again, making things harder for people who don’t see the image.)

There is another attribute that Mozilla shows as a tooltip: title. In fact, the HTML 4.01 specification suggests that the title attribute may be displayed as a tooltip. However, this particular display method is not required and some other browsers show the title attribute in the browser status bar, for example.

At this point some people feel compelled to post a “But IE…” rant in the newsgroups or in Bugzilla. Please note that Mac IE 5 behaves in the same way as Mozilla when it comes to the alt and title attributes. Windows IE also shows the title attribute in a tooltip.

8. Does Mozilla support downloadable fonts?

Downloadable fonts are not supported.

Downloadable fonts are usually used on sites using writing systems for which proper support has been missing in browsers in the past. These sites (for example some Indian sites) code the text in Latin gibberish and then use a font that to the browser and operating system seems to be a Latin font but has eg. Devanagari glyphs, so that when the Latin gibberish is rendered with the font it seems to a human reader to be intelligible text in some language.

Obviously, that kind of ad hockery falls apart when Unicode-savvy browsers come along and render Latin gibberish as Latin gibberish (since that’s what is coded in the file from the Unicode point of view). Instead of providing support for downloadable fonts, Mozilla is addressing the real issue: support for various Unicode ranges.

However, there are still bugs related to support for Indic scripts on some platforms. For example, on Mac OS X Mozilla does not use the Devanagari font that comes with the system but can use a third-party font like TITUS Cyberbit.

A lot of work has been put into Mozilla’s Unicode support. Supporting downloadable fonts in a cross-platform way would also be a lot of work and would potentially require navigating past a bunch of patents but the rewards would be small. For the purpose of rendering non-ISO-8859-1 characters Mozilla already provides Unicode support that, in the long run, is a lot better approach than using pseudo-Latin downloadable fonts separately on each site.

9. In Mozilla Firefox my style sheet doesn’t work! Why?

Here’s the check list:

  • 1. Does the HTML document validate? Styling misnested markup may cause strange effects.
    • * The <link> and <style> elements should be inside the <head> element.
  • 2. Does the CSS style sheet pass the syntax check? The CSS error handling rules require erroneous parts to be ignored rather than fixed by guessing.
    • * Lengths other than zero should be followed by a proper unit without a space between the number and the unit (eg. 1.2em).
    • * The character to use between the property name and the value is the colon—not the equal sign.
    • * HTML markup, such as <style>, does not belong in .css files.
    • * font-face is not a real CSS property. The property is font-family and @font-face is an at-rule.
    • * If @import is used, it should be the first thing in a CSS file.
    • * In Mozilla 1.8a4 and later (not in Firefox 1.0) CSS parsing errors are reported to the JavaScript console.
  • 3. Is the server sending the proper Content-Type header for CSS style sheets?
  • 4. Class names and ids are case-sensitive.
  • 5. The element selectors are case-sensitive with XML.
  • 6. Style sheet processing instructions are only allowed in the prolog of XML documents. Also, they only work in XML documents—not in documents served as text/html.
  • 7. width and height do not apply to non-replaced inline elements such as (by default) <span>.
  • 8. text-align: center; centers inline content within a block. It does not (and should not) center the block box itself. A block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block.

It is also possible, although not very likely, that you are seeing a bug.

About these ads

28 thoughts on “Javascript Differences in Mozilla Firefox and Internet Explorer

  1. Its really quite useful. Can you provide any reference links which explains the differences with Safari and other browsers.

  2. Hello everybody.
    i want to say that i am using html file upload control
    the problem is i want to open the file chosser programitcally. it works in IE but does not work in firefox.
    when i call the .click method of this control in javascript. it shows nothing whereas the same method is working in IE.

    So any help on this.

  3. function fireClickEvent(control)
    {
    if (document.all)
    {
    control.fireEvent(”onclick”);
    }
    else
    {
    var clickEvent = window.document.createEvent(”MouseEvent“);
    clickEvent.initEvent(”click“, false, true);
    control.dispatchEvent(clickEvent);
    }
    }
    the above code still does not work in firefox
    i have checked it.
    anyone used this code for firefox

  4. Hi
    I wrote the below code for populate some values and add it to the combo box using javascript this below code is working in IE and its not working in mozilla browser plz any one tell me some solution.

    this.PopulateFeaturedSpacesList = function()
    {
    var selContainers = this.listController.selContainers;
    var selFeaturedSpaces = this.listController.selFeaturedSpaces;

    var selectedContainerID = selContainers.options[selContainers.selectedIndex].value;

    var selectedFeaturedSpaceID = -1;
    if(selFeaturedSpaces.selectedIndex >= 0 && selectedContainerID > 0)
    {
    selectedFeaturedSpaceID = selFeaturedSpaces.options[selFeaturedSpaces.selectedIndex].value;
    }

    while(selFeaturedSpaces.options.length > 0)
    {
    selFeaturedSpaces.options.remove(0);
    }

    if(selectedContainerID == 0 || this.listController.mode == “search”)
    {
    var featuredSpaceOption = document.createElement(“OPTION”);
    selFeaturedSpaces.options.add(featuredSpaceOption);
    featuredSpaceOption.innerText = this.listController.allFeaturedSpacesText;
    featuredSpaceOption.value = 0;
    featuredSpaceOption.selected = true;
    }

    for(var i = 0; i = 0 && selFeaturedSpaces.options[selFeaturedSpaces.selectedIndex].value > 0)
    {
    //A real featured space is now selected so call the featured space change callback.
    this.listController.CallFeaturedSpaceSelectionChangeCallback();
    }
    }

  5. Hi!

    pls clear my doubt…..

    some more javascript and vbscript function didn’t support in mozilla firefox. How i can solve that problem?

    for example:

    Date(); — [ var FDate = new Date(document.getElementById('txt_F' + i).value);] didn’t support in firefox.

    window.close(); — [Close] didn’t support in firefox.
    .
    .
    .. etc..

    how i can solve this problem?

    Thanks & Regards,
    siva.

    • document.getElementById(“supplier_no”).value= values_array[0];

      this code works perfect in IE but not in firefox… why… i got error as getElementById returns null

  6. Hi,
    Can u pls tell me
    A JAW(ScreenReader) application is working in Mozilla and why not in Internet explorer.

    Is there any code changes in Javascript or in style sheet?

    Please reply as soon as possible as it s a very important one !!!

    Thanks
    Vijay

  7. the below javascript works in ie but not working in mozilla
    please revert back asap

    function NextCheck() {

    debugger;

    var button1= document.getElementById(‘BtnNext’);
    button1.disabled=true;
    var divsample = document.getElementById(‘divSample’);
    var divbackground = document.getElementById(‘DivBackground’);
    divbackground.style.display=’block';
    try
    {
    var res= document.frames[0].Validate();
    if(res == false || res == true)
    {
    if(res == false)
    {
    divbackground.style.display=’none';
    button1.disabled=false;
    return res;
    }
    //if((parseInt(hidden2.value) + 1) < parseInt(hidden1.value))
    {
    CallServer('Next','');
    return res;
    }

    }
    else
    {
    alert(res);
    divbackground.style.display='none';
    button1.disabled=false;
    return false;
    }
    }
    catch(Error)
    {
    }

    //if((parseInt(hidden2.value) + 1) == parseInt(hidden1.value) )
    {
    CallServer('Next','');
    }
    }

  8. After closing the popup opened , it is submitting the form in mozilla and it is working fine in IE. Actually I dont want to submit the form after closing the popup. Can you please help me on this.

    var baseText = null;
    function showPopup(){
    var w = 25;
    var h = 25;
    var Xoffset=-60;
    var Yoffset= 20;
    x = getWindowWidth()
    y = getWindowHeight();

    var popUp = document.getElementById(“popupcontent”);
    popUp.style.top = y-430+”px”;
    popUp.style.left = x-580+”px”;
    //popUp.style.padding = “200px 200px 200px 900px”;
    popUp.style.width = w + “px”;
    popUp.style.height = h + “px”;
    popUp.style.position = ‘absolute';
    if (baseText == null) baseText = popUp.innerHTML;

    var schemas = “schema1,schema2″;
    popUp.innerHTML = ” “+baseText+””+ schemas +” Close ”

    popUp.style.visibility = “visible”;
    }

    function hidePopup(){
    var popUp = document.getElementById(“popupcontent”);
    popUp.style.visibility = “hidden”;
    }

    function getWindowHeight()
    {
    if (document.all)
    {
    return document.body.offsetHeight;
    }
    else
    {
    return window.innerHeight;
    }
    }

    function getWindowWidth()
    {
    if (document.all)
    {
    return document.body.offsetWidth;
    }
    else
    {
    return window.innerWidth;
    }
    }

    Schemas Affected

  9. There is one more JS function difference between IE and other browsers. addEventListener works fine on all browsers except Internet explorer. Refer following example

    click

    var mypara = document.getElementById(‘id1′);
    mypara.addEventListener(‘click’, function()
    {alert(‘Opssss you clicked me!’)}, false);

    when you try to run this on Internet Explorer it will not work but the same piece of code will work fine on mozilla or other browsers. To get rid of this one can write code in following way:

    click

    var myelement = document.getElementById(‘id1′);
    myelement.onclick = function() {alert(‘Opssss you clicked me!’);}

  10. Pingback: Firefox 8.0
  11. hi.,
    I am facing one problem.Kindly help me.,
    Combo-box listing is working fine with IE in single-click.But in mozilla.,its listing down only after double-click.

  12. My family members always say that I am wasting my time here
    at net, except I know I am getting knowledge
    all the time by reading thes nice content.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s