I'm sure you've all been there — you install IE7; fire it up and tentatively type in your web site's URL. You hit Enter and cross your fingers. Up comes your site. Quickly you scan the page. All looks good … no, there's a display issue. Damn!

Such was the case for me. This site had an IE7 display problem whereby the background color for the div containing my lists of links at the bottom of each page would not display.

Here's what it looked like:

Nice. For the longest time it eluded my admittedly perfunctory efforts to fix it. So, this weekend I decided to get serious and do some proper research into what could be causing it.

It actually didn't take that long at all, thanks to this excellent article on having layout. To quote:

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.”

Certain elements have layout by default in IE, but not the trusty <div>. However, layout can be applied to an element using a variety of CSS properties.

The one I chose to use, which became available with IE7 is

overflow: hidden;

And that's all it took. Now my lists of links look like this in IE7:

As far as I can tell there are no negative side affects in other browsers.

Further Reading

• Three reasons sites break in Internet Explorer 7
• Valid downlevel-revealed conditional comments
• Wake up and smell the IE7!
• IE7 CSS tweak show and tell

Posted on: November 27, 2006 | 5 Comments

Recent Entries in "CSS"

• Future-Proof Your Web Site Design by Planning Your CSS In Advance
• Create Resizable Images With CSS
• Quick Fix For IE7 Display Issues