Category

Issues

Root cause

CSS or Cascading Style Sheets  issues

Due to browser rendering behavior

UI alignment issues

Due to browser rendering behavior

Scrollbar issues on pop-up’s 

Due to browser rendering behavior

Issues due to absolute positioning or relative positioning of div. (Overlapping of base page and div)

Due to browser rendering behavior

Dropdowns do not  work

Due to classes defined in style sheet not supported in different browsers

Popups do  not display

Due to classes defined in style sheet not supported in different browsers

JQuery issues or JAVA script issues

Images on any buttons  do not appear

Due to classes not supported in different browsers

Images on any panels  do not appear

Due to classes not supported in different browsers

Java Script properties issues

Dropdowns do not work

Due to classes defined in style sheet not supported in different browsers

Popups do not display

Due to classes defined in style sheet not supported in different browsers

Common

Text wrapping issues in textboxes

Resizing of windows  or resizing of textboxes

Button functionality issues

Tab order issues

Browser Support for Graphic Formats

Old and very old browsers do not support JPEGs

PNG is an upcoming format supported by newer browsers

Tables

Cellspacing,  Cellpadding, and border  issues.

Screen Variations

screen size and settings issues

Default Character Width Size

Different platforms use a different default character width size. You'll notice that the same text and graphics will look slightly larger on a Mac than it does on a PC.

The two operating systems use a different default character width size. On the Mac, each character pixel is sized to be 1/72nd of an inch at the default 640x480 screen size. On the PC, each character pixel is sized to be 1/96th of an inch at the default 640x480 screen size. This means that a 72 pixel wide image will fill up one inch of Macintosh screen real estate—but not quite an inch of PC screen real estate

Query string issues

FAV icon issues

Control ids are case sensitive in Mozilla.

Inner HTML does not work in FF

1.      Inner HTML (getting) – returns the worst markup possible

2.      Inner HTML (setting) – doesn’t work on the elements you would want to dump a bunch of data into (e.g. tables and selects)

A text node in Firefox allows only 4K data. So an XML Ajax response gets split up into multiple text child nodes instead of only one node. Its fine in Internet Explorer. For Firefox, to get the full data you either need to use node.normalize before you call node.firstChild or use node.textContent, both of which are Mozilla specific methods

Internet Explorer does not replace   or HTML char code 160, you need to replace its Unicode equivalent \u00a0

In Firefox a dynamically created input field inside a form (created using document.createElement) does not pass its value on form submit.

document.getElementById in Internet Explorer will return an element even if the element name matches. Mozilla only returns element if id matches.

In Internet Explorer if a select box has a value not represented by any of the options, it will display blank, Firefox displays the first option.

IE Supported Code

FF Supported Code

Width, height gets inherited even if not specified

Need to specify width and Height otherwise doesn’t get inherited

Custom Properties can be directly accessed

eg : .folderId

Custom Properties can be accessed only by getAttribute("property name')

eg:  getAttribute('folderid')

.InnerText works in IE

Instead  use    .textContent

event.srcElement supported by IE only

event.target in FF also need to pass ‘event’ attribute explicitly

 eg:  onclick="methodName(event);" -

SelectNodes() works in IE

SelectNodes() for paths starting with "\\pathName"

The following code needs to be used for SelectNodes() var xmlNodesFF = dom.getElementsByTagName(xPath);

for (var n = 0; n < xmlNodesFF.length; n++)

            {

                var getXmlAttributes = dom.getElementsByTagName(xPath)[n].attributes;

                var selectXmlAttribute = getXmlAttributes.getNamedItem(attributeName).value;

                if (selectXmlAttribute == idValue)

                {

                    selectNodesObj[i] = dom.getElementsByTagName(xPath)[n];

                    i = i + 1;

                }

                else if (idValue == " " && attributeName == " ")// get all values

                {

                    selectNodesObj[i] = dom.getElementsByTagName(xPath)[n];

                    i = i + 1;

                }

var i = 0;

            var isMatch;

            var xmlNodesFF = dom.getElementsByTagName(xPath);

            for (var n = 0; n < xmlNodesFF.length; n++)

            {

                var getXmlAttributes = dom.getElementsByTagName(xPath)[n].attributes;

                for (var cnt = 0; cnt < idValues.length; cnt++)

                {

                    isMatch = false;

                    var selectXmlAttribute = getXmlAttributes.getNamedItem(attributeNames[cnt]).value;

                    if (selectXmlAttribute == idValues[cnt])

                    {

                        isMatch = true;

                    }

                    if (isMatch == false)

                    {

                        break;

                    }

                }

                if (isMatch == true)

                {

                    selectNodesObj[i] = dom.getElementsByTagName(xPath)[n];

                    i = i + 1;

                }

Creating XML DOM object in IE is

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

Creating XML DOM object in FF is

xmlDoc  = document.implementation.createDocument("","doc",null);

to getattribute in IE

xmlNode.getAttribute("Attribute Name");

In FF

xmlNode.attributes["Attribute Name"].value;

.xml attributes is defined in IE

Need to use (new XMLSerializer()).serializeToString(xmlObject); to get the xml string

Setting Attribute : Node.setAttribute(attributeName) = value;

Setting  Attribute :

Node.setAttribute(attributeName, attributeValue);

.Text works in IE

use .textContent to set and get text values

Width and height rendering differs in IE and FF because of the size

Width n height rendering differs in IE and FF because of the size

NodeTypeString exists in IE not in FF

NodeTypeString  undefined in FF use nodeType as it works for both IE and FF(nodeType = 1 defines ‘element’)

To loadXML from xml string as input , IE uses LoadXML(xmlstring)

FF uses

var parser = new DOMParser()
        xmlDoc = parser.parseFromString(xmlstring, "application/xml");