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.



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