Browser Bugs, Quirks and Inconsistencies 
August 18th, 2007, 03:00 PM
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| |
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
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: - var selObj = document.getElementById("test");
-
var val = selObj.value;
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: - var selObj = document.getElementById("test");
-
var val = selObj.options[selObj.selectedIndex].text;
|
September 2nd, 2007, 08:49 PM
| | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Browser Bugs, Quirks and Inconsistencies
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?
|
September 3rd, 2007, 08:38 AM
| | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Browser Bugs, Quirks and Inconsistencies
Two more bugs for IE's buggy (i.e. non-standard) implementation of the select element's add() method.
|
September 5th, 2007, 12:35 PM
| | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Browser Bugs, Quirks and Inconsistencies
IE doesn't respect "checked" property when dynamically adding checkboxes. Added to the list.
|
November 1st, 2007, 12:51 PM
| | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Browser Bugs, Quirks and Inconsistencies
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.
|
November 15th, 2007, 05:49 PM
| | Newbie | | Join Date: Oct 2007 Location: Venezuela
Posts: 5
| | | re: Browser Bugs, Quirks and Inconsistencies
Problem
Not possible to prototype the Object() object Browser
Internet Explorer Example
The Javascript code: -
//create an Alias (via protoype) for getElementById, or getElementByTagName
-
Object.prototype.byTag=Object.prototype.getElementsByTagName;
-
t=document.byTag('input');
Some relevant HTML: - <input id="anyName1" type="text" ...>
-
<input id="anyName2" type="text" ...>
Solution
Create a simple function, and use the object as parameter (not nice!)... : - function byTag(o,s) {
-
return o.getElementsByTagName(s)
-
}
-
t=byTag(document,'input');
|
December 6th, 2007, 08:38 AM
| | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Browser Bugs, Quirks and Inconsistencies
Quote: |
Originally Posted by cheogt Problem
Not possible to prototype the Object() object | Yes, but is it such a good idea? See Object.prototype is verboten (I don't know where the fascination with German words started!)
|
May 14th, 2008, 07:56 AM
|  | Expert | | Join Date: Jan 2008 Location: Bath, UK
Posts: 1,609
| | | re: Browser Bugs, Quirks and Inconsistencies
Problem
Not able to use innerHTML for a dynamically created row. Browser
Internet Explorer Example - var rowX = tableObject.insertRow(tableObject.rows.length);
-
rowX.innerHTML = '<td id="td01" class="cells" onclick="doSomething()">This is the cell</td>';
Solution
Use insertCell() - var rowX = tableObject.insertRow(tableObject.rows.length);
-
var cellX = rowX.insertCell(0);
-
cellX.id = "td01";
-
cellX.className = 'cells';
-
cellX.onclick = function () {
-
doSomething()
-
}
-
cellX.innerHTML = 'This is the cell';
|
May 17th, 2008, 07:26 PM
| | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Browser Bugs, Quirks and Inconsistencies
Quote: |
Originally Posted by hsriat 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.
|
June 8th, 2008, 01:12 PM
| | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Browser Bugs, Quirks and Inconsistencies
Split out each one into their own page. Easier to read and link to.
|  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 225,689 network members.
|
