Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Question Bunched up UL in IE

    Hi,

    I have been trying to change the CSS on this list to make it show right in Internet Explorer as it does in most other browsers.

    The list is an unordered list functioning as a vertical left menu and can be seen at http://www.kristinrichey.com/morale/index.html

    The CSS for the left sidebar is below:

    Code:
    /*Left Div background taken care of by Wrapper*/
    #left{
    width:269px;
    float:left;
    clear:right;
    padding:0px 0px 5px 20px;
    margin:0px;
    text-align:left;
    }
    
    /*Left Vertical Menu Styling*/
    ul#nav{
    width:250px;
    margin:0px;
    padding-left:7px;}
    
    /*Vert Menu - Category Styling*/
    ul#nav li{
    list-style:none;
    background:url(images/leftbutton.png) left no-repeat;
    color:#003366;
    display:inline-block;
    height:21px;
    padding:7px 0px 3px 15px;
    width:240px;
    margin: 5px 0px 5px 0px;}
    
    /*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;}
    
    /*Vert Menu - Gives space between button and links*/
    ul#nav li ul {
    display:inline-block;
    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:13px;
    margin-left:-25px;
    color:#003366;}
    
    /*Vert Menu - Styles Non-Link Text*/
    ul#nav .text{
    height:auto;
    display:block;
    margin:10px 0px 0px -25px;
    padding:3px 0px;}
    
    /*Vert Menu - Link Colors & Decoration*/
    ul#nav a:link{
    color:#000066;
    display:block;
    height:12px;}
    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;}

    The HTML for the Left Sidebar is below:

    Code:
    <div id="left">
    <ul id="nav">
    <li class="top arrow">My Shopping Cart
    <ul>
    <li><a href="#">0 items</a></li>
    </ul>
    </li>
    <li>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>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>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>
    I have no idea why it is sitting on top of itself. It shows fine from what I can see in IE 8 but no other IE.

    The page validates just fine. Any help is greatly appreciated.

    Thank you!

    Kristin

  • #2
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Im kind of bumping this. I havent gotten any response and Im not sure why.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's a mess even in FF(2). How do you want to make it? A vertical drop down menu like http://htmldog.com/articles/suckerfi.../vertical.html ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Question I had no idea there was a ff 2 problem

    I had used an online service to test browser compatabilkty which I guess was not as effective as I had thought.

    Using firefox 3 it shows perfectly. It is supposed to be a vertical list menu but with no dropdown function. You are supposed to see all categories and links at all times.

    The problem is that the links all seem to overlap And bunch up and I amnot sure why this is happening.

    Thanks for the response

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #left{
    width:269px;
    float:left;
    clear:left;
    padding:0px 0px 5px 20px;
    margin:0px;
    text-align:left;
    }
    ul#nav li{
    list-style:none;
    background:url(images/leftbutton.png) top left no-repeat;
    color:#003366;
    display:inline-block;
    /* height:21px; */
    padding:0px 15px;
    width:240px;
    margin: 5px 0px 5px 0px;}
    
    ul#nav li ul li{
    list-style:none;
    width:200px;
    background:none;
    padding:1px 0px;
    margin:0px;
    /*height:13px;*/
    /*margin-left:-25px;*/
    color:#003366;}
    Last edited by abduraooft; 11-24-2009 at 12:17 PM. Reason: corrected image path
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Exclamation That doesn't seem to work

    If I modify the code as follows, I get bad results in FF3 without even testing other browsers:


    Code:
    /*Left Div background taken care of by Wrapper*/
    #left{
    width:269px;
    float:left;
    clear:left;
    padding:0px 0px 5px 20px;
    margin:0px;
    text-align:left;
    }
    ul#nav li{
    list-style:none;
    background:url(leftbutton.png) top left no-repeat;
    color:#003366;
    display:inline-block;
    /* height:21px; */
    padding:0px 15px;
    width:240px;
    margin: 5px 0px 5px 0px;}
    
    ul#nav li ul li{
    list-style:none;
    width:200px;
    background:none;
    padding:1px 0px;
    margin:0px;
    /*height:13px;*/
    /*margin-left:-25px;*/
    color:#003366;}
    
    
    /*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;}
    
    
    /*Vert Menu - Styles Non-Link Text*/
    ul#nav .text{
    height:auto;
    display:block;
    margin:10px 0px 0px -25px;
    padding:3px 0px;}
    
    /*Vert Menu - Link Colors & Decoration*/
    ul#nav a:link{
    color:#000066;
    display:block;
    height:12px;}
    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;}

    I also have an issue if I modify it as below as well:

    Code:
    #left{
    width:269px;
    float:left;
    clear:left;
    padding:0px 0px 5px 20px;
    margin:0px;
    text-align:left;
    }
    
    /*Left Vertical Menu Styling*/
    ul#nav{
    width:250px;
    margin:0px;
    padding-left:7px;}
    
    /*Vert Menu - Category Styling*/
    ul#nav li{
    list-style:none;
    background:url(leftbutton.png) top left no-repeat;
    color:#003366;
    display:inline-block;
    /* height:21px; */
    padding:0px 15px;
    width:240px;
    margin: 5px 0px 5px 0px;}
    
    
    /*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;}
    
    /*Vert Menu - Gives space between button and links*/
    ul#nav li ul {
    display:inline-block;
    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:13px;*/
    /*margin-left:-25px;*/
    color:#003366;}
    I am feeling very frustrated. This should be a simple thing to style. It's a very basic unordered list and I'm not including a dropdown function or any Javascript. I just am not sure what I'm doing wrong here.

    My goal is for the list to appear as shown in the image below in IE & FF2, which it does in FF3 with the CSS I included in my first post of this thread:



    I really appreciate your help.

    Thanks

    Kristin

  • #7
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Any ideas?

  • #8
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Exclamation I am still stuck.

    I have validated the HTML in this page through W3.org as XHTML 1.0 Strict. The HTML is all valid.

    The CSS does not validate as it shows that my default link color and body background color are the same, which is ok because I need it that way.

    No problems reported in relation to this unordered list on the left side and I'm completely stuck. Any help is very greatly appreciated.

  • #9
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Please anyone


  •  

    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
    •