I've just created my first site with XHTML & CSS and it validates, however in IE7 my Navigation bar which should sit flush with the top of the page gradually jumps out of position even though it works fine in Firefox, Safari.

 

My site is www.bazhodson.co.uk just wondering if anybody knows whats causing this, i'll copy my CSS file below.

 

body {

background-image: url(images/background.jpg);

background-position: top center;

background-repeat: no-repeat;

font: 85% arial, helvetica, verdana, sans-serif;

line-height: 1.25;

margin: auto;

color: #ffffff;

}

 

 

b {

color: #f1e73a;

}

 

 

 

a {

outline: none;

}

 

 

 

h1 {

color: #f1e73a;

font-weight: bold;

font-size: 1.6em;

}

 

h2 {

color: #f1e73a;

font-weight: bold;

font-size: 1.4em;

}

 

h3 {

color: #f1e73a;

}

 

img {border: none;}

 

 

#container {

 

width: 750px;

margin: auto;

}

 

#header {

margin-top: 15px;

width: 300px;

height: 50px;

float: left;

}

 

#nav {

height: 125px;

width: 450px;

overflow: hidden;

float: left;

}

 

#nav ul, li {

padding: 0px;

margin: 0px;

list-style: none;

}

 

.home {

display: block;

width: 90px;

height:125px;

background: url(images/navbar/home.png);

background-repeat: no-repeat;

background-position: -180px 0px;

overflow:hidden;

float: left;

}

 

.about {

display: block;

width: 90px;

height:125px;

background: url(images/navbar/about.png);

background-repeat: no-repeat;

background-position: -180px 0px;

overflow:hidden;

float: left;

}

.services {

display: block;

width:90px;

height:125px;

background: url(images/navbar/services.png);

background-repeat: no-repeat;

background-position: -180px 0px;

overflow:hidden;

float: left;

}

.portfolio {

display: block;

width:90px;

height:125px;

background: url(images/navbar/portfolio.png);

background-repeat: no-repeat;

background-position: -180px 0px;

overflow:hidden;

float: left;

}

 

.contact {

display: block;

width:90px;

height:125px;

background: url(images/navbar/contact.png);

background-repeat: no-repeat;

background-position: -180px 0px;

overflow:hidden;

float: left;

}

 

a.home, a.about, a.services, a.portfolio, a.contact {

background-position: 0px 0px;

}

a.home:hover, a.about:hover, a.services:hover, a.portfolio:hover, a.contact:hover {

background-position: -90px 0px;

}

 

#intro {

background: url(images/intro.png);

background-repeat: no-repeat;

margin-top: 20px;

width: 750px;

height: 155px;

float: left;

}

 

#info_box {

margin-top: 130px;

width: 750px;

height: 400px;

overflow: hidden;

}

 

a:hover{

text-decoration: underline;

color: #f1e73a;

}

 

 

 

#info_box ul li {

padding: 0px;

margin: 0px;

list-style: square;

}

 

#contact_text{

margin-top: 20px;

margin-left: 70px;

width: 300px;

float: left;

}

 

#contact_form{

margin-top: 20px;

margin-left: 50px;

width: 300px;

float: left;

}

 

#contact_form b{

color: #ffffff;

}

 

#footer {

margin-top: 40px;

display: block;

background-color: #36586e;

width: 750px;

height: 16px;

font-size: 10px;

color: #ffffff;

padding: 5px;

}

 

#footer a {

color: #ffffff;

 

}

 

#footer a:hover {

color: #f1e73a;

}

 

#footer #altnav {

width: 350px;

float: right;

text-align: right;

}

try to add

#nav {

position:relative;

margin-top:0

}

try to add

#nav {

position:relative;

margin-top:0

}

 

 

 

 

Cheers Noxx i'll give that a try.

or if this doesnt work, add margin-top:0; to each nav class.

or if this doesnt work, add margin-top:0; to each nav class.

 

 

These don't seemed to have worked, anyone got any other suggestions.