This post is written by guest blogger Albin Sunnanbo. He’s a great friend and source of inspiration and also one of the best developers I know. It was Albin that first introduced me to LINQ, EF Migrations and jQuery that I now use daily.
Recently I had trouble with Twitter Bootstrap in IE7.
We had recently built a new version of Twitter Bootstrap from less files with Chirpy instead of using the official CSS files and suddenly the whole layout broke down in IE7. All other browsers looked OK, including IE9. At first sight It looked like the CSS files had not loaded at all in IE7.
I started debugging in IE9 by opening the debug tools and switched Document Mode to IE7.
Now the error occured in IE9 too. When inspecting HTML elements I saw that the elements had some styles from bootstrap.css in IE7 mode, but not all the styles they had in IE9 mode.
Suddenly I realized that my problem had gone from bad to worse. From just a CSS in IE7 incompatibility issue to a CSS parse error deep inside the browser with no obvious debugging tools at hand.
I started out with by trying to find out what styles that had parsed correctly and what styles that were missing, but I couldn’t identify a system. I also opened up the CSS files in the debug tool, here it how it looks in IE9 and IE7
Still scratching my head a helpful colleague of mine came by and asked if I had tried the save button. What save button?
We saved the css file while we were in IE7 mode. Then we switched back to IE9 mode and saved again, to another file. We then fired up our favorite diff tool with the two saved files hoping for some luck.
And luck we had!
The debug tool had saved the CSS files in the way it had parsed the files:
We found that IE7 had stopped parsing the CSS files just a little bit below the middle.
We could see exactly where in the diff tool and go back to our original css files and fix a couple of syntax errors in the CSS and finally our layout flipped back to normal in IE7 too.
Problem fixed and another odd tool added to my debugging toolbelt.