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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Suckerfish Drop Down

    Alright, well this is my first time even attempting a drop down menu (never even thought of using Lists!) So I'm trying a suckerfish drop down menu.
    As odd as it may seem... Firefox is having issues with it this time !!! It's not a big issue, but it's messing up some margins between the navigation and the content. Here's a link:
    http://eggheadtutor.com/fastimports
    I've tested in IE7, and FF and IE7 works fine, while FF is giving me the problem.
    StyleSheet: http://eggheadtutor.com/fastimports/style.css (the dropdown stuff is at the end)

    Edit: BTW, I haven't added the JS for IE6 and below yet.
    Last edited by 194673; 05-23-2007 at 06:14 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Your #navigation li's seem to be inheriting a line-height from somewhere. You'll need to reset the line-height. line-height:normal; should work.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Thanks, I forgot to take that out. I was trying to vertically align the #navLogin, so I had put the whole thing under a div w/ line-height of 35px, but I guess I never took it out after it didn't work. While I'm on the topic, do you know a better way of v-aligning? I've had to battle this beast for a while. Right now I have it set to relative positioning w/ 17.5px from the top.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Vertical aligning single lines of text is possible by setting the line-height equal to the height of the element so if no height is set then your previous problem would occur. Just remember that padding counts for overall height.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Alright, well I've got that all sorted out, but the suckerfish menu still doesn't work in IE. I have to leave right now, but here's a link:
    http://eggheadtutor.com/fastimports

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its because you have two onload calls. You can't have more than one. The last one will override the first one. Change this
    Code:
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    </head>
    <body onLoad="MM_preloadImages('images/buttons/buttons_r1_c1_f3.jpg','images/buttons/buttons_r1_c1_f2.jpg','images/buttons/buttons_r1_c1_f4.jpg','images/buttons/buttons_r1_c2_f3.jpg','images/buttons/buttons_r1_c2_f2.jpg','images/buttons/buttons_r1_c2_f4.jpg','images/buttons/buttons_r1_c4_f3.jpg','images/buttons/buttons_r1_c4_f2.jpg','images/buttons/buttons_r1_c4_f4.jpg','images/buttons/buttons_r1_c6_f3.jpg','images/buttons/buttons_r1_c6_f2.jpg','images/buttons/buttons_r1_c6_f4.jpg'); setContentHeight();">
    to this
    Code:
    window.onload = function()
    {
    sfHover();
    MM_preloadImages('images/buttons/buttons_r1_c1_f3.jpg','images/buttons/buttons_r1_c1_f2.jpg','images/buttons/buttons_r1_c1_f4.jpg','images/buttons/buttons_r1_c2_f3.jpg','images/buttons/buttons_r1_c2_f2.jpg','images/buttons/buttons_r1_c2_f4.jpg','images/buttons/buttons_r1_c4_f3.jpg','images/buttons/buttons_r1_c4_f2.jpg','images/buttons/buttons_r1_c4_f4.jpg','images/buttons/buttons_r1_c6_f3.jpg','images/buttons/buttons_r1_c6_f2.jpg','images/buttons/buttons_r1_c6_f4.jpg'); 
    setContentHeight();
    }
    //--><!]]></script>
    </head>
    <body>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Hmmm, I tried replacing my two onloads with a single one that combines the functions as you suggested, but still to no avail. The code has been reuploaded to reflect the latest changes if you feel like taking a look.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    #navigation li:hover ul, #navigation li.over ul{ display: block; }
    And what is up with the spans in your links? They aren't necessary. They seem like they are there just to change background colors. You can change the background color of the links as well as make them display:block. You will need to set a width on them so they take up the whole width of the li.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I have a similar problem with suckerfish CSS not working in Firefox.

    When I have not set in the DIV class of the menu anything except
    padding: 0px;
    width: 100%;

    the suckerfish drop down menu div space had 0 height and despite
    of it showing the layout was broken (below lying DIVs overlapped).

    So when I tried to use height: fixed px; parameter in the menu DIV class
    everything was fine again. The issue is though because the height problem
    also concerns CSS suckerfish menu buttons with text spanning in 2 rows
    (in that case the button has height of only 1 row).

    In IE everything works fine.

    You can see it on our main web page: www.compwww.pl
    (the height of the whole menu is fixed now but height
    of buttons are not fixed and therefore are breaking layout).

    Could you please provide me with a solution to those problems?

    Thanks,

  • #10
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    if its any help, opencube has a free software tool and cssplay.co.uk has lots of such menus that you can freely download and play with.

    compwww - cool site, but i found your flyout menu down the left a bit difficult to read (i use ff).
    Last edited by KevinG; 05-29-2007 at 06:49 PM.


  •  

    Posting Permissions

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