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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    GAp issue in Internet Explorer

    OK, so here goes. I am currently building a site in joomla and am having a nasty little problem in Internet Explorer. It formats fine in Firefox, but in IE the horizontal drop down menu bar i have created using CSS <ul> and<li> tags has a horizontal gap above it, dropping my links down to another level.

    Site is www.chicagogrammar.org/joomla

    The Navigation Bar CSS CODE:

    #topcol {
    background: transparent url(../images/topcol_bg.png) top center repeat-x;
    margin: 0 auto;
    }

    #pillmenu {
    float: left;
    font-family: Trebuchet MS;
    width: 1001px;
    height: 33px;
    font-size: 13px;
    margin: 0;
    padding: 0px 0 0 0px;
    text-align: left;
    list-style: none;
    }

    #pillmenu ul {
    float: left;
    margin: 0 auto;
    padding: 0 0 0 42px;
    list-style: none;
    }

    #pillmenu li {
    float: left;
    margin: 0 21px 0 0;
    width: 130px;
    padding: 8px 0px 9px 8px;
    background: transparent;
    }

    #pillmenu li:hover {
    color: #fff;
    background: #000;

    }

    #pillmenu li a #active_menu-nav {
    color: #c0d84e;
    width: 120px;
    padding: 5px 10px 5px 0px;
    background: #000;
    }


    #pillmenu li a {
    float: left;
    line-height: 10px;
    font-family: Trebuchet MS;
    width: 120px;
    padding: 5px 10px 5px 0px;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    font-weight: 700;
    }

    #pillmenu li a:hover, #pillmenu li.current a {
    color: #ffffff;
    text-decoration: none;
    background: #000;
    display: block;
    }

    #pillmenu li ul {
    display: none;
    width: 138px;
    padding: 0px 0 4px 0px;
    background: transparent url(../images/drop-down-bg.png) top left repeat;
    }

    #pillmenu li ul li {
    width: 130px;
    color: #ffffff;
    margin-top: 2px;
    margin-bottom: 1px;
    padding: 0 0px 0 8px;
    font-size: 11px;
    }

    #pillmenu li ul a {
    color: #ffffff;
    padding: 1px 0px 2px 6px;
    height: 8px;
    font-size: 11px;
    }

    #pillmenu li ul li a:hover {
    color: #ffffff;
    padding: 1px 0px 2px 6px;
    width: 124px;
    background: #333333;
    text-decoration: none;
    }

    #pillmenu li:hover ul {
    position: absolute;
    margin-top: 25px;
    margin-left: -8px;
    border:none;
    line height: 6px;
    padding:0px 0px 4px 0;
    display:block;
    }


    thanks in advance.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Fix the errors in your markup firsts, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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