IE8 Body not taking 100% height
In my application I am having problem to cover completely a page of the browser window in IE8.
The HTML:
<body class="body">
<div class="wrapper">
<div class="main-holder">
<form id="Form1" runat="server">
</form>
</div>
</div>
</body>
And the CSS:
.body {
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
-pie-background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
behavior: url(PIE.htc);
height: 100%;
}
.main-holder {
width: 1000px;
min-height: 600px;
margin: 10px auto;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #000;
box-shadow: 10px 10px 10px #000;
background: -webkit-gradient(linear, left bottom, left top, from(#F8AC25), color-stop(0.05, #FFF999), color-stop(0.5, #F8AC25), color-stop(0.95, #FFF999), to(#F8AC25));
background: -webkit-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
background: -moz-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
background: -ms-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
background: -o-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
-pie-background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
behavior: url(PIE.htc);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial Sans-Serif;
}
But in IE8 there are two white strips on top and bottom of the page. And for that reason the body is not covering the page completely, but in Firefox it does.
Screenshot IE8:
Screenshot Firefox:
In IE8 their is an offset around wrapper:
Any information will be very helpful to me.
Thanks.
Answer
The issue is probably due to the html or body element. Try this:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
Be aware that setting height to 100% will probably give you problems when the site flows out of the canvas so the scrollbars appear. The height will then still be 100% and probably cause issues with the overflowed content.