Case study: How simple things can complicate your life
Posted March 22nd, 2010 in Developers by Krzysztof StaszyszynSome time ago I had to deal with quite strange problem. I was working on web application, which should support Internet Explorer and Firefox. In one of its pages, there was a table. The problem was, that this table would contain very long words, which should be wrapped somehow and do not brake the layout. I seemed that solution was very simple: use word-wrap: break-word CSS attribute with combination of width attribute. But as it turned out, it was not so easy.
Initially, this part has been taken by my colleague. After he has published the application on the development server and tested it, we have asked customer to do his tests. Quite soon customer reported, that in IE 8 the layout of this table was broken. But for my colleague, everything was still ok – I have seen this, he didn’t cheat.
Helping in bugfixing, I have taken this. I have checked on the server, and customer was right. I have launched this application locally using Visual Studio and it was ok. The first impression was, that it is something wrong with the server, or maybe there are some differences between IIS server and web server which is build in Visual Studio. But how it would affect the CSS layout which is rendered by the browser on the client side? Quite strange…
I have published the application on IIS server on my computer. What made me confused, was that when I was opening the application using name of my computer in URL, the layout was broken. But when I opened the application using the localhost in URL, everything was ok. Why the same application, hosted on the same server looks differently depending on the URL which is used to open it. And why this happens only in IE 8? Quite strange…
I have spend few hours to find out why this would happen. Finally I have found: Internet Explorer 8, has feature which is called compatibility mode. While working in compatibility mode, it simulates IE 7. What is interesting, is that you can predefine, when it should work in compatibility mode, and when you work in this mode on predefined URL, the icon which informs you about this fact (small icon near refresh button) is not displayed at all. My IE has been set up to work in compatibility mode for all hosts beside the localhost. So when I was launching the application locally, it has been rendered in IE 8 mode, but when I opened in on the development server, or on my IIS using host name, it has been rendered in IE 7 simulation mode.
Knowing this it took few minutes to solve the problem. There was a bug in the html, which caused that table was not displayed correctly in IE 7. It was enough to make application compatible with IE 7 too, and problem was fixed.
The cause of the problem was very simple. The solution too. It was also very easy to avoid this problem: if we would pay more attention to testing in IE 7, the problem would never happen. Despite this, I have wasted almost a half of the day trying to solve it. The moral from the story from above is the following: pay more attention to testing in different version of Internet Explorer, and if you are working with Internet Explorer 8 always verify in which mode you are.
Tags: compatibility mode, CSS word-wrap, Internet Explorer 7, Internet Explorer 8
The is a nice trick to solve this problem: using a simple meta declaration, we can specify the rendering engine we would like IE8 to use. For example, inserting this:
into the head of a document would make IE8 render the page using the new standards mode. This syntax could be easily expanded to incorporate other browsers as well: