www.webdeveloper.com
Results 1 to 5 of 5

Thread: Suckerfish Menu

  1. #1
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167

    Suckerfish Menu

    Hi -
    I've been experimenting with ALA's suckerfish menu. In my draft version, I'm unable to get rid of a block of color on the right side of the drop down menu. Can someone please look at my (feeble) coding and figure out what I've inserted and/or omitted that causes this problem?

    Thanks,
    KDLA

    ----

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #nav {font-family: verdana, arial, sans-serif; font-size: 85%; background-color: #004455;}
    #nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    }

    #nav a {
    display: block;
    width: 10em;
    text-decoration: none;
    }

    #nav li { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
    }

    #nav li a {background-color: #004455; color: white;}

    #nav li ul { /* second-level lists */
    position: absolute;
    width: 10em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    background-color: #004455;
    }

    #nav li ul li {
    font-size: 85%;
    background-color: #004455;
    }

    #nav li ul li.bottom {
    border-bottom: 0;
    }

    #nav li ul li a {
    background-color: #ffffff;
    color: black;
    border-top: 0 solid #004455;
    border-right: 1px solid #004455;
    border-left: 1px solid #004455;
    border-bottom: 1px solid #004455;
    padding: 2px 4px;
    }

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

    </style>


    <script type="text/javascript"><!--//--><![CDATA[//><!--
    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);

    //--><!]]></script>
    </head>

    <body>
    <h1>KDLA 2004-2005 Annual Report</h1>
    <div style="width: 800px; height: 18px; background-color: #004455; padding: 10px;">
    <ul id="nav">
    <li><a href="#">Customer Service</a>
    <ul>
    <li><a href="#">Summer Reading</a></li>
    <li><a href="#">State Library</a></li>
    <li><a href="#">Catalog</a></li>
    <li><a href="#">Partnership with Friends of Kentucky Public Archives</a></li>
    <li class="bottom"><a href="#">Talking Books</a></li>
    </ul>
    </li>
    <li><a href="#">Technology</a>
    <ul>
    <li><a href="#">Catalog</a></li>
    <li><a href="#">Interlibrary Loan</a></li>
    <li><a href="#">Digitization</a></li>
    <li><a href="#">Scanning</a></li>
    <li class="bottom"><a href="#">Website</a></li>
    </ul>
    </li>
    </ul></div>
    <div style="clear: left;">
    <h1>Heading 1 Example</h1>
    <p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
    est Lorem ipsum dolor sit amet.</p>
    <h2>Heading 2 Example</h2>
    <p>Paragraph Example with Links: Lorem ipsum dolor sit amet, <a href="#">consetetur
    sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore
    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est <a href="#">Lorem ipsum dolor sit amet</a>.</p>
    <h3>Heading 3 Example</h3>
    <p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
    est Lorem ipsum dolor sit amet.</p>
    </div>
    </body>
    </html>
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  2. #2
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747
    Don't you have it as a link?

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Remove font-size: 85%; from #nav li ul li
    Add font-size: 85%; width:100%; to #nav li ul li a
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Danke Schein, Fang!
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles