problems with div height and width in IE

Question

Hi, I have the code below which is a div used for naviagtion its placed at the top of the page inside another div. It works in every browser I have tested in but IE 8/9.

CSS:

 #nav
{
text-align: center;
background-color: #363A36;
color: #ffffff;
height: 25px;
padding: 10px;  
margin-left: auto;
margin-right: auto;
width: 60%; 
margin-top: -100px;
position: relative; 

}

#nav a
{
text-decoration: none;
color: #ffffff;
padding-left: 10px;
padding-right: 0px;
margin: 7px; 
border-left: 1px solid #ffffff; 
}

#nav a:hover
{
color: #ffffff;
font-style: italic; 
}

HTML:

<div id="header"> 
 [HEADER]
</div>


<div id="nav">

  <a href="index.php" id="homelink">Home</a> 
  <a href="current.php" id="currentlink">Tutorials</a> 
  <a href="past.php" id="pastlink">Blog</a> 
  <a href="request.php" id="requestlink">About</a> 
  <a href="contact.php" id="contactlink">Contact</a> 

</div>


<div id="content">

Content Here   

</div>

The div width is to large in IE and the length is too short I have included screenshots below

Image in firefox , Image in IE

Thanks =D

Answer 1

in IE the padding is calculated as part of the width/height.

In all other browsers, padding is in addition to your defined width/height.

Example: a DIV that is 100px x 100px with 10px padding all around. IE: total width/height = 100px x 100px FF/Safari/Chrome: total width/height 120px x 120px

Here is a good resource for IE issues. Mostly IE6, but its helpful. IE Cheat Sheet