Jump to:

22984 Posts in 11765 Topics by 2827 members

General Questions

SilverStripe Forums » General Questions » Son of Suckerfish submenus appear to the right of parent in IE6

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1867 Views
  • gocreative
    Avatar
    Community Member
    17 Posts

    Son of Suckerfish submenus appear to the right of parent in IE6 Link to this post

    I've set up a Son of Suckerfish menu on my SS installation to automatically display sub-pages in the drop-down. This works successfully in Firefox and IE7+, but in IE6 the submenu (drop-down) appears to the right of where it should. It still drops down, but it's offset to precisely the end of the top-level menu item.

    Please see the attachment for an example.

    I've tried adding CSS to the IE6.css stylesheet to relatively position the submenu (UL) and its sub-elements. I've also tried absolute positioning, negative margins, and so on.

    Has anyone else encountered this issue and solved it?

    Attached Files
  • marand
    Avatar
    Community Member
    9 Posts

    Re: Son of Suckerfish submenus appear to the right of parent in IE6 Link to this post

    Problem must be in css, IE6 layer position.
    Seems, that 1-level menu button has float:right and 2-level drop-down "make this".
    Try remove this floating in drop-down layer style for IE6 (position:relative, clear:both in drop-down).

    ... or show css for navigation

  • gocreative
    Avatar
    Community Member
    17 Posts

    Re: Son of Suckerfish submenus appear to the right of parent in IE6 Link to this post

    Thanks for the reply. My CSS is as follows:

    ---------------------------------------
    layout.css
    ---------------------------------------

    #Navigation {
       width: 960px;
       height: 42px;
       margin-left: 14px;
       border-bottom: 3px solid #ac5d11;
       overflow: hidden;
       background: #361406;
    }

       #Navigation ul {
          float: left;
          margin-right: 10px;
          margin-top: 5px;
          margin-left: 9px;
       }
       
          #Navigation ul li {
              list-style: none;
             margin: 0 2px 0 0;
             float: left;
             height: 37px;
             line-height: 37px;
             display: block;
             text-transform: uppercase;
             font-weight: bold;
          }
          
             #Navigation ul li a {
                float: left;
                text-decoration: none;
                display: block;
                padding: 0 0 0 10px;
                color: #FFFFFF;
                height: 37px;
             }
             
                /* even out the padding to the right of the text */
                #Navigation ul li a span {
                   text-align: center;
              float: left;
                   padding-right: 10px;
                }
                
                   #Navigation ul li a:hover {
                       background: url(../images/menu_bkg_left.gif) top left no-repeat #ac5d11;
                      color: #FFFFFF;
                      cursor: pointer;
                   }
                   
                   #Navigation ul li a:hover span {
                      background: url(../images/menu_bkg_right.gif) top right no-repeat transparent;
                      cursor: pointer;
                   }
                
             #Navigation ul li a.current,
              #Navigation ul li a.section,
              #Navigation ul li a.section:hover,
              #Navigation ul li a.current:hover {
                    background: url(../images/menu_bkg_left.gif) top left no-repeat #ac5d11;
                    color: #FFFFFF;
                }
                
                #Navigation ul li a.current span,
                #Navigation ul li a.section span,
              #Navigation ul li a.section:hover span,
                #Navigation ul li a.current:hover span {
                   background: url(../images/menu_bkg_right.gif) top right no-repeat transparent;
                   color: #FFFFFF;
                }

    /* second-level */

    #Navigation ul li ul {
       position: absolute;
       background: #ac5d11;
    /*   width: 10em;*/
       left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
       margin-top: 37px;
       width: 200px;
       border: 1px solid #ac5d11;
       border-top: none;
       margin-left: 0;
    }

       #Navigation ul li ul li {
          float: none;
          height: 25px;
          line-height: 25px;
          text-transform: none;
          width: 200px;
          margin: 0;
          font-weight: normal;
          border-bottom: 1px solid #b97636;
       }
       
          #Navigation ul li ul li a {
             clear: both;
             height: 25px;
             width: 190px;
             padding: 0 0 0 10px;
          }
       
             #Navigation ul li ul li a:hover {
                background: #FFFFFF;
                color: #361406;
             }
             
                #Navigation ul li ul li a span {
                   float: none;
                   text-align: left;
                   width: 200px;
                }
                
                #Navigation ul li ul li a:hover span {
                   background: #FFFFFF;
                }
                
                #Navigation ul li ul li a.current,
              #Navigation ul li ul li a.section,
              #Navigation ul li ul li a.section:hover,
              #Navigation ul li ul li a.current:hover {
                    background: #FFFFFF;
                    color: #361406;
                }
                
                #Navigation ul li ul li a.current span,
                #Navigation ul li ul li a.section span,
              #Navigation ul li ul li a.section:hover span,
                #Navigation ul li ul li a.current:hover span {
                   background: #FFFFFF;
                   color: #361406;
                }

    #Navigation li:hover ul,
    #Navigation li.sfhover ul { /* lists nested under hovered list items */
       left: auto;
    }

    ---------------------------------------
    ie6.css
    ---------------------------------------

    #Navigation ul li ul {
       position: relative;
       margin-left: -100px;
    }

    (ran out of ideas )

  • marand
    Avatar
    Community Member
    9 Posts

    Re: Son of Suckerfish submenus appear to the right of parent in IE6 Link to this post

    Hmmm, in this case you cant "repair IE6" with few lines. The independent style for this browser is needed

    Some ideas you find at http://www.alistapart.com/articles/horizdropdowns/ (with js) or here: http://www.cssplay.co.uk/menus/
    And also you can make javascript navigation for IE6.

  • gocreative
    Avatar
    Community Member
    17 Posts

    Re: Son of Suckerfish submenus appear to the right of parent in IE6 Link to this post

    Thanks for the reply. Are you suggesting I replace the existing menu with another? I've used plenty of menus before but Son of Suckerfish was the one suggested on the SS forums (in a topic about creating submenus). I was hoping to just hack away at the IE6-specific CSS until I found a solution.

    But maybe it's better to just try another system and see how it goes. Cheers.

    1867 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.