navbar header problem with IE

[lenglain]

Hello everyone!

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;


}

 

[Paultbk]

My guess would be in the li css

padding: 0 25px 0 25px;

Your padding each li bottom at 25px; It goes padding:top bottom right left;

If setting that to 0 doesn't do the trick paste in your html and I can take a better look

also in your page div you have

width: 100%px;

 

[lenglain]

Wow i'm so stupid, thanks a lot, I had seen the padding values but I thought the order was Top Right Bottom Left. But if that's the case, how come Firefox didn't reflect those values?

 

[Paultbk]

Glad to help...not exactly sure why ff and ie do this differently. FF follows WC3 standards wheras IE does not so there can be a lot of differences in the way each browser renders the css. If I come across a better explanation I'll post it here

 

[lenglain]

After I tried your suggestion, I still had issues with my header but I didn't have time to follow up on here. but here I am again. I am unable to even get started with my site because of this silly problem right at the beginning.


INTERNET EXPLORER 8

FIREFOX

AND THIS IS THE CODE:

HTML (This is the entirety of the contents of my 'index.php' file)
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />



<div id="topheader"><div id="logo"></div> <ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>


</ul></div>



CSS

body {
margin: 0 0 20px 0;
padding: 0;
color:#FFFFFF;
}

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

#topheader {
background-color:#FFFFFF;
padding: 0px;
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;
width: 800px;;
margin: auto;
}


#nav {
list-style:none;
margin: auto;
width:800px;
border: solid 3px #00FF00;

}


#nav li {
list-style:none;
display:inline;
padding: 0 0 0 25px;
margin: auto;
border: solid 1px #FF0000;


}


Any help is much appreciated!