My current client is switching from IE 6 to 8 for their primarily ExtJS web application. I've been working on debugging some IE8 issues and had a peculiar problem where tables were refusing to display. At first I thought this was due to some bad markup, but using the new Developer tools in IE8 revealed that the elements were, in fact, present in the HTML.

I tried forcing the table to show by setting some styles via CSS, thinking I might have a layout issue, but nothing worked. I started to get pretty worried that a style being set by ExtJS was causing the issue and didn't know how I could fix it. I decided to try viewing the page in IE's "Compatibility Mode", since I knew this page worked in IE6, before digging through ExtJS. Lo and behold, the table reappeared.

So what was the difference? At the top right of the Developer Tools window are 2 menu items: Browser Mode and Document Mode. Changing Browser Mode lets you view your webpage as if you were using either IE7, IE8, or IE8 in Compatibility Mode. Changing Document Mode (between Quirks, IE7 Standards, and IE8 standards) changes the page's layout mode via DOCTYPE or tag.

This proved to be the key I was searching for. By default, my page was being displayed in Quirks mode which resulted in my tables not displaying. All I had to do to force my pages to display in IE8 Standards mode was to add a tag in the head of my pages. Be sure to put the tag before all other elements (other than title) or it won't get picked up.

So if you have some elements that are not displaying when you test your site with IE8, try different Document Modes through the Developer Tools first and possibly save yourself some time.

For more information, check out these links: