IE Issues with Name and Id Attributes

After building a site in FireFox that uses the "document.getElementById" to fetch a DIV, the engineer switches over to IE, only to find that the same call is returning a different element (most likely an A or INPUT element). After hours of debugging and frustration, said engineer gives up and instead starts writing a virus to uninstall IE from infected computers and replace it with FireFox (please do, I will donate!). Does that sound familiar; for reasons such as this, I frequently fantasize about destroying IE. However, if you experience this issue, you can lay your thoughts of mass destruction to rest, because there is a simple solution: change the ID of your DIV to not be the same as the NAME of another element on the page.

Internet Explorer developers decided a while back (I think as far back as IE 4) that "document.getElementById" should not only return elements with a matching ID, but also a matching NAME. So if you have a DIV with the ID of "testId" and an INPUT, before the DIV on the page, with a NAME of "testId", then "document.getElementById" will return the INPUT in IE and the DIV in all other browsers. This was a very, very bad decision, as NAME is most definitely not an ID and a NAME attribute does not need to be unique while an ID attribute does. However, we all have to live with it (at least until someone writes that virus or Microsoft starts making better software).

The solution is when engineering/designing a webpage, always consider the NAME attributes to be part of the ID attribute unique namespace. Therefore, no ID should ever share the same value as any NAME attribute. Also, keep in mind that these attributes are case-insensitive so a name of "TESTID" is the same as an ID of "testId".

Here is a little test page that illustrates this issue.