trouble creating a simple header navbar!

[lenglain]

Hello everyone this is my first post.

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 flushed to the left, and below it a list as a navbar.

I think I'm close to getting it right - in Firefox.

In IE, a gap appears below the navabr list and the lower border of the header div. 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:auto;
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;


}

[rayquaza11]

The best way I've found to work around IE problems is to be very specific with CSS. The default CSS for IE and other browsers is different, so defining elements like margin, border, padding may fix these defaults. Also, add a unit of measure to the end of every number. (px, %, etc)

And make sure to check for errors in your css - in #page, notice the "width: 100%px;". There's always at least one of those in every newly designed webpage.

Or even better, have the website detect if the browser is IE, and display a message telling the user to get a decent web browser.