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

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0

    Suckerfish Drop-down menu, Image replacement **RESOLVED!!**


    So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.

    For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated.

    Here's a selection of my code where I think the problem is happening:

    Code:
    <div id="nav">
       	<ul id="dd">
           	<li id="hm"><a href="menu.html">Menu</a></li>
            <li id="au"><a href="about_us.html">About Us</a></li>
            <li id="oc"><a href="#">Our Coffee</a>
            	<ul>
                	<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
                	<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
                	<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
                </ul>
            </li>
            <li id="os"><a href="os_hy.html">Our Stores</a></li>
            <li id="ols"><a href="online_store.html">Online Store</a></li>
            <li id="oct"><a href="our_culture.html">Our Culture</a></li>
        </ul>
    </div>
    Code:
    #nav ul li ul li a {
    	display: block;
    	height: 0px;
    	overflow: hidden;
    }
    
    #dd li#oc a {
    	display: block;
    	width: 95px;
    }
    
    #dd li#oc {
    	float: left;
    	width: 95px;
    }
    
    #dd li#oc ul {
    	position: absolute;
    	width: 95px;
    	left: -9999px;
    }
    
    #dd li#oc:hover ul {
    	left: auto;
    }
    
    
    #dd li#oc:hover ul, #dd li.sfhover ul {
    	left: auto;
    }
    
    li#oc ul li a {
    	height: 0px;
    	display: block;
    	overflow: hidden;
    }
    
    #oc_dd_ko a {
    	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
    	padding-top: 13px;
    	width: 58px;
    }
    
    #oc_dd_ko a:hover {
    	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
    	padding-top: 13px;
    	width: 58px;
    }
    
    #oc_dd_ma a {
    	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
    	padding-top: 15px;
    	width: 58px;
    }
    
    #oc_dd_ma a:hover {
    	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
    	padding-top: 15px;
    	width: 58px;
    }
    
    #oc_dd_ka a {
    	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
    	padding-top: 16px;
    	width: 58px;
    }
    
    #oc_dd_ka a:hover {
    	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
    	padding-top: 16px;
    	width: 58px;
    }
    
    #dd, #dd ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    Any suggestions would be appreciated.
    Last edited by hcblankscreen; August 14th, 2008 at 07:22 PM. Reason: Resolved problem
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Can we see a site? You never set an image on the first level links.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0
    Here's the site: (Site wont let me post the actual http) www2.hawaii.edu/~bhcb/new_kimo/our_coffee.html
    I guess I forgot the images for the first-level of the nav.
  6. #4
  7. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    http://www.hawaii.edu/~bhcb/new_kimo/our_coffee.html does not show for me.

    Was the problem the images weren't set for the first level? Do you still have the problem?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0
    Originally Posted by groundscape
    does not show for me.

    Was the problem the images weren't set for the first level? Do you still have the problem?
    Ahh, sorry about that. It's www2.hawaii.edu/~bhcb/new_kimo/our_coffee.html

    And yes, I'm still having the problem, it occurs on the "Our Coffee" part of the nav.
  10. #6
  11. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Code:
    #nav ul li ul li a {
    	display: block;
    	height: 0px;
    	overflow: hidden;
    }
    Height is set to 0px so try and giving it a height.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0
    Originally Posted by groundscape
    Code:
    #nav ul li ul li a {
    	display: block;
    	height: 0px;
    	overflow: hidden;
    }
    Height is set to 0px so try and giving it a height.
    I tried it but it doesn't really change anything. It just shows the actual text link but the "Our Coffee" image still repeats.

    Could it be that I'm using that means of setting a height of 0 then using the padding for the actual height be what's screwing it up?
  14. #8
  15. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Padding simulates height but it actually isn't. Set a height and get rid of padding. Try that out.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0


    This is what happens when I get rid of the padding and give a height.

    I was trying different things and getting rid of the <a> Tags on the nested li's fixes it:

    Code:
    <div id="nav">
       	<ul id="dd">
           	<li id="hm"><a href="menu.html">Menu</a></li>
            <li id="au"><a href="about_us.html">About Us</a></li>
            <li id="oc"><a href="#">Our Coffee</a>
            	<ul>
                	<li id="oc_dd_ko">Kona</li>
                	<li id="oc_dd_ma">Maui</li>
                	<li id="oc_dd_ka">Kauai</li>
                </ul>
            </li>
            <li id="os"><a href="os_hy.html">Our Stores</a></li>
            <li id="ols"><a href="online_store.html">Online Store</a></li>
            <li id="oct"><a href="our_culture.html">Our Culture</a></li>
        </ul>
    </div>
    But it kind of defeats the purpose of having them there if they're not linked.

    Are there any other ways of image replacement on an item with <a> tags besides the Leahy technique?
  18. #10
  19. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Can you show the CSS along with the fixed HTML code? I'm trying to fix the issue on my local computer. The CSS in your first post doesn't show the rollover.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KiMO BEAN Hawaiian Coffee</title>
    <link href="css/universal.css" rel="stylesheet" type="text/css" />
    </head>
    
    <!-- Container Begins -->
    <div id="container">
    
    	<div id="logotype"><h1><a href="menu.html">KiMO BEAN Hawaiian Coffee</a></h1></div>
    	<div id="logo"><h2><a href="menu.html">KiMO BEAN Logo</a></h2></div>
    
    	<!-- Body Begins -->
    <body>
        
    <div class="bg"><div id="oc_bg"></div></div>
    
    <!-- Nav Begins -->    
    <div id="nav">
       	<ul id="dd">
           	<li id="hm"><a href="menu.html">Menu</a></li>
            <li id="au"><a href="about_us.html">About Us</a></li>
            <li id="oc"><a href="#">Our Coffee</a>
            	<ul>
                	<li id="oc_dd_ko">Kona</li>
                	<li id="oc_dd_ma">Maui</li>
                	<li id="oc_dd_ka">Kauai</li>
                </ul>
            </li>
            <li id="os"><a href="os_hy.html">Our Stores</a></li>
            <li id="ols"><a href="online_store.html">Online Store</a></li>
            <li id="oct"><a href="our_culture.html">Our Culture</a></li>
        </ul>
    </div>  
    <!-- Nav Ends -->
        
    	<div id="content">
    
            <div id="oc_header"><h2>Our Coffee</h2></div>
            <div id="oc_copy"><p>Loremi ipsimun scrot qwe netimimun orrafh sabh rgn sdlfb airt a trei aasdft pot asslert. Fer qwnt as zer l ihpoi ajlekr ampoer oremi ipsimun scrot qwe netimi mun orafh sabh rgn sdlfb. Sairt a trei aasdft po otsslert er qwnt as zer tren ihpoi ajlekr mpoer..</p></div>
        
        </div>  
    
    	
        </body>
        <!-- Body Ends -->
        
    </div>
    <!-- Container Ends -->
    
    </html>
    Code:
    /*Plain Nav*/
    
    #nav {
    	position: absolute;
    	margin: 528px 0 0 317px;
    }
    
    #nav li {
    	float: left;
    	list-style: none;
    }
    
    #nav ul li a {
    	height: 0px;
    	display: block;
    	padding-top: 17px;
    	overflow: hidden;
    }
    
    #nav ul li#hm a {
    	background: url(../images/nav-01_lo.gif);
    	width: 48px;
    }
    
    #nav ul li#hm a:hover {
    	background: url(../images/nav-01_hi.gif);
    	width: 48px;
    }
    
    #nav ul li#hm_select {
    	background: url(../images/nav-01_hi.gif);
    	width: 48px;
    }
    
    #nav ul li#au a {
    	background: url(../images/nav-02_lo.gif);
    	width: 77px;
    }
    
    #nav ul li#au a:hover {
    	background: url(../images/nav-02_hi.gif);
    	width: 77px;
    }
    
    #nav ul li#au_select {
    	background: url(../images/nav-02_hi.gif);
    	width: 77px;
    }
    
    #nav ul li#oc a {
    	background: url(../images/nav-03_lo.gif) no-repeat;
    	width: 95px;
    }
    
    #nav ul li#oc a:hover {
    	background: url(../images/nav-03_hi.gif) no-repeat;
    	width: 95px;
    }
    
    #nav ul li#oc_select a {
    	background: url(../images/nav-03_hi.gif) no-repeat;
    	width: 95px;
    }
    
    #nav ul li#os a {
    	background: url(../images/nav-04_lo.gif);
    	width: 90px;
    }
    
    #nav ul li#os a:hover {
    	background: url(../images/nav-04_hi.gif);
    	width: 90px;
    }
    
    #nav ul li#os_select a {
    	background: url(../images/nav-04_hi.gif);
    	width: 90px;
    }
    
    #nav ul li#ols a {
    	background: url(../images/nav-05_lo.gif);
    	width: 108px;
    }
    
    #nav ul li#ols a:hover {
    	background: url(../images/nav-05_hi.gif);
    	width: 108px;
    }
    
    #nav ul li#ols_select a {
    	background: url(../images/nav-05_hi.gif);
    	width: 108px;
    }
    
    #nav ul li#oct a {
    	background: url(../images/nav-06_lo.gif);
    	width: 90px;
    }
    
    #nav ul li#oct a:hover {
    	background: url(../images/nav-06_hi.gif);
    	width: 90px;
    }
    
    #nav ul li ul li a {
    	display: block;
    	overflow: hidden;
    }
    
    #dd li#oc a {
    	display: block;
    	width: 95px;
    }
    
    #dd li#oc {
    	float: left;
    	width: 95px;
    }
    
    #dd li#oc ul {
    	position: absolute;
    	width: 95px;
    	left: -9999px;
    }
    
    #dd li#oc:hover ul {
    	left: auto;
    }
    
    #dd li#oc:hover ul, #dd li.sfhover ul {
    	left: auto;
    }
    
    li#oc ul li {
    	height: 0px;
    	display: block;
    	overflow: hidden;
    }
    
    #oc_dd_ko  {
    	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
    	padding-top: 13px;
    	width: 58px;
    }
    
    #oc_dd_ko:hover {
    	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
    	padding-top: 13px;
    	width: 58px;
    }
    
    #oc_dd_ma {
    	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
    	padding-top: 15px;
    	width: 58px;
    }
    
    #oc_dd_ma:hover {
    	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
    	padding-top: 15px;
    	width: 58px;
    }
    
    #oc_dd_ka  {
    	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
    	padding-top: 16px;
    	width: 58px;
    }
    
    #oc_dd_ka:hover {
    	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
    	padding-top: 16px;
    	width: 58px;
    }
    
    #dd, #dd ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
  22. #12
  23. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <base href="http://www2.hawaii.edu/~bhcb/new_kimo/our_coffee.html" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KiMO BEAN Hawaiian Coffee</title>
    <link href="css/universal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*Plain Nav*/
    
    #nav {
    	position: absolute;
    	margin: 528px 0 0 317px;
    }
    
    #nav li {
    	float: left;
    	list-style: none;
    }
    
    #nav ul li a {
    	height: 0px;
    	display: block;
    	padding-top: 17px;
    	overflow: hidden;
    }
    
    #nav ul li#hm a {
    	background: url(../images/nav-01_lo.gif);
    	width: 48px;
    }
    
    #nav ul li#hm a:hover {
    	background: url(../images/nav-01_hi.gif);
    	width: 48px;
    }
    
    #nav ul li#hm_select {
    	background: url(../images/nav-01_hi.gif);
    	width: 48px;
    }
    
    #nav ul li#au a {
    	background: url(../images/nav-02_lo.gif);
    	width: 77px;
    }
    
    #nav ul li#au a:hover {
    	background: url(../images/nav-02_hi.gif);
    	width: 77px;
    }
    
    #nav ul li#au_select {
    	background: url(../images/nav-02_hi.gif);
    	width: 77px;
    }
    
    #nav ul li#oc a {
    	background: url(../images/nav-03_lo.gif) no-repeat;
    	width: 95px;
    }
    
    #nav ul li#oc a:hover {
    	background: url(../images/nav-03_hi.gif) no-repeat;
    	width: 95px;
    }
    
    #nav ul li#oc_select a {
    	background: url(../images/nav-03_hi.gif) no-repeat;
    	width: 95px;
    }
    
    #nav ul li#os a {
    	background: url(../images/nav-04_lo.gif);
    	width: 90px;
    }
    
    #nav ul li#os a:hover {
    	background: url(../images/nav-04_hi.gif);
    	width: 90px;
    }
    
    #nav ul li#os_select a {
    	background: url(../images/nav-04_hi.gif);
    	width: 90px;
    }
    
    #nav ul li#ols a {
    	background: url(../images/nav-05_lo.gif);
    	width: 108px;
    }
    
    #nav ul li#ols a:hover {
    	background: url(../images/nav-05_hi.gif);
    	width: 108px;
    }
    
    #nav ul li#ols_select a {
    	background: url(../images/nav-05_hi.gif);
    	width: 108px;
    }
    
    #nav ul li#oct a {
    	background: url(../images/nav-06_lo.gif);
    	width: 90px;
    }
    
    #nav ul li#oct a:hover {
    	background: url(../images/nav-06_hi.gif);
    	width: 90px;
    }
    
    #nav ul li ul li a {
    	display: block;
    	overflow: hidden;
    }
    
    #dd li#oc a {
    	display: block;
    	width: 95px;
    }
    
    #dd li#oc {
    	float: left;
    	width: 95px;
    }
    
    #dd li#oc ul {
    	position: absolute;
    	width: 95px;
    	left: -9999px;
    }
    
    #dd li#oc:hover ul {
    	left: auto;
    }
    
    #dd li#oc:hover ul, #dd li.sfhover ul {
    	left: auto;
    }
    
    li#oc ul li {
    	height: 0px;
    	display: block;
    	overflow: hidden;
    }
    
    #oc_dd_ko  {
    	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
    	padding-top: 13px;
    	width: 58px;
    }
    
    #oc_dd_ko:hover {
    	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
    	padding-top: 13px;
    	width: 58px;
    }
    
    #oc_dd_ma {
    	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
    	padding-top: 15px;
    	width: 58px;
    }
    
    #oc_dd_ma:hover {
    	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
    	padding-top: 15px;
    	width: 58px;
    }
    
    #oc_dd_ka  {
    	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
    	padding-top: 16px;
    	width: 58px;
    }
    
    #oc_dd_ka:hover {
    	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
    	padding-top: 16px;
    	width: 58px;
    }
    
    #dd, #dd ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }</style></head>
    
    <!-- Container Begins -->
    <div id="container">
    
    	<div id="logotype"><h1><a href="menu.html">KiMO BEAN Hawaiian Coffee</a></h1></div>
    	<div id="logo"><h2><a href="menu.html">KiMO BEAN Logo</a></h2></div>
    
    	<!-- Body Begins -->
    <body>
        
    <div class="bg"><div id="oc_bg"></div></div>
    
    <!-- Nav Begins -->    
    <div id="nav">
       	<ul id="dd">
           	<li id="hm"><a href="menu.html">Menu</a></li>
            <li id="au"><a href="about_us.html">About Us</a></li>
            <li id="oc"><a href="#">Our Coffee</a>
            	<ul>
                	<li id="oc_dd_ko">Kona</li>
                	<li id="oc_dd_ma">Maui</li>
                	<li id="oc_dd_ka">Kauai</li>
                </ul>
            </li>
            <li id="os"><a href="os_hy.html">Our Stores</a></li>
            <li id="ols"><a href="online_store.html">Online Store</a></li>
            <li id="oct"><a href="our_culture.html">Our Culture</a></li>
        </ul>
    </div>  
    <!-- Nav Ends -->
        
    	<div id="content">
    
            <div id="oc_header"><h2>Our Coffee</h2></div>
            <div id="oc_copy"><p>Loremi ipsimun scrot qwe netimimun orrafh sabh rgn sdlfb airt a trei aasdft pot asslert. Fer qwnt as zer l ihpoi ajlekr ampoer oremi ipsimun scrot qwe netimi mun orafh sabh rgn sdlfb. Sairt a trei aasdft po otsslert er qwnt as zer tren ihpoi ajlekr mpoer..</p></div>
        
        </div>  
    </div>
    	
        </body>
    </html>
    Isn't showing up anything as far as Nav's go...You can't put a </div> after </body>. </body> indicates the end of the markup.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0
    Alright, I'll change that.

    Could it be that when I specify li#oc a and give the image replacement that it targets not only li#oc a but all of the <a>'s inside of the nested list? Is there a way to target a specific <a> or give an <a> an id?
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    8
    Rep Power
    0
    Ahh! That was it!

    I was targeting all of the <a>'s within the list instead of just the main one. That's why they all had the same image.

    Thanks for your help dude, really helped me work through this problem.
  28. #15
  29. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Yes set a class name because ID's can't be reused. Glad it worked out. I didn't really have time for this thread due to other things...you did most of it.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL

IMN logo majestic logo threadwatch logo seochat tools logo