I recently started making one of my web applications for work more cross-browser friendly. This whole time it had been developed for IE because we run a microsoft shop (unfortunately).
I ran into a bug when referencing table elements using the parentNode and childNodes collections. Take the following code for example:
It runs just fine in IE, but in Firefox only the bottom span will successfully click the checkbox. IE treats the first childNode in the collection as the checkbox, so when referencing .childNodes[0] it would default to it. However, Firefox will treat any "white space" or text as the first node in the collection. Since the last of the 3 examples was <td><input.... there was no "white space" between the <td> and checkbox, therefore the checkbox was successfully recognized as the first node in the collection.
So I guess as a rule, if you're going to be using the childeNodes collection, leave no white space between elements to make it work the same in both browsers.
Hope this helps someone.![[smile]](/data/assets/smilies/smile.gif "[smile] [smile]")
-kaht
...looks like you don't have a job, so why don't you get out there and feed Tina.
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
I ran into a bug when referencing table elements using the parentNode and childNodes collections. Take the following code for example:
Code:
<script language=javascript>
function checkClick(obj) {
obj.parentNode.childNodes[0].click();
}
</script>
<body>
<table>
<tr>
<td>
<input type=checkbox>
<span style='border:solid black 1px; cursor:pointer' onclick='checkClick(this)'>Click here to click the checkbox</span>
</td>
</tr>
<tr>
<td> <input type=checkbox> <span style='border:solid black 1px; cursor:pointer' onclick='checkClick(this)'>Click here to click the checkbox</span> </td>
</tr>
<tr>
<td><input type=checkbox><span style='border:solid black 1px; cursor:pointer' onclick='checkClick(this)'>Click here to click the checkbox</span></td>
</tr>
</table>
</body>It runs just fine in IE, but in Firefox only the bottom span will successfully click the checkbox. IE treats the first childNode in the collection as the checkbox, so when referencing .childNodes[0] it would default to it. However, Firefox will treat any "white space" or text as the first node in the collection. Since the last of the 3 examples was <td><input.... there was no "white space" between the <td> and checkbox, therefore the checkbox was successfully recognized as the first node in the collection.
So I guess as a rule, if you're going to be using the childeNodes collection, leave no white space between elements to make it work the same in both browsers.
Hope this helps someone.
-kaht
...looks like you don't have a job, so why don't you get out there and feed Tina.