Small CSS Issue with IE

rsmith

I'm still fairly new to CSS - finally breaking away from tables. I've searched for this and found supposed hacks but implementing them for IE still isn't working. That or I'm a re-re. Either way, I'm sure it's something simple.

I have

.central{
	background-color: #ffffff;
	height: 100%;
	width: 65%;
}

Which creates a white DIV centered on the page. This works perfect in both browsers. The problem is I need it to stretch from top to bottom. The issue is that IE ends the DIV once the content inside it stops. So if there's only one or two lines, then you end up with a box that doesn't reach the bottom of the window.

TIA.

cretaceous

yes that's a known pita.. where tables solve it instantly

there's hacks and workarounds to get IE to know how to deal with it
basically the div does not know where to get the 100% height info from.. 100% of what it says to itself...

one ugly hack involves setting heights of 100% on body and whatever descendant divs there are
then there's javascript and weird css concoctions

the normal fix is the min-height value which usually involves a hack to get IE to use different details from FF and the rest - google 'min height internet explorer'

you can use css2 styling
display:table which along with display:table-cell kind of emulates a table cell - that's the simplest one that works well, if you can guarantee users are on recent browsers (IE 8 and up)

(note it's not a table , just a metaphor, so the CSS zealots can't call out the inquisition on it - also note it cant handle the rowspan or colspan concept)

rsmith

Thanks for the quick response. I searched as you suggested and found this page:

http://www.cssplay.co.uk/boxes/minheight.html

My snippet of CSS now looks like this based on the article:

.central{
	background-color: #ffffff;
	height: 100&#37;;
	width: 65%;
}

* html .central{
	height: 100%;
}

But I am still having the same issue.

cretaceous

if that really is the page you looked at then you havent copied the code correctly!!

I dont see any thing for "min-height" in your css and where is "height:auto" in your container css

you NEED the mixture of slashes and backslashes above and below the lines intended to befuddle IE

rsmith

Aha... Okay, so here's my entire file so far.

body{
	font-family: Calibri, Arial, Verdana, Tahoma; color: #000000; font-size: 12px;
	margin: 0; padding:0;
	background-color: #04174D;	
}

.central{
	background-color: #ffffff;
	min-height: 100%;
	height: auto;
	width: 65%;
}

/* FOR IE */
/*\*/
* html .container{
	height: 100%;
}
/**/

Still nothing. The .central div doesn't reach the bottom of the page, instead you see the blue background below where the div ends

cretaceous

I think you need to set height values with actual measurments of pixels or ems
it also depends on how the rest of the page is built and you need to experiment

you should find a page on the web where the result is actually setting height to 100% - the one you mention is not doing that

but I did recommend the css2 style 'display: table' etc

johanafm

You need to set the height to 100% for html, which means the selector rule is html, not html (which refers to an html element as a descendant (child, grand-child, ...) of any other element. In HTML, the root element is html, which in turn contains a head element and a body element. Since there should be only one body element, "html body", "html > body" and "body" should do the same thing.

<style type="text/css">
html, body, div {
	height: 100%;
}
div {
	background-color: #CCC;
}
</style>
</head>
<body>
	<div>
		hello
	</div>

No special fix included above, but it works in IE8, and most likely IE7 as well. If you really do need to deal with IE6, I'm guessing dropping the * from the selector "* html" would make your special fixes work in IE6 as well.