IE7 content disappears

This is not a complaint – it is the solution to an issue that has been puzzling me over the weekend.

IE8 has been out for a long time – which does not necessarily mean that corporations has implemented it yet. Some large corporations tend to make their business depend on current browser versions – not allowing them to upgrade the browsers on their pc’s without extensive testing and some time expensive application upgrades. I know of at least 5 danish companies who still doesn’t dare to take the plunge from IE6 (!)

I usually develop web-stuff having booted Ubuntu running Firefox – then once in a while boot Windows and test with the latest IE, Safari, Chrome and Firefox. I leave it to others to test on Mac’s. If I am unsure how something renders on other platforms, I can recommend browsershots.org – a cool service that renders a specific URL in any browser on any platform and allow you to see the screenshots after a while.

In this case the client is at IE7. The layout has a header, a content area and a footer – very simple stuff. It looks fine i all browsers – except for IE7. For this particular browser the content section wouldn’t display. Even IE7 displayed the area. The space was allocated but it was blank. This article on webmasterworld.com gave a few tips:

1. add

   * { zoom: 1.0; }

   to the css (this did not make a difference for me)

2. add

   position: relative;

   to the

   #wrapper

   in the css

Tip 2 made all the difference. #wrapper is a div that wraps around all the content on the page. Not knowing the inner workings of IE7, I can only guess why this fixed the issue – just hope Google finds this post for you if you run into the same problem.