Overlapping LI's in UL Vertical Menu in IE Only

**kristingish** · 11-29-2009, 07:23 PM

Hi,

I had posted this problem at one other place last week but got no response.

I am working on a page, which i have put up a preview of at http://www.kristinrichey.com/morale

The problem is that the Left div's vertical menu, which I have done using an unordered list, is not showing correctly in IE.

It seems to work fine in Firefox, but in IE the main UL LI's bunch up together and you cannot see the second tier LI's (UL LI UL LI).

I have tried everything I can think of for the past three hours, and a couple hours every day for the last week to fix this and nothing I do seems to help.

If anyone can help me out here I would really appreciate it.

The HTML is below:

Code:

<div id="left">
<ul id="nav">
<li class="top arrow header">My Shopping Cart
<ul>
<li><a href="#">0 items</a></li>
</ul>
</li>
<li class="header">Categories
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
</ul>
</li>
<li class="header">Search
<ul>
<li>
<textarea name="search" cols="17" rows="26" class="search">
Search
</textarea>
<input type="submit" value="" class="search" /></li>
<li class="text">Use keywords to find the product you are looking for.</li>
</ul>
</li>
<li class="header">Information
<ul>
<li><a href="#">Shipping &amp; Returns</a></li>
<li><a href="#">Privacy Notice</a></li>
<li><a href="#">Conditions of Use</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>

The CSS is below:

Code:

/*Left Vertical Menu Styling*/
ul#nav{
width:250px;
margin:0px;
padding:0px;
padding-left:7px;
list-style:none;}

/*Vert Menu - Category Styling*/
ul#nav li{
background:url(images/leftbutton.png) left no-repeat;
color:#003366;
display:inline-block;
height:auto;

width:240px;
}

/*Vert Menu - Style for Arrow on Button*/
ul#nav .arrow{
background:url(images/leftbuttonarrow.png) left no-repeat;}

/*Vert Menu - Removes unnecessary padding from top button*/
ul#nav .top{
margin-top:0px;}

ul#nav .header{
height:21px;
padding:7px 0px 3px 15px;
margin: 5px 0px 5px 0px;
position:relative;}

/*Vert Menu - Gives space between button and links*/
ul#nav li ul {
margin-top:10px;}

/*Vert Menu - Styles Links & Content*/
ul#nav li ul li{
list-style:none;
width:200px;
background:none;
padding:1px 0px;
margin:0px;
height:auto;
margin-left:-25px;
color:#003366;}

/*Vert Menu - Styles Non-Link Text*/
ul#nav .text{
height:auto;
display:inline-block;
margin:10px 0px 0px -25px;
padding:3px 0px;}

/*Vert Menu - Link Colors & Decoration*/
ul#nav a:link{
color:#000066;}
ul#nav a:visited{
color:#000066;}
ul#nav a:active{
color:#000066;}
ul#nav a:hover{
text-decoration:none;
color:#0066CC;}

/*Vert Menu - Search Box*/
.search{
background: url(images/searchbox.gif) no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
width:171px;
float:left;
clear:right;
padding:3px 0px 0px 5px;
margin:2px 0px 3px 0px;
height:21px;
border:none;
overflow:hidden;}

/*Vert Menu - Search Button*/
input.search{
width:20px;
height:22px;
padding:3px;
margin:5px 0px 3px 0px;
float:left;
clear:right;
background:url(images/searchbutton.png) no-repeat;}

Thanks ahead of time for any response.
You have no idea how much you will be helping me... as I'm losing my mind trying to figure this out.

Thanks!

Kristin