Showing two screen captures demonstrating the effect with a small viewport that requires scrolling.
This is how the HTML code appears: (excluding head and html tags)
<body>
<div id="grad1"></div>
<div id="wrapper">
<header>
<h1 class="logo"><a href="/">Business Name</a></h1>
</header>
<nav>
<ul>
<li><a class="first" id="index" href="/index.php">Home</a></li>
<li><a id="whatwedo" href="/whatwedo.php">What we do</a></li>
<li><a id="communicating" href="/communicating.php">Communicating</a></li>
<li><a class="last" id="contact" href="/contact.php">Contact Us</a></li>
</ul>
</nav>
<div style="clear:both;"></div>
<section>
<?= $content ?>
</section>
<footer>
© 2010
</footer>
</div>
</body>
A snippet of the CSS related to body, grad1, and wrapper is as follows:
body {
color: #111;
background-color: #3E9C9D;
}
#grad1 {
height: 600px;
position: absolute;
top: 0;
left: 0;
z-index: -100;
width: 100%;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
}
#wrapper {
max-width:960px;
min-width:840px;
margin: 0 auto;
}
Any suggestions on how to resolve this issue? The gradient needs to be on a separate div for specifying its height.
(Acknowledging that the CSS gradient may not function in IE - there's a background-image serving as an emulation. However, it encounters the same problem.)