SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Superfish stackng problem on IE7 joomla b-end

    Maybe someone can help me out

    This site East Central Region 4
    and this site Sweet Adelines Region 1
    if looked at in IE7 the submenus of main menu display over its parent li

    here is the custom css I am using: I've try adding positioning z-index can anyone point me in the right direction?

    Code:
    #horizontal{
        clear:both;
        text-align:center;
        height:43px;
        margin:0px;
        z-index: 102;
        width: 1044px;
        position: relative;
        background-image: url(../images/menuBar_BG.png);
    }
    
    #navbar{
        width: 1049px;
        position: relative;
        margin: 0px auto;
        z-index:101;
    }
    
    
    ul.menu_horiz {
        font-size: 14px;
        list-style: none outside none;
        margin: 0 auto;
        padding: 0;
        z-index: 103;
        position: relative;
    
    }
    
    ul.menu_horiz li {
        display: inline;
        margin: 0;
        padding: 0;
        position: relative;
        width: auto;
        z-index:101;
    
    }
    ul.menu_horiz li a {
        display: inline-block;
        line-height: 14px;
        padding-left: 9px;
        text-decoration: none;
        width: auto;
        z-index: 101;
    }
    ul.menu_horiz li a span {
        display: inline-block;
        padding: 26px 17px 27px 3px;
    }
    ul.menu_horiz li a:hover {
    }
    ul.menu_horiz li ul {
        background: url("../images/DropdownBottom.png") no-repeat scroll center bottom transparent;
        display: block;
        height: auto;
        left: -999em;
        margin: -5px 0 0 5px;
        padding: 0 0 15px;
        position: absolute;
        text-align: left;
        width: 217px;
        z-index:101;
    }
    ul.menu_horiz li ul ul {
        margin: -32px 0 0 150px;
    }
    ul.menu_horiz li li {
        display: block;
        padding: 0;
        width: 209px;
    }
    ul.menu_horiz li li a {
        background: none repeat scroll 0 0 transparent;
        display: block;
        padding: 13px 7px 16px;
        text-decoration: none;
    Thankful
    mm
    Last edited by Paul O'B; Mar 20, 2011 at 07:24. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE7 and under don't really understand auto positions on absolute elements so you need to set an explicit top position.

    e.g.From your fiRst link:
    Code:
    *+html ul.menu_horiz li ul{top:4.4em;margin-top:0!important;padding-top:0!important}
    * html ul.menu_horiz li ul{top:4.4em;margin-top:0!important;padding-top:0!important}
    There are as number of issues in IE6 though but I guess you aren't supporting it.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, with this info I was able to resolve the issue.


Tags for this Thread

Bookmarks

Posting Permissions

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