IE Issue - Height

HTML & CSS
1

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 */
2

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.

3

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.

4

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.

5

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.

6

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!