www.webdeveloper.com
Results 1 to 3 of 3

Thread: Overlapping LI's in UL Vertical Menu in IE Only

  1. #1
    Join Date
    Jun 2008
    Location
    Schaumburg, IL
    Posts
    16

    Exclamation Overlapping LI's in UL Vertical Menu in IE Only

    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

  2. #2
    Join Date
    Jun 2008
    Location
    Schaumburg, IL
    Posts
    16
    Does anyone have any ideas?

  3. #3
    Join Date
    Jun 2008
    Location
    Schaumburg, IL
    Posts
    16
    I fixed this by completely redoing the menu.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles