Navigation not aligning correctly

HTML & CSS
1

Hi guys.

My navigation will not line up properly - the first item in the nav seems to get pushed down but all the others are fine? Not sure why i’d really appreciate if someone could work out whats going on.

Here’s the error:

Here’s the HTML for this section.


<div id="header">
			<div id="logo">	<br><br><br><br>
				<h1><a href="#"><img src="images/logo1.jpg" height="150" width="350"></h1>
				<p><img src="images/banner.jpg"></p>
		</div>
	</div>
</div>
	<!-- end #header -->
	<div id="menu">
		<ul>
			<li class="current_page_item"><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Photos</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<!-- end #menu -->

Here is the CSS that controls it.


#menu {
	width: 940px;
	height: 30px;
	margin: 0 auto;
	padding: 75px;
	
}

#menu ul {
	margin: 0;
	padding: 30px 20px 50px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	margin-right: 1px;
	padding: 13px 20px 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bolder;
	color: black;
	border: none;
}

I’m at my wits end with it! I don’t know how it happened but I cant fix it.

If you can help i’d be so gratefull!!!

Regards

James

2

If you remove current_page_item, does that change anything?

3

As kohoutek said, something else is at play here. You have no CSS posted there that would differentiate the items.

If the above suggestion doesn’t work, we will need more code to go off of (or MORE preferable, a live site to look at :)).

4

Removing the class id doesn’t change anything. Here is some more code:


<body>
<div id="wrapper">
	<div id="header-wrapper">
		<div id="header">
			<div id="logo">	<br><br><br><br>
				<h1><a href="#"><img 

src="images/logo1.jpg" height="150" width="350"></h1>
				<p><img src="images/banner.jpg"></p>
		</div>
	</div>
</div>
	<!-- end #header -->
	<div id="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Photos</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<!-- end #menu -->
	<div id="page">
		<div id="page-bgtop">
			<div id="page-bgbtm">
				<div id="content">
					<div class="post">
						<h2 

class="title">TODAYS TOP QUESTION</h2>
						
						<div class="entry">
							<p><img 

src="images/img03.jpg" width="186" height="186" alt="" class="alignleft 

border" /><p><strong><h3>Cheryl Cole, Blonde or 

Brunette?</strong></h3></p>

and some more CSS


body {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(images/img02.gif) repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #402C16;
	border-width: 40px;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: black;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}

hr {
	color: black;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #2E9F13;
}

a:hover {
	text-decoration: underline;
}

img.border {
	border: 6px solid #EEE7DF;
}

img.alignleft {
	float: left;
	margin-right: 15px;
}

img.alignright {
	float: right;
}

img.aligncenter {
	margin: 0px auto;
}

#wrapper {
	margin: 0 auto;
	padding: 0;
	background: url(images/img03.gif) no-repeat center top;
}

/* Header */

#header-wrapper {
	height: 240px;
}

#header {
	width: 960px;
	height: 240px;
	margin: 0 auto;
}

/* Logo */

#logo {
	vertical-align: middle;
	margin-right:35px;
	display: inline-table;
	float: left;
	height: 30px;
	margin: 0;
	padding: 0px;
	color: #1A1A1A;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0;
}

#logo h1 {
	float: left;
	padding-top: 100px;
	padding-left: 30px;
	letter-spacing: -1px;
	text-transform: lowercase;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 64px;
	color: #1A1A1A;
}

#logo p {
	
	margin: 0;
	padding: 30px 0 0 34px;
	text-shadow: #808080 -1px 1px 2px;
	font: normal 18px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #1A1A1A;
}

/* Search */

#search {
	float: right;
	width: 280px;
	height: 100px;
	padding: 0;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 60px 0 0 30px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 195px;
	padding: 6px 10px;
	border: none;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #7F7F81;
}

#search-submit {
	display: none;
}

/* Menu */

#menu {
	width: 940px;
	height: 30px;
	margin: 0 auto;
	padding: 75px;
	
}

#menu ul {
	margin: 0;
	padding: 30px 20px 50px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	margin-right: 1px;
	padding: 13px 20px 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bolder;
	color: black;
	border: none;
}
5

You have not closed <a> in your <h1>. I’d run your code through the validator first and fix the markup. See if that fixes the issue.

6

Thank you, sometimes a second pair of eyes helps!

James