div tags are not reaching the bottom of the container in IE6 and IE7

[Sword Dancer]

Hi all, I am new to the forums, and I am stuck on why my div tags are not reaching the bottom of the container in IE6 and IE7.

This is how it looks in IE6 and IE7:

ie6.jpg

This is how it look in IE8, IE9, IE10, Chrome, FireFox, Safari, and Opera

ie8.jpg

Here is my CSS code:

#container {
	margin: 0 auto;
 	width: 960px;
 	border: 1px solid #000000;
	background-color: #FFFFFF; 
}

#main-content {
	background: #A4CDDD;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 16px;
	margin-bottom: 10px;
	margin-left: 10px; 
	margin-right: 10px;
	margin-top: 0px;
	min-height: 1000px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 16px;
	width: 880px;
	height: 1000px;
	border-radius: 30px;
}

I know that not a lot of people use IE6 and IE7, but I am so close to making look the same across the board.

Thanks in advance! :-D

[Paul O'B]

Hi,

Welcome to Sitepoint

I'm not seeing that behaviour in the code you presented. All browsers are showing a 10px margin at the bottom.

Your drawing is showing IE6/7 with round corners but border-radius is only supported in IE9 so you must have additional code for the corners which is probably the issue. However without full code and CSS (or a link) it will be hard to make a diagnosis.

Generally though its a very bad idea to set a height on your container unless it holds something like a fixed height image only. If the container holds text-content then let content dictate the height and not the css. If you are using the height to make equal columns then you will need other methods such as "faux columns".

Also note that is of no use to have these two styles in the same rule when they have the same units.

min-height: 1000px;
height:1000px;

All you get is height:1000px and no more or less.

[Sword Dancer]

Thanks Paul for replying to my post!

I am using curvy corners for the rounded edges for IE6, IE7, and IE8.

Here is a direct link to my CSS file and to my site.

Thanks again!

[Paul O'B]

Hi,

You have an empty element at the bottom of that section (#footer) which takes up space in IE7 and under as they always render an element to at least the current font-size/line-height (when is haslayout mode). If you are not using that element for anything then remove it. If you are using it for clearing then there are better methods than using an empty element (such as overflow:hidden on the parent container - see css faq on floats for more info).

Alternatively you could set the height to zero and hide the overflow and the footer will collapse to nothing. However its best to remove it if its not needed.

You should also look at removing the height from your containers as that 1000px looks a little silly.

#footer{overflow:hidden;height:0}

[Sword Dancer]

Thank Paul!!!