Tue, 2011-06-21 22:17
I'm designing and developing a site with a fixed navigation bar at the top of the page. So far, I've tested the page in Chrome and IE, and IE displays it fine (ironic, isn't it?) while in chrome the bar isn't exactly at the top of the page: there is a small space above it. Does anyone know what the problem is? It's likely something simple I overlooked. Also, I'm fairly new to web designing, so please point out any inaccuracies in my markup or style.
Here is the CSS...
body {margin: 0; padding: 0; background-color: #000;} #wrap {width: 800px; margin: 0 auto; padding: 0; color: #FFF;} #topnav {position: fixed; margin: 0; padding: 0;} #topnav ul {width: 800px; margin: 0 auto; padding: 0; background-image: url("images/navbackground.png"); background-repeat: repeat; list-style: none; text-align: right;} #topnav ul li {margin: 0; padding: 0; display: inline;} #topnav ul li a:link {margin: 0; padding: 0;}
...and the HTML.
<!DOCTYPE html> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="style/style1.css" /> </head> <body> <div id="wrap"> <div id="topnav"> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="services.php">Services</a></li> <li><a href="portfolio.php">Portfolio</a></li> <li><a href="contact.php">Contact</a></li> </ul> </div> <p> Lorem ipsum.... </p> </div> </body> </html>
Thanks
