getElementByID in IE 8 compared to previous versions

Found this post about the getElementByID method in Javascript by accident and thought it would be worth posting about.

The basic issue is is that IE 8 compares the id’s is a case-sensitive manner whereas previous versions of IE compare in case-insensitive manner when IE 8 is in actual IE 8 mode. (MS Doc Here)

I always try and keep my identifiers in the same case in all cases, and this is just another reason for me to keep doing that!

Moral of the story: No matter what you do and what language you work in you should endeavour to keep the casing of variables, css classes, uri etc, in exactly the same case in all instance. This helps when in the future something like this happens.

Advertisements

IE Oddity – Absolute table to right of parent cell content, not below

I was recently working to help with a small issue where you absolutely position an element, but it shows to the right of the content in the parent element.

We wanted to be able to do this:

testing
Child table

The following code works on FireFox, but not IE 7 or 8:
This was a quickly typed example, so please ignore the lack of quotes around things etc… 🙂

<table border=1 width="100%">
<tr>
<td>testing
<table style="position: absolute;" border=1>
<tr>
<td>Child table</td>
</tr>
</table>
</td>
</tr>
</table>

But doing this does:

<table border=1 width="100%">
<tr>
<td><div>testing</div>
<table style="position: absolute;" border=1>
<tr>
<td>Child table</td>
</tr>
</table>
</td>
</tr>
</table>

What seems to be happening is that the table is considered a block level element while not-absolutely positioned (If you removed the absolute positioning the table would be under the “testing” string in the table cell) but when it is absolutely positioned it is considered to be a span element in relation to it’s parent cell… Absolute will just lift the element outside of it’s container element, but keep it in the same location… unless you specify otherwise.

So by adding the div around the “testing” text you are forcing the absolutely positioned element/table underneath the “testing” text and it will be lived outside of the parent container/element at that position.