Something is wrong with my code, i'm not sure if it is my "sidebar.php" or my "Style.css"

 

Follow this link to my site and youcan see my "Welcome" has moved down and my sidebar has a gap at the top, anyone know what is going on?

 

 

sidebar.php

<!-- Start #Sidebar -->
<div id="sidebar">
<ul>
<li>
<h2>Latest Entries/news</h2>
<ul>
<li><a href="news_php.php">PHP Update!...</a><br /></li>
<li><a href="news_blog.php">Blog is now functional...</a></li>
<li><a href="news_welcome.php">WELCOME! First bit of news...</a><br /></li>
</ul>
</li>

<li>
<h2>Gallery Archives</h2>
<ul>
<li><a href="#">None Yet (0)</a></li>
</ul>
</li>

<li>
<h2>Links</h2>
</li>
</ul>
<div align="center"><a href="http://www.geekstogo.com/forum/index.php?showuser=227858"><img src="images/GTG.png" width="250" height="75" alt="GeeksToGo - Alex_McIntosh"></a></div>

<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</ul>
</div>
<!-- end #sidebar -->

 

 

Style.css

body {
margin: 0;
background: #43464D;
font-family: "Trebuchet MS", Arial, Helvetica;
font-size: 13px;
color: #58AFFF;
}
h1 {
font-size: 1.8em;
color: #FFFFFF;
}
h2 {
font-size: 1.4em;
color: #FFFFFF;
}
h3 {
font-size: 1em;
color: #FFFFFF;
}
h1 a{
color: #FFFFFF;
}
h2 a{
color: #FFFFFF;
}
h3 a{
color: #FFFFFF;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #52AF35;
}
a:hover {
background: none;
text-decoration: underline;
}
/* Header */
#header {
width: 940px;
height: 160px;
margin: 0 auto;
background: #48577D;
width: 100%;
}
/* Logo */
#logo {
float: left;
}
#logo h1 {
float: left;
margin-left: 40px;
padding-top: 85px;
text-transform: uppercase;
font-size: 2.6em;
}
#logo p {
float: left;
margin: 0;
padding: 102px 0 0 2px;
text-transform: lowercase;
letter-spacing: .2em;
font: bold 1.2em Arial, Helvetica, sans-serif;
}
#logo a {
background: #48577D;
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 940px;
height: 60px;
margin: 0 auto;
}
#menu ul {
margin: 0;
margin-left: 30px;
padding: 16px 0 0 10px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
margin-right: 3px;
padding: 5px 20px;
background: #48577D;
text-transform: lowercase;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
}
#menu a:hover, #menu .navigation a {
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/* Page */
#page {
width: 860px;
margin: 0 auto;
padding: 40px 0;
}
/* Flash */
#flash {
position: absolute;
left: 530px;
top: 25px;
height: 50px;
width: 500px;
}
/* Content */
#content {
float: left;
width: 560px;
height: 500px;
overflow: auto

}
.csoon {
text-align: center;
text-decoration: blink;
}
.post {
}
.post .title {
padding: 5px 0;
text-align: center;
color: #FFFFFF;
}
.post .title a {
background: none;
text-align: center;
color: #FFFFFF;
}
.post .meta {
padding: 2px 10px;
background: #48577D;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
text-transform: uppercase;
text-align: left;
font-size: 9px;
color: #7690CF;
}
.post .entry {
padding: 20px 0;
text-align: justify;
font-size: 1.2em;
}

/* Sidebar */
#sidebar {
float: right;
width: 258px;
background: #43464d;
border: 1px solid #D3D3D3;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li ul {
padding: 20px;
}

#sidebar h2 {
padding: 5px 10px;
background: #48577D;
font-size: 1.2em;
}
#sidebar p {
padding: 20px;
}
/* Footer */
#footer {
width: 940px;
margin: 0 auto;
padding: 20px 0;
background: #48577D;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #000000;
width: 100%;
}
#footer p {
margin: 0;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #000000;
}

It looks fine to me, you have an extra </ul> right at the bottom of your side bar which shouldn't be there

<!-- Start #Sidebar -->
<div id="sidebar">
<ul>
<li>
<h2>Latest Entries/news</h2>
<ul>
<li><a href="news_php.php">PHP Update!...</a><br /></li>
<li><a href="news_blog.php">Blog is now functional...</a></li>
<li><a href="news_welcome.php">WELCOME! First bit of news...</a><br /></li>
</ul>
</li>

<li>
<h2>Gallery Archives</h2>
<ul>
<li><a href="#">None Yet (0)</a></li>
</ul>
</li>

<li>
<h2>Links</h2>
</li>
<div align="center"><a href="http://www.geekstogo.com/forum/index.php?showuser=227858"><img src="images/GTG.png" width="250" height="75" alt="GeeksToGo - Alex_McIntosh"></a></div>

<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</div>
<!-- end #sidebar -->

Thats what ive done, it isn't any differnt

You've got 2 different top paddings

 

#logo p (line 62) {

padding-top: 102px;

 

and

 

#logo h1 (line 55) {

padding-top: 85px;

Oh yeah, it was changed somehow :S

 

Can anyone see what is wrong with the sidebar though?

Nope?

Works fine here, in FireFox 2.

solution

* { margin: 0; padding: 0; border: 0; }

 

Add that above the CSS...

 

Thanks forthe help.

Yeah it's always a good idea to use reset stylesheets just to avoid these issues