Yet another CSS prob with IE

[jonabyte]

I am having troubles with the site linked below, fi you view it in FF it looks fine, with ie 6, the grey right corner with the search bar seems to be too long.
Any one have ideas to fix this?

Thanks

<div id="container">

<div id="header">
<img src="images/csdlogo.png" width="405" height="110" border="0" alt="Clarke Starke & Diegel -- Chartered Accountants">
</div>

<div id="greynav">
<ul class="menublock"><br />
<li><a href="http://www.csdca.com/sitemap/">Sitemap</a></li>
<li><a href="#">Search the site:</a></li>
<div id="searchbar">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" value="">
<input type="submit" name="sa" value="Search">
<input type="hidden" name="as_sitesearch" value="csdca.com">
</form>
</div>
</ul>
</div>

<div id="navigation">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="partners.html">Partners</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="resources.php">Resources</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>

CSS:
*{margin:0; padding:0;}

/**************** Header and navigation styles ****************/

#container{
width:895px;
margin:5px auto;
padding:1px 0;
float: left;
text-align:left;
background:#ffffff;
color:#303030;
/*border:2px solid #a0a0a0;*/
}

#header{
height:110px;
width:700px;
margin:0 1px 1px 1px;
background:#467aa7;
color:#ffffff;
}

#greynav{
height: 110px;
width: 193px;
margin:0 1px 1px 1px;
position: absolute;
left: 701px;
top: 6px;
background-color: #D3D3D3;
}

#navigation{
height:2.2em;
line-height:2.2em;
width:894px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

/**************** Menublock styles ****************/

.menublock{margin:0 0 20px 8px; font-size:0.9em;}
.menublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}

/**************** Searchbar styles ****************/

#searchbar{margin:0 0 20px 0;}
#searchbar form fieldset{margin-left:10px; border:0 solid;}

#searchbar #s{
width:110px;
margin:0 5px 0 0;
border:1px solid #a0a0a0;
}

#searchbar #searchbutton{
width:auto;
padding:0 1px;
border:1px solid #808080;
font-size:0.9em;
text-align:center;
}

[edited by: SuzyUK at 10:18 pm (utc) on Feb. 27, 2006]
[edit reason] removed URL (see TOS) - added code [/edit]

[jonabyte]

Nevermind, I just moved the search box somewhere else on the page and got rid of the grey navigation box.

[doodlebee]

Well, in the future (for reference) IE renders wisths, margins and paddings differently than more standards-compliant browsers.

Next time you have an issue with widths (padding, amrgins, etc.), simply put it in a conditional comment.

<!--[if lte IE 6]>
<style type="text/css">
input {width:75px;}
</style>
<![endif]-->

Stick that in the header (with the proper width for IE) and you're set. Only IE versions 6 or less will read this comment.