469,927 Members | 1,649 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

Browser Bugs, Quirks and Inconsistencies

acoder
16,027 Expert Mod 8TB
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:
Expand|Select|Wrap|Line Numbers
  1. var selObj = document.getElementById("test");
  2. 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:
Expand|Select|Wrap|Line Numbers
  1. var selObj = document.getElementById("test");
  2. var val = selObj.options[selObj.selectedIndex].text;
Aug 18 '07 #1
9 11241
acoder
16,027 Expert Mod 8TB
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?
Sep 2 '07 #2
acoder
16,027 Expert Mod 8TB
Two more bugs for IE's buggy (i.e. non-standard) implementation of the select element's add() method.
Sep 3 '07 #3
acoder
16,027 Expert Mod 8TB
IE doesn't respect "checked" property when dynamically adding checkboxes. Added to the list.
Sep 5 '07 #4
acoder
16,027 Expert Mod 8TB
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.
Nov 1 '07 #5
cheogt
5
Problem
Not possible to prototype the Object() object
Browser
Internet Explorer
Example
The Javascript code:
Expand|Select|Wrap|Line Numbers
  1. //create an Alias (via protoype) for getElementById, or getElementByTagName
  2. Object.prototype.byTag=Object.prototype.getElementsByTagName;
  3. t=document.byTag('input');
Some relevant HTML:
Expand|Select|Wrap|Line Numbers
  1. <input id="anyName1" type="text" ...>
  2. <input id="anyName2" type="text" ...>
Solution
Create a simple function, and use the object as parameter (not nice!)... :
Expand|Select|Wrap|Line Numbers
  1. function byTag(o,s) {
  2.   return o.getElementsByTagName(s)
  3. }
  4. t=byTag(document,'input');
Nov 15 '07 #6
acoder
16,027 Expert Mod 8TB
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!)
Dec 6 '07 #7
hsriat
1,654 Expert 1GB
Problem
Not able to use innerHTML for a dynamically created row.

Browser
Internet Explorer

Example
Expand|Select|Wrap|Line Numbers
  1. var rowX = tableObject.insertRow(tableObject.rows.length);
  2. rowX.innerHTML = '<td id="td01" class="cells" onclick="doSomething()">This is the cell</td>';
Solution
Use insertCell()
Expand|Select|Wrap|Line Numbers
  1. var rowX = tableObject.insertRow(tableObject.rows.length);
  2. var cellX = rowX.insertCell(0);
  3. cellX.id = "td01";
  4. cellX.className = 'cells';
  5. cellX.onclick = function () {
  6.     doSomething()
  7. }
  8. cellX.innerHTML = 'This is the cell';
May 14 '08 #8
acoder
16,027 Expert Mod 8TB
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.
May 17 '08 #9
acoder
16,027 Expert Mod 8TB
Split out each one into their own page. Easier to read and link to.
Jun 8 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Nogusta123 | last post: by
10 posts views Thread by Conrad Lender | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.