My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto.
I've noticed that when I resize the browser window, the scrollbar slowly disappears.
Is there a way to fix this issue? Are there any possible hacks or workarounds?
I am working with Firefox 19.0, Chrome version 26.0.1410.12, and IE9.
Below is the full code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overflow-Based Layout</title>
<style type="text/css">
<!--
/*CSS goes here*/
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Clients</a>
</li>
<li>
<a href="#">Case Studies</a>
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<!-- More fieldsets and form elements go here -->
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>