CSS to WP - CSS problems now

HTML & CSS
1

I’m in the process of converting an HTML/CSS theme I made into Wordpress. This is my first time converting to Wordpress, I’m just trying to do something basic.

I noticed in Chrome, after I put in a PHP command, the header seems to have been pushed down on the page. But when I look in Firefox and IE it looks fine.

And here it is live: www.seelooh.com

Looking to see if anyone can possibly see the problem, here is the CSS and HTML:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

    <LINK href="<?php bloginfo('stylesheet_url'); ?>"/style.css" rel="stylesheet" type="text/css">


<?php wp_head(); ?>
</head>
<body>

	<div id="header"> <!-- Begin Page Header OUTSIDE of the Wrapper Div -->
	
		<center><h1>Seelooh Designs</h1></center>
		<center><h2><?php bloginfo('description'); ?></h2></center>
		
		
		<ul id="nav">
			<?php wp_list_pages('title_li='); ?>
		</ul>

	</div> <!-- End Header Div Outside of wrapper Div -->
    
    <div id="wrapper"> <!-- Begin Wrapper Div to hold content --> 
	
    
    	<div id="mainContent">
		
		<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
		
		<div id="postclass">
			<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <p class="authordate">posted by <?php the_author();?> on <?php the_date(); ?></p>
			
            <img src="<?php echo bloginfo('template_directory') . '/images/postimage.jpg'; ?>"
            <p><?php the_content('read more...'); ?></p>
            
            <div id="split"></div> <!-- Content Divider -->
            </div> <!-- End Post class-->
            
            <br/>
		
		<?php endwhile; ?>
		
		<?php else : ?>
			<p>I'm not sure what your looking for</p>
		
		<?php endif; ?>
		
		
        	
            
           

            
           <h2>&nbsp;</h2>
</div> <!-- End Main Content -->
        
        <div id="sideBar">
		
			<h2>Advertisements</h2>
			 <img src="<?php echo bloginfo('template_directory') . '/images/ad.jpg'; ?>"
			 <img src="http://www.sitepoint.com/forums/images/ad.jpg" />
			 <img src="http://www.sitepoint.com/forums/images/ad.jpg" />
			 <img src="http://www.sitepoint.com/forums/images/ad.jpg" />
			 
             
             <div id="split2"></div> <!-- Side Bar Divider -->

            <h2>Follow me</h2>
            <b>Do you social media? Follow me on Twitter!</b>
            <p>@cluongoatl</p>
            
           


        
        </div> <!-- End Sidebar -->
    
    
    </div> <!-- End Wrapper Div For Content Holder --> 
    
</body>
</html>

CSS

/*
Theme Name: Greenblog
Theme URI: http://seelooh.com
Author: Christopher Luongo
Author URI: http://seelooh.com
Description: Greenblog is a custom HTML/CSS theme by Chris Luongo, converted to Wordpress for his joy, not yours!
License: Private 
License URI: license.txt
Tags: personal, theme
*/

/* 
-------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #f6f4de;
	color: #1B1C1E;
	font-family: Verdana, Geneva, sans-serif
}

#header {
	background-image: url('images/header.jpg');
	height: 200px;
}

#wrapper {
	width: 960px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	padding-top: 5px;
}

#mainContent {
	float: left;
	width: 625px;
	height: 100%;
	background-color: #9d9c8a;
	margin-right: 5px;
	padding: 0 5px 0 5px;
}

#sideBar {
	float: right;
	width: 310px;
	height: 100%;
	background-color: #9d9c8a;
	text-align: center;
	padding: 0 5px 0 5px;
}

p {
	font-family: Georgia, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.4em;
	color: #1B1C1E;
	text-indent: 25px;
}

p.authordate {
	font-family: Georgia, serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 2em;
	text-indent: 5px;
}

h1 {
	color: #596365;
	font-size: 44px;
}

a {
	color: #596365;
	font-size: 14px;
	text-decoration: none;
}

a:hover {
	color: #fff;
}


h3 {
	font-family: Georgia, serif;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.4em;
	color: #000;
}

#nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	margin-top: 80px;
}
	
#nav li {
	display: inline;
	padding-right: 30px;

}

#nav a {
	text-decoration: none;
	font-family: Cambria, serif;
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.3em;
	color: #596365;
}

#nav a:hover {
	text-decoration: none;
	font-family: Cambria, serif;
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.3em;
	color: #000;
	border-bottom: 1px dotted rgb(102,102,102);
}

#split {
	background-image: url(images/split.jpg);
	height: 1px;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3px;
	margin-top: 3px;
}

#split2 {
	background-image: url(images/split.jpg);
	height: 1px;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3px;
	margin-top: 3px;
}

#footer {
	width: 100%;
	height: 100px;
	background-color: #fff;
}
2

Viewing here, the header looks similar in Chrome, Safari, Firefox and IE6-9.

[CENTER]Seelooh Designs
Just another WordPress site
[gap of approx same size as both lines of text above]
[menu above horizontal border on background image][/CENTER]
Could be cache related. Have you tried refreshing or restarting Chrome?

The page has some validation errors worthy of your attention.

3

Hm I’ll try clearing my cookies and what not on Chrome.

Yessir just trying to see how to implement WP for now, not too worried about w3 validation at the moment, thanks though.

4