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/So开发者_运维问答ftwear/
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
Try adding "overflow:auto;zoom:1;" to the CSS. That seems to fix most of these IE layout bugs.
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 havingdisplay: inline
)
width
andheight
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 thewidth
andheight
properties, and setting thewidth
andheight
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;
}
精彩评论