#nav won't stay on top
This is a simple example to illustrate my problem:
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.Code:<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>
peace,
mark
CSS Codes
Reply With Quote
Originally Posted by W3Schools
Bookmarks