For some reason, over the past two weeks I’ve gotten a lot of complaints from our users about huge white gaps above the content area on our pages when viewed in IE (we use IE8). After some investigating, it turns out that the users all have the same problem: IE is set to compatibility view. I think some of them may be accidentally clicking it when going for the refresh button.
Anyway, it occurred to me that the page probably looks just as bad for IE7 users, so I was wondering if there was a fix for it?
An example page is here. If you view it in IE then enable compatibility view, you can see what happens. In the main content area, the content drops down until it’s level with the bottom of the nav menu on the left (which is positioned with float: left; and a percentage width).
If I change the nav menu to position: absolute; top: 0; left: 0; it solves the problem, but I have several pages where that menu is taller than the contents, so the menu gets the bottom chopped off, so that solution is a non-starter.
Anyone have any ideas? Is it even worth fixing? We do have a fair number of IE7 hits (probably other gov’t agencies) and quite a few of our own people have unknowingly had compatibility view enabled.