Why are IE6 and IE7 not completely showing this div?

Question

I'm having problems in IE6 and 7 with a div that doesn't complete the bottom padding that is attributed to it, so doesn't appear to finish the div down to the white content area like required.

Here's the coded homepage with the problem.

http://qwibbledesigns.co.uk/preview/Softwear/

The div house's this content: Services : Design, Xhtml, Css, Flash Client : Newsletter Entrepeneur

I've tried display it as all sorts, clearing the div, and so on. I can't make heads or tails of it. Does anyone know what I can do to fix it?

Any answers are greatly appreciated =S

Answer 1

Try adding "overflow:auto;zoom:1;" to the CSS. That seems to fix most of these IE layout bugs.

Answer 2

It's one of the hasLayout bugs. The background doesn't properly continue to the bottom when the element is displayed inline. Here's a cite of the aforelinked site:

For inline elements (either inline by default like span, or having display: inline)

• width and height trigger hasLayout in IE 5.x and IE 6 or newer in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

• zoom always triggers hasLayout, but it's not supported in IE5.0.

As the doctype of your page is strict mode (standards compliance), your only resort is to give the element in question (the #quickinfo) a zoom style, apart from the obvious fix to display it as a block element (which is default for a <div> element).

#quickinfo {
    zoom: 1;
}