border-left problem with IE and Mozilla

[secureitall]

I am creating a horzontal CSS menu but ran into a problem with IE. Please see the codes below but here is a short description.

In Mozilla, the menu width is 604px = 150px*4 plus 4px (border-left pixel: therefore, 1px*4)

In IE, the menu width is 600px = 150px*4 plus 0px

From what I have gathered, it seems IE added the border-left pixel inside the 150px (still 150px). Unlike Mozilla which added the border-left pixel outside of the 150px (151px now). Is there a way to fix this problem?

Thanks in advance

CSS code

#menu { margin: 0; padding: 0;}
#menu ul {margin: 0;
padding: 0;
border: 0;
list-style-type: none;
text-align: center;
clear: left;}
#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0; margin: 0;}

#menu ul li a {
background: #ccc;
color: #000;
width: 150px;
height: 2em;
border-left: 1px solid #666; --> problem here
border-bottom: 3px solid #F30;
border-right: none;
padding: 0;
margin-right: 0;
text-decoration: none;
display: block;
font-family: helvetica;
text-align: center;
font-weight: normal;
font-size: 12px; 

HTML code

<div id="menu">
<ul>
<li><a href="#">The Usual Suspects</a></li>
<li><a href="#">The Usual Suspects#2</a></li>
<li><a href="#">The Usual Suspects#3</a></li>
<li><a href="#">The Usual Suspects#4</a></li>
</ul>
</div>

[brdwlsh]

have you tried 'ridge' instead of 'solid'?

i think this value always puts the border on the inside.

sometimes this works for me, on the project i have now it doesn't. wish i knew why.