Browser Bugs, Quirks and Inconsistencies

[acoder]

Don't you just hate it when you've got something working in every browser (that you've tested on) except the XYZ browser?

It would be a good idea to document some strange or incorrect behaviours of particular browsers with possible solutions and workarounds.

These will be documented in the following format:
Problem
Give a brief description of the problem

Browser
Which browser it affects (include version number if applicable)

Example
A simple example which demonstrates the problem

Solution
A possible solution or workaround which should not affect other browsers.

Alternative Solution (if applicable)
Another possible solution (if one exists).

Table of contents

• SELECT object's value property doesn't give chosen value (IE) - see below
• Dynamically appended table does not appear on page (IE)
• SELECT object's add() method doesn't append/add options (IE)
• Dynamically appended checkbox element is not checked (IE)
• onload and onunload events do not fire for back, forward and refresh (Opera)
• Setting FORM object's action property causes an error (IE6)
• document.getEle mentById() gets the wrong element (IE)

Here's one to start us off:
-----------------------------------------------------------------------------------------------------
Problem
The select object's value property doesn't give the selected value

Browser
Internet Explorer

Example
The select drop down:
[HTML]<select name="test" id="test">
<option>1
<option>2
</select>[/HTML]
The Javascript code:
[CODE=javascript]var selObj = document.getEle mentById("test" );
var val = selObj.value;[/CODE]
Solution
Give values to the option elements:
[HTML]<select name="test" id="test">
<option value="1">1
<option value="2">2
</select>[/HTML]
Alternative Solution
Change the Javascript to:
[CODE=javascript]var selObj = document.getEle mentById("test" );
var val = selObj.options[selObj.selected Index].text;[/CODE]

[acoder]

The table row not getting added to the table in IE is a common problem. Well, here's the answer: add it to the tbody instead. Who would've thought IE would be so rigid?

[acoder]

Two more bugs for IE's buggy (i.e. non-standard) implementation of the select element's add() method.

[acoder]

IE doesn't respect "checked" property when dynamically adding checkboxes. Added to the list.

[acoder]

Opera has a quirk relating to onload and onunload which may catch some people out. It's useful to know in case you have some functionality which is triggered by one of these two events. Oh yes, and two more IE bugs with many more to follow I'm sure.

[cheogt]

Problem
Not possible to prototype the Object() object
Browser
Internet Explorer
Example
The Javascript code:
[Code=javascript]
//create an Alias (via protoype) for getElementById, or getElementByTag Name
Object.prototyp e.byTag=Object. prototype.getEl ementsByTagName ;
t=document.byTa g('input');[/code]
Some relevant HTML:
[Code=html]<input id="anyName1" type="text" ...>
<input id="anyName2" type="text" ...>[/code]
Solution
Create a simple function, and use the object as parameter (not nice!)... :
[CODE=javascript]function byTag(o,s) {
return o.getElementsBy TagName(s)
}
t=byTag(documen t,'input');[/CODE]

[acoder]

Problem
Not possible to prototype the Object() object

Yes, but is it such a good idea? See Object.prototyp e is verboten (I don't know where the fascination with German words started!)

[hsriat]

Problem
Not able to use innerHTML for a dynamically created row.

Browser
Internet Explorer

Example[code=javascript]var rowX = tableObject.ins ertRow(tableObj ect.rows.length );
rowX.innerHTML = '<td id="td01" class="cells" onclick="doSome thing()">This is the cell</td>';[/code]
Solution
Use insertCell()[code=javascript]var rowX = tableObject.ins ertRow(tableObj ect.rows.length );
var cellX = rowX.insertCell (0);
cellX.id = "td01";
cellX.className = 'cells';
cellX.onclick = function () {
doSomething()
}
cellX.innerHTML = 'This is the cell';[/code]

[acoder]

Problem
Not able to use innerHTML for a dynamically created row.

Spot on. However, if you're going to use insertRow(), most likely you'd use insertCell too. Good to know all the same. Thanks.

[acoder]

Split out each one into their own page. Easier to read and link to.