IE - object does not support property or method

Have you ever experienced the error message I wrote in the title? Are you hitting the walls with your head wondering what the frak it means? This post might be useful to you!

I wrote a page that worked seemlessly inside every know browser but Internet Explorers. Well, nothing new under the sun, web developers' work consists mainly in making things run inside that shit.

Anyway, I was surprised by the nature of the error message: "object does not support property or method", raised during a getElementById call:

foo = document.getElementById("foo");

Element "foo" was a DIV placed in the middle of the page.

So I asked to myself: "what is IE trying to say?". If it really meant that a method wasn't supported, therefore it had to be the getElementById() function, because no other method was involved. But I'm pretty sure that document object HAS a getElementById method. 

The other possibility is the lack of support for the property... but which one? The foo variable?? Yay man! The correct answer is this: you cannot give a variable the name of an element's id. By renaming the variable everything works correctly.

baz = document.getElementById("foo");

Here we go. Do you think this is nonsense? Well, so do I. 

• First, there's no reason why an HTML element should interfere with javascript variables. 
• Second, the error raised is totally incomprehensible and misleading. 
• Third, it's incredible that in 8 versions of IE Microsoft did not think of fixing this.

Inline-block and Internet Explorer

I use to collaborate with the press office of the University. In particular, I was asked to develop a sort of enhanced, multidimensional, collaborative "address book" that they use as a database of journalists.

During the development process they often changed requirements, with the result that the project grown way too much. In order to keep the user experience pleasant I did my effort to allow high interactivity to the operators, giving them a very intuitive interface. I do think that one of the best interfaces for contacts collection and relationships definition remains the Facebook's one. In particular, I love the way it displays collection of items as set of icons, in a web 2.0 fashioned way.

To obtain this kind of representation, I used HTML lists and set items' display property as inline-block. Bad idea: Internet Explorer (even the 8!!) does not understand it. Well, the latest release (that is supposed to be CSS 2.1 compliant) actually understands it, but only if the object is natively an inline, which is weird.

So, here comes the workaround:

display: inline-block; 
zoom: 1;
*display: inline;   

This fixes everything.