Weird IE footer, menu, and z-index question

[faltered]

I'm working on a new site for a client. I have a basic design done but I can't get a few things straightened out.

In FireFox everything displays just fine. However, in IE the footer is doing a weird repeat thing. I have some links in the footer (which is a DW library item) and the last word of the last link is repeating onto the next line. Anyone have an idea why? I'm at a loss.

My next question is about my menu. I've implemented a CSS vertical menu and everything works just fine in IE and FF (although I had to use two separate CSS files to make it work). However, when I roll over an item in the main menu, I lose the right border between that item and the first item in the sub menu. Any idea why or how to fix it?

And the last question is about z-index. Basically, I want the brown color of my menu to extend down the left-hand size of the page. However, using the background property won't work for some reason. So I made a separate DIV with the background color I wanted, gave it a z-index property lower than my menu so that it would display behind it. It looks fine in FF but won't work in IE for some reason.

Here is my relevant xHTML:
****************
<div id="wrapper">
<div id="header">&nbsp;</div>
<div id="content">
<p>Content here.</p>
</div>
<!-- #BeginLibraryItem "/yard/Library/navmenu.lbi" --><div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a class="hide" href="#">Awnings
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<a href="#">Awnings
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="Sunsetter Awnings">Sunsetter Awnings</a></li>
<li><a href="#" title="Motorized Awning">Motorized Awning</a></li>
<li><a href="#" title="Motorized Pro Awning">Motorized Pro Awning</a></li>
<li><a href="#" title="Vista Awning">Vista Awning</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Fountains
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<a href="#">Fountains
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="Show All Fountains">Show All Fountains</a></li>
<li><a href="#" title="Alto Series">Alto Series</a></li>
<li><a href="#" title="Carva Series">Carva Series</a></li>
<li><a href="#" title="Gaiku Series">Gaiku Series</a></li>
<li><a href="#" title="Kata Series">Kata Series</a></li>
<li><a href="#" title="Sagada Series">Sagada Series</a></li>
<li><a href="#" title="ST Series">ST Series</a></li>
<li><a href="#" title="Tapered Series">Tapered Series</a></li>
<li><a href="#" title="Vigan Series">Vigan Series</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</div><!-- #EndLibraryItem -->
<div id="menu">&nbsp;</div>
<!-- #BeginLibraryItem "/yard/Library/footer.lbi" --><div id="footer">
&copy; 2006 All rights reserved.<br />
<a href="#">Home</a> ¦ <a href="#">About Us</a> ¦ <a href="#">Contact Us</a> ¦ <a href="#">Site Map</a><br />
<a href="#">xHTML</a>, <a href="#">CSS</a>
</div><!-- #EndLibraryItem -->
</div>

****************
And here is my main CSS file:
**********
body {
background-image: url(bgimage.gif);
background-repeat: repeat;
padding: 0px;
margin: 0px;
}
#wrapper {
width: 780px;
margin: 0px 0px 0px -390px;
left: 50%;
position: absolute;
background-color: #FAEEC7;
border: 1px solid #FFFFFF;
}
#header {
width: 780px;
height: 215px;
background-image: url(images/yardsciencebanner.jpg);
background-repeat: no-repeat;
}
#content {
width: 560px;
font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
font-size: 0.8em;
color: #5A442E;
float: right;
padding: 50px 30px 10px 30px;
}
#footer {
width: 620px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 0.7em;
color: #663300;
text-align: center;
line-height: 1.5em;
float: right;
padding: 5px 0px;
}
a:link, a:visited, a:active {
color: #055522;
text-decoration: none;
}
a:hover {
color: #55B248;
text-decoration: underline;
}
img {
padding: 5px 0px 5px 15px;
}
ul {
padding: 0px 10px 0px 20px;
}
li {
padding: 0px 0px 5px 0px;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.4em;
color: #5A442E;
padding: 0px 0px 5px 0px;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.0em;
color: #5A442E;
padding: 5px 0px 2px 0px;
}
/* Navigation */
#menu {
float: left;
width: 153px;
height: 700px;
height: 74%;
background: #5A442E;
position: inherit;
z-index: 1;
top: 215px;
left: 0;
}
.menu {
font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
width:153px;
height:100px;
position:relative;
margin:0;
font-size:.8em;
float: left;
z-index: 2;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#fff;
width:125px;
height:30px;
_height: 31px; /*IE Hack*/
text-align:left;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#5A442E;
line-height:30px;
font-size:.85em;
padding: 0px 3px 0px 25px;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
margin-right:1px;
position:relative;
padding: 0px;
}
.menu ul li ul {
display: none;
}
/* Non IE Browsers */
.menu ul li:hover a {
color:#000;
background:#55B248;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:153px;
width:153px;
}
.menu ul li:hover ul li a.hide {
background:#FAEEC7;
color:#000;
}
.menu ul li:hover ul li:hover a.hide {
width:200px;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a { /*Sub-Menu*/
display:block;
background:#DFC184;
color:#000;
width:185px;
}
.menu ul li:hover ul li a:hover { /*Sub-Menu Hover*/
background:#055522;
color:#FFF;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#000;
}
.menu ul li:hover ul li:hover ul li a {
display:block;
width:185px;
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
}
****************
I have another CSS file for the menu to work properly in IE. Here is that file:
**************
/* IE Styles */
table {
border-collapse:collapse;
border:0;
margin:0;
padding:0;
}
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover ul li a.hide {
display:none;
}
.menu ul li a:hover {
color:#000;
background:#55B248;
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:0;
left:153px;
width:153px;
}
.menu ul li a:hover ul li a.sub { /*Sub-Menu*/
background:#8F6C49;
color:#fff;
font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
font-size:.8em;
}
.menu ul li a:hover ul li a { /*?Sub-Menu Hover*/
display:block;
background:#DFC184;
color:#000;
width:165px;
font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
font-size:.8em;
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
}
.menu ul li a:hover ul li a:hover { /*Sub-Menu Hover*/
background:#055522;
color:#fff;
font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
font-size:.8em;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:166px;
top:0;
color:#000;
}
.menu ul li a:hover ul li a:hover ul li a {
display:block;
width:165px;
background:#dfc184;
color:#000;
}
.menu ul li a:hover ul li a:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
}
*************
Sorry for the length of this post. Any help is appreciated.

Tracy

[faltered]

I fixed the footer issue- I took out the comma and that seemed to work just fine for some reason.

Still can't figure out the menu or z-index issue.