Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

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

Son of Suckerfish submenus appear to the right of parent in IE6


Reply

5 Posts   1978 Views

Avatar
gocreative

26 May 2010 at 5:13pm Community Member, 17 Posts

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
Avatar
marand

26 May 2010 at 5:53pm Community Member, 9 Posts

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 :)

Avatar
gocreative

26 May 2010 at 6:10pm Community Member, 17 Posts

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 :P)

Avatar
marand

26 May 2010 at 7:18pm Community Member, 9 Posts

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.

Avatar
gocreative

26 May 2010 at 7:51pm Community Member, 17 Posts

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.