#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    278
    Rep Power
    16

    Question suckerfish drop down help


    Hi everyone,

    So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details.

    The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is.

    Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible?

    I'll be anxious for your feedback, this has been driving me crazy all day.

    Here's the code.

    XHTML:
    Code:
    <div id="nav">
    <ul>
    <li class="one"><a href="#"><img src="images/home.gif" /></a></li>
    <li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a>
    <ul>
    
    <li><a href="#">sublink 1</li></a>
    <li><a href="#">sublink 2</li></a>
    </ul>
    </li>
    </ul>
    </div>
    CSS
    Code:
    #nav {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #67670f;
    }
    
    #nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    #nav ul li.one {
    float: left;
    margin: 0;
    padding: 0;
    width: 51px;
    list-style: none;
    }
    
    #nav ul li.one img {
    border: 0;
    }
    
    #nav ul li.two {
    float: left;
    margin: 0;
    padding: 0;
    width: 118px;
    list-style: none;
    position: relative;
    }
    
    #nav ul li.two img {
    border: 0;
    }
    
    /* - begin level 2 - */
    
    #nav ul li ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: -999em;
    border: solid 1px #ddd;
    width: 118px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 116px;
    }
    
    #nav ul li ul li a {
    display: block;
    padding: 3px 0 3px 3px;
    margin: 0;
    color: #67670f;
    text-decoration: none;
    width: 118px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 113px;
    
    }
    
    #nav ul li.two ul li a:hover {
    color: #52432c;
    background-color: #e4e2db;
    text-decoration: none;
    }
    
    #nav ul li:hover ul, #nav ul li.sfhover ul {
    left: auto;
    }
    JavaScript
    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu.

    I look forward to your insight!

    Thanks!

    -Brian
  2. #2
  3. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    41
    I used the Suckerfish menu at http://www.bartlett-family.net/BBCON/index3.html

    I had the same problem you did, but without images as links. Now, I don't know WHY, but I solved my problem simply by adding text-align: left; to the #nav a.daddy id in CSS. I don't see that in yours, and don't see immediately where you'd add this, but it solved my problem.

    Other than that, I'm not really good enough with CSS to fix other's problems as I have plenty of my own!

    Good luck,

    Chris

    Comments on this post

    • bgunz agrees
    Pop, pop, fizz, fizz, oh what a relief it is!
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Last edited by Kravvitz; June 28th, 2005 at 11:29 PM. Reason: typo
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    278
    Rep Power
    16
    Originally Posted by WorldBuilder
    I had the same problem you did, but without images as links. Now, I don't know WHY, but I solved my problem simply by adding text-align: left; to the #nav a.daddy id in CSS. I don't see that in yours, and don't see immediately where you'd add this, but it solved my problem.
    ..didn't work for me. I think it might have something to do with the images.

    Other than that, I'm not really good enough with CSS to fix other's problems as I have plenty of my own!
    ...Thanks for the time Chris, I appreciate it, even though it seems that our problems were a bit different. I threw ya a couple rep points for your help either way.

    Thanks again.

    -B
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    278
    Rep Power
    16

    Exclamation


    Originally Posted by Kravvitz
    Could provide a link?
    Sure thing. I put it on a test server for you. You can see it at:

    http://www.briwired.com/suckerfish/test.htm

    I think the problem lies in the image as the main level, seeing that Chris's solution wasn't it. I'll look forward to see if you notice anything funny.

    Thanks Kravvitz!

    -B
  10. #6
  11. Rocking my php-ness
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Dec 2004
    Location
    Boston, MA
    Posts
    1,961
    Rep Power
    156
    Try to attach the mouseover/mouseout events to the <li> containing the image instead of the link. Since the drop down <ul> is 'in' the <li> it should work. Test like hell though.
    My new WebComic http://www.jjsunshines.com/
    The Geek Shall Inherit the Earth

    It is NOT ok to IM me with questions unless I told you it was ok via PM
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    278
    Rep Power
    16

    Question


    Well. I have made some headway.

    I started over with it, and changed some things to reflect the original suckerfish dropdown. It works now, except for one thing: although the links are displayed as "block", the second level nav disappears when you roll from the first sublink to the next, but only in IE. I remember a couple of years ago getting stuck on this one, and throwing away the plans for a dropdown nav at that time. I know it can't be that complex, I'm just not sure of what it is in IE that kickstarting this strange behavior. Firefox however got it right.

    Here's a link to what i've got right now...

    http://www.briwired.com/suckerfish/test2.htm

    regarding the image swap, I'm not too worried about that now. I only but the mouseover/mouseoff events in there as placeholders. I have a script that completely separates the image swap behavior from the markup. If anyone wants it let me know, I'd be glad to share.

    Thanks for all the help so far, and any suggestions you may have regarding the reworked nav!

    -B
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    Code:
    li.ourproducts {
    float: left;
    position: relative;
    width: 51px;
    z-index: 500;
    }
    You should add a background color to "li ul" as well.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    278
    Rep Power
    16

    Thumbs up


    Kravvitz you are absolutely amazing. Thank you so much.

    I assume the background-color is what is keeping the menu up in IE when I roll from one link to the next right? What is the z-index doing? bringing the main level links higher in depth?

    It'd be good to know for next time, and for all around good CSS knowledge

    Thanks again!
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome

    Since none of the <li>'s parents are positioned, it is in the same stacking index as the elements around it, thus when we give it a rather high z-index its children will appear above the surrounding elements.

    The background color is just so that you will be able to read the text.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo