UL Stretched Out In IE

[alexjewell]

I got a very awesome script on here from someone in the forums. They were very nice and their script works...which is much more than I can say about the one I wrote before...
It's for a drop down menu, www.flamehtmlstudios.com/amanda/beta
Now, I don't even need the js in Mozilla...
But I do in IE...
And in IE, it stretches out the UL that the links are in.
Now, I don't know why.
I'm curious as to whether or not anyone can look at the following code and give me the reason? Thanks a ton!

JavaScript:

if (document.getElementById)
  this.onload = function() {
    var className = 'over',
        pattern = new RegExp('(^|\\s+)' + className + '(\\s+|$)'),
        navigation, elements;

    function showSubmenu() {
      if (!pattern.test(this.className))
        this.className += ' ' + className;
    }
    function hideSubmenu() {
      this.className = String(this.className).replace(pattern, ' ');
    }
    function hasSubmenu(element) {
      var nodes;

      if ((nodes = element.childNodes))
        for (var i = 0, n = nodes.length; i < n; ++i)
          if (nodes[i].tagName == 'UL')
            return true;
      return false;
    }

    if ((navigation = document.getElementById('nav'))
        && navigation.getElementsByTagName) {
      elements = navigation.getElementsByTagName('li');

      for (var i = 0, n = elements.length; i < n; ++i)
        if (hasSubmenu(elements[i])) {
          elements[i].onmouseover = showSubmenu;
          elements[i].onmouseout = hideSubmenu;
        }
    }
    navigation = elements
        = null;
  };

And here's the CSS (or at least what applies to the ul):

#nav{ 
clear: both; 
background: #cc9999; 
height: 25px;
margin-bottom: 2px;}

	#nav ul{
	padding: 0;
	margin: 0;
	list-style: none;}

	#nav li{ 
	margin: 0; 
	padding-top: 3px; 
	padding-bottom: 4px;	
	padding-left: 10px;	
	padding-right: 10px; 
	border-right: 1px solid #fff; 
	float: left;
	background: #ccc;
	position: relative;}
	
	#nav li ul{
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
	z-index: 100;
	margin: 10px auto auto auto;}

	#nav li ul{
	width: 100px;
	height: auto;
	background: #ccc;}
	
	#nav li ul li{
	display: block;
	clear: both;
	border-width: 0px;
	width: 100px;}

	#nav li ul li a{
	width: 100%;
	height: 100%;}

	#nav li ul li a:hover{
	color: black;}

	#nav li ul li:hover{
	background: #ddd;}

	#nav li ul li.space:hover{
	background: #ccc;}

	.space{
	height: 10px;}

	.arrow{
	width: 7px;	
	height: 8px;
	background: transparent url(images/arrow.gif) no-repeat;}

	li>ul{
	top: auto;
	left: auto;}

	#nav li:hover ul, #nav li.over ul{
	display: block;}

	#nav a{
	height: 25px;
	width: auto;}

	#nav a:link, #nav a:active, #nav a:visited{ 
	color: #000;} 

	#nav a:hover{
	color: #fff;}

And, finally the html:

<div id="nav">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About Me">About Me</a></li>
<li><a href="#" title="Portfolio" class="over">Portfolio</a>
	<ul>
	<li class="space"></li>
	<li><a href="#" title="Portfolio / Photography">Photography</a></li>
	<li><a href="#" title="Portfolio / Graphic Art">Graphic Art</a></li>
	<li><a href="#" title="Portfolio / Poetry">Poetry</a></li>
	</ul></li>
<li><a href="#" title="Faith" class="over">Faith</a>
	<ul>
	<li class="space"></li>
	<li title="Faith / Scriptures"><a href="#">Sciptures</a></li>
	<li title="Faith / Rants"><a href="#">Rants</a></li>
	</ul></li>
<li><a href="#" title="Music">Music</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="Links">Links</a></li>
</ul>
</div>

[Rohan72]

Seems to me it has nothing to do with the menu. I noticed the title above the menu changes place too. So i guess it has something to do with the values of the header or logo div's.