IE Issue - Height

[k09]

Hi,

My webpage displays correctly in Firefox. However, in IE9 the wrapper height is too large so contains too much whitespace.

To get it to display correctly in IE9 I have to change height: 100%; /* IE hack */ to 80%. But this in turn messes the view in Firefox.
Why is this? Sorry I am unable to post link at this time.

Thanks!

html{
height:99%;
}

body {
background: #eee url('../images/bg.jpg') repeat-x;
background-position: 20px 10px;
margin: 0;padding:0;  /* remove default margin being applied by the browser */
font-family: verdana, helvetica, sans-serif;
height: 100%; /* IE hack */
color: /*#71a200*/ #666;
}

p, ul{
	 font-size: 0.8em;
}

#wrapper {
				 position: relative;
				 margin: 50px auto;
				 padding: 0;			 
				 width: 800px;
				 border: 2px solid #ccc;
				 background: #F7F7F5 url('../images/main1.jpg') no-repeat;
				 min-height:100%; /* Mozilla Hack */
	       height:auto; /* Mozilla Hack */
}

* html #wrapper{height:100%;} /* IE - ensures min height */

[dresden_phoenix]

The QUICK FIX, if setting the height solves your issue, would be to use a conditional comment and load a style sheet for IE 9.

I don't see the logic in your CSS.

html {height:99%;} ( why only 99% of the browser window? whats with the other 1%?)
body {height: 100%; /* IE hack ?!?!?*/} really is needed everywhere, also it will only be 100% of the previous 99%

#wrapper {min-height:100%; /* Mozilla Hack... no it's not */
height:auto; /* Mozilla Hack, no it's not, it's a default ... get rid of this it's redundant */
}
* html #wrapper{height:100%;} /* IE - ensures min height ( this is the HACK for old IE. Because OLD IEs dont understand min-height and treat height as min-height anyway)*/

OK...
I am thinking that it's your HTML markup that's at fault. different browsers compensate for faulty markup differently and simple typos can cause catastrophic inconsistencies. I recommend you validate your HTML; you may find you an open tag somewhere, or something of that sort , is what is causing this error.

[sdleihssirhc]

What exactly are you trying to do? Set a wrapper to the full size of the viewport? Because there's a very easy way to do it that works in IE6, IE9, Firefox, etc:

html, body, #wrapper { height:100%; margin:0 }

What about that doesn't work? If I completely misunderstood, then we (or I, anyway) really are going to need a link to something.

[dresden_phoenix]

In compliant browsers, you can't set #wrapper to height:100%; as that would prevent #wrapper from expanding vertically when its content is more than the height of the viewport window.

The principle I was trying to explain before to use is this:

html, body { height:100%; margin:0 ; padding:0}
#wrapper {min-height:100%}
* html #wrapper, * + html #wraper { height:100%}/* for legacy IE: 6 & 7 */

Still I loathe hacks I would suggest conditional comments instead.

[deathshadow60]

Still I loathe hacks I would suggest conditional comments instead.

While I'm the exact reverse and would use EXACTLY what you have listed for code... since conditional comments are markup bloat and an extra handshake. Also, 7 has min-height so you don't have to send it to 7, just to 6-

html, body {
  height:100%;
  margin:0;
  padding:0
  position:relative; /* fix oddball Opera bug */
}

#wrapper {
  min-height:100%
}

* html #wrapper {
  /* IE 6- knows not the min-height, but incorrectly treats height as such */
  height:100%
}

NO reason to have the "* + html" version for 7.

Though really I think we need to see more of what it is the OP is trying to do -- we're guessing wildly here as the posted code makes little if any sense.

[pawska]

I ran into this exact issue myself, and discovered that having bottom margin on the wrapper with the min-height, is the problem. Remove it, and you should be set!