Hello everyone - I'm stumped

I'm using wordpress to create a website, i've wiped clean the index.php to create a design from scratch. I wanted to create a centered header that contains a logo flushed to the left, and below it a list as a navbar.

Here are two images showing the problem

FIREFOX




INTERNET EXPLORER





And here is the css code:

body {
margin: 0 0 20px 0;
padding: 0;
}

#page {
background-color: white;
margin: 0px;
padding: 0;
width: 100%px;
border: 1px solid #959596;
}

#topheader {
background-color:#FFFFFF;
padding: 0;
height: auto;
width: 800px;
margin: 0px auto;
border:#333333 1px solid;
font-size:18px;
font-weight:lighter;
color:#999999;

}


#logo {

background: #73a0c5 url('images/logo.jpg') no-repeat;
height: 90px;
border: solid 1px #FF0000;
}


#nav {
margin;
padding:0;
width:700px;
border: solid 1px #FF00FF;
width: 100%;

}


#nav li {
display:inline;
padding: 0 25px 0 25px;
margin:0;
border: solid 1px #FF0000;


}

We need to see ALL of the code or the URL to the problem page. We can't debug from an image.

You may want to take note that you have 2 widths for #nav.

Also, be sure to validate the code for errors, that always helps.

This site is helpful for learning lists which can be confusing http://css.maxdesign.com.au/listamatic/

Don't forget that when calculating widths that any borders count as part of the width too.

Hi Lenglain

This looks pretty weird to me:

body {
margin: 0 0 20px 0;
padding: 0;
}

I'm just doing a quick quess, but this looks to me that it puts a 20px bottom margin on EVERYTHING.

SOP is to reset the default padding and margins to "0" and then only add margins and padding when you need them.

All the Best
Wild Rose