Help with site in IE

so I have a final site that isn’t working in IE. The test site worked in IE, and I can’t figure out why the final isn’t.

Final
[url]http://www.prisonmuseum.net[/url]

Test
[url]http://www.lisakruczek.com/prison/navtest.html[/url]

The only difference between them is I added a longer name in one of the tabs on the navbar. The original was “Events” the final is “Exhibits & Events”. I changed the padding in the css so the navbar would fit the longer name. So the only difference is in the

padding-left

in the styling

and the width of the bar on the bottom , but it’s only the difference of 50 or so pixels, the final site is way off, like something is justified wrong. It’s all the same otherwise. Anyone have any ideas? Here’s the css of the final site, where it’s showing up wrong

#nav {
font-family: Arial, Helvetica, sans-serif;
text-align: center;

}

/* the styling */
#nav {width:600px; height:20px; background:#666699; position:relative; padding-left:108px;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a,
#nav .current a {
display:block;
height:20px;
float:left;
background:#666699;
padding:0 10px 0 10px;
text-decoration:none;
font-size:14px;
line-height:20px;
white-space:nowrap;
color:#fff;
font family: arial, helvetica;
font-style: normal;
}
* html #nav .select a, * html #nav .current a {width:1px; height:20px;}

#nav .select a:hover,
#nav .select li:hover a {
background:#333366;
cursor:pointer;
color:#FFF;
}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#333366; color:#FFF;}

#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {
background:#333366;
color:#FFFFFF;
text-decoration: underline;
}

#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#333366; color:#FFF;text-decoration: underline; }

#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:580px; top:20px; left-margin:auto; right-margin:auto; background:#333366; margin-top:0; padding:0; z-index:50; color:#fff; font-size:12px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none; }

#nav .sub_active {display:block; position:absolute; width:580px; top:20px; left-margin:auto; right-margin:auto; background:#333366; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover.sub {z-index:0; margin-top:0; margin-top:1px;}

#nav .sub_active a {height:20px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; background:#333366; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#333366; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}

Also in #CSS _↴