Friday, July 8, 2011

IE 8 and CSS: localhost vs rest of the world

Ok, I have to admit it, I'm not a big fan of Microsoft, but this time they really made me nuts!

One of the most common answer a software developer give against a defect is "it works on my machine" and we all know this is not really true as usually the answer should be "I didn't test this scenario", but this is not the case.
Yesterday I was trying to fix a layout problem in an HTML popup and I thought I had it sorted I then pushed the change into the team repository and the CI system had it built and deployed, but when the tester gave it a try.... it wasn't sorted. After 6 hours of research this is what I came to: Internet Explorer 8 switches between IE8 mode and IE7 mode depending if you are accessing the resource on localhost or with another name/address!

Let me make it a little more clear. Write a simple HTML page, the content does not really matter, and put it into any web server you like, I was using JBoss, but it doesn't really matter, the only thing you need is the ability to access the page both as localhost and with your IP address (this means that you have to start JBoss with -b

Now open IE8 and access that page using localhost, when it is loaded press F12 to load the Developer Tools and look at the last element in the menu bar, it should be like in the following picture:

Close both windows and repeat the same process but using your IP address in the URL, the result should be the following:

This is magic! It took me 6 hours to figure out what was the problem!
And if you are trying to layout stuff in a DIV using CSS, this small Document Mode change can make a huge difference in what it's rendered on the screen!

So imagine you, as a developer, see your code working as you expect, you push your changes and suddenly the page seems to appear wrong, again, and again, and again.... All the files are perfectly the same, on your machine and on the server you are checking against.... but what you see is different!

Thank you again Microsoft, now we can really trust our work. When it comes to IE8, the What You See Is What You Get paradigm is completely fulfilled!