Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Nov 2007
    Posts
    2
    Member #
    16175
    Hey everyone. I'm starting work on a website and the owner wants drop down menus. They are working fine, but the problem I am having is formatting in Internet Explorer. The problem is the padding/spacing of the li elements. Preview here (http://www.greenfielddesigns.com/cremse).
    Everything looks just the way I want in Firefox, but in IE there's some extra padding/spacing on the le items. Any ideas how to fix this? Below is my CSS:

    Code:
     
    #nav{
    width:780px;
    background-color:#313131;
    height:21px;
    }
     
    /*General Link Styles*/
    #nav a{
    display:block;
    text-decoration:none;
    }
    #nav a:hover{
    text-decoration:none !important;
    }
    #nav img{
    border:none;
    }
     
     
    /*Top Level*/
    #nav>ul {
    margin:0;
    padding:0;
    z-index:1;
    list-style: none;
    list-style-image: none;
    font-family:Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    }
    #nav>ul>li {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
    list-style-image: none;
    }
    #nav>ul>li {
    background-color:#313131;
    padding:5px;
    cursor:default;
    }
    #nav>ul>li>a {
    cursor:pointer;
    color:#ffffff;
    font-size:.55em;
    text-align:center;
    font-family:Tahoma;
    }
     
    /*All Sub Menus*/
    #nav>ul>li ul {
    margin:0;
    padding:0;
    display:none;
    background-color:#313131;
    border-left:1px solid #999999;
    border-right:1px solid #999999;
    border-top:1px solid #999999;
    border-bottom:none;
    position:absolute;
    z-index:1;
    white-space:nowrap;
    }
    #nav>ul>li ul>li { /*main item setup*/
    display:block;
    margin:0;
    padding:4px;
    border-bottom:1px solid #999999;
    }
    #nav>ul>li ul>li>a{ /*link styles*/
    margin:0; 
    padding:0;
    text-align:left;
    color:#FFFFFF;
    font-size:.6em;
    display:block;
    }
    #nav>ul>li ul>li:hover { /* hover format*/
    background-color:#F16D0C;
    }
     
    #nav>ul>li ul>li:hover>a { /* hover format*/
    color:#333333;
    }
     
     
     
     
    /*Menu Level 1*/
    #nav>ul>li:hover>ul {
    display:block;
    }
     
    /*Menu Level 2*/
    #nav>ul>li>ul>li:hover>ul {
    display:block;
    }

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I'd say you have bigger problems in IE6. None of the styling is there so it's just a long list of lists.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Build off of this and it will give you the results you want: http://www.google.com/url?sa=t&ct=re...b5_aiwiEMkHhbQ

    It'll work cross-browser too.

  5. #4
    Junior Member
    Join Date
    Nov 2007
    Posts
    2
    Member #
    16175
    Thanks for the replies. I redid the menu and it looks like it's working on IE 6/7, Firefox and Safari for Windows. The only issue I'm having now is with IE6. When I roll over the menu for some reason the links are being displayed as block, so as soon as you hover over a menu item that is on top of text or anything the menu goes away. Anyone have any idea why it would act this way?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com