markdlv77
12-15-2007, 07:15 PM
This is a simple example to illustrate my problem:
<html>
<head>
<style type="text/css">
#container {position: absolute; left: 50%; width: 400px; margin-left: -200px; border: 1px solid orange;}
#content {margin-top: 75px;}
#nav {position: fixed; top: 0; width: 400px; border-top: 1px solid orange; border-bottom: 1px solid orange;}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<a href="">home</a>
<a href="">about</a>
<a href="">contact</a>
<a href="">products</a>
<a href="">links</a>
</div>
<div id="content">
<h1>This is content!</h1>
<p>Accomplishing this is somewhat challenging because of the way that elements are centered horizontally in CSS.
A number of centering options exist. I'm going to use what's known as the negative-margin approach to horizontal
centering. Although it's not the preferred method according to CSS best practices, it is the most supported
across browsers.</p>
</div>
<p style="margin-top: 1000px;">Hello</p>
</div>
</body>
</html>
When I run this in MSIE it works great, just like I want it to - the #nav section stays on the top of the PAGE when you scroll down. In Firefox, however, the #nav sections stays on top of the SCREEN when you scroll down (virtually scrolling down with you). Why does that happen and how can I fix that? Thank you.
peace,
mark
<html>
<head>
<style type="text/css">
#container {position: absolute; left: 50%; width: 400px; margin-left: -200px; border: 1px solid orange;}
#content {margin-top: 75px;}
#nav {position: fixed; top: 0; width: 400px; border-top: 1px solid orange; border-bottom: 1px solid orange;}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<a href="">home</a>
<a href="">about</a>
<a href="">contact</a>
<a href="">products</a>
<a href="">links</a>
</div>
<div id="content">
<h1>This is content!</h1>
<p>Accomplishing this is somewhat challenging because of the way that elements are centered horizontally in CSS.
A number of centering options exist. I'm going to use what's known as the negative-margin approach to horizontal
centering. Although it's not the preferred method according to CSS best practices, it is the most supported
across browsers.</p>
</div>
<p style="margin-top: 1000px;">Hello</p>
</div>
</body>
</html>
When I run this in MSIE it works great, just like I want it to - the #nav section stays on the top of the PAGE when you scroll down. In Firefox, however, the #nav sections stays on top of the SCREEN when you scroll down (virtually scrolling down with you). Why does that happen and how can I fix that? Thank you.
peace,
mark