2 replies [Last post]
timerotor90
Offline
newbie
Boston
Last seen: 10 years 47 weeks ago
Boston
Timezone: GMT-4
Joined: 2011-06-21
Posts: 4
Points: 6

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

timerotor90
Offline
newbie
Boston
Last seen: 10 years 47 weeks ago
Boston
Timezone: GMT-4
Joined: 2011-06-21
Posts: 4
Points: 6

Fixed it

Turns out it was doctype trickery. All better now.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

You're using way too many

You're using way too many divs for such a simple layout.

Verschwindende wrote:
  • CSS doesn't make pies