1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Dop Down List Problem

Discussion in 'CSS' started by dthomas31uk, Feb 24, 2005.

0
  1. #1
    Hi, Have encountered a problem with my drop down list menu. Works fine in Firefox and IE6, but does not work in Netscape 7 and IE5MAC.

    Here is the code hope someone can help

    Cheers

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Heraldic Pottery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="Hp.css" rel="stylesheet" type="text/css">
    <style type="text/css">

    #vertnav {
    WIDTH: 122px; LIST-STYLE-TYPE: none
    }
    #vertnav UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
    }
    #vertnav LI {
    DISPLAY: block; LEFT: 0px; MARGIN-BOTTOM: 0px; WIDTH: 130px; BORDER-BOTTOM: 0px; POSITION: relative; BACKGROUND-COLOR: #515033
    }
    #vertnav A {
    PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; FONT: 13px verdana; BORDER-LEFT: #ffffff 1px solid; WIDTH: 150px; COLOR: white; PADDING-TOP: 1px; BACKGROUND-COLOR: #515033; TEXT-ALIGN: left; TEXT-DECORATION: none
    }
    #vertnav A:hover {
    COLOR: #cccccc; BACKGROUND-COLOR: #beb968
    }
    #vertnav UL {
    DISPLAY: none; LEFT: 152px; POSITION: absolute; TOP: 0px
    }
    #vertnav LI:hover UL {
    DISPLAY: block
    }
    #vertnav UL LI:hover UL {
    DISPLAY: block
    }
    HTML #vertnav LI {
    FLOAT: left; HEIGHT: 2%
    }



    </style>

    <SCRIPT type=text/javascript>

    activateMenu = function(vertnav) {

    /* currentStyle restricts the Javascript to IE only */
    if (document.all && document.getElementById(vertnav).currentStyle) {
    var navroot = document.getElementById(vertnav);

    /* Get all the list items within the menu */
    var lis=navroot.getElementsByTagName("LI");
    for (i=0; i<lis.length; i++) {

    /* If the LI has another menu level */
    if(lis.lastChild.tagName=="UL"){

    /* assign the function to the LI */
    lis.onmouseover=function() {

    /* display the inner menu */
    this.lastChild.style.display="block";
    }
    lis.onmouseout=function() {
    this.lastChild.style.display="none";
    }
    }
    }
    }
    }


    window.onload= function(){
    /* pass the function the id of the top level UL */
    /* remove one, when only using one menu */

    activateMenu('vertnav');
    }

    </script>

    </head>

    <body>






    <ul id="vertnav">
    <div align="left"></div>
    <li><a href="index.htm">Home</a></li>
    <div align="left"></div>
    <li><a href="Profile.htm">Profile</a></li>
    <div align="left"></div>
    <li><a href="Mugs1.htm">Mug Shapes</a></li>
    <li> <a href="#">Processes</a>
    <ul>
    <li><a href="Design.htm">Design</a></li>
    <li><a href="Printing.htm">Printing</a> </li>
    <li><a href="Decorating.htm">Decorating</a> </li>
    <li><a href="Despatch.htm">Despatch</a></li>
    <li><a href="MailOrder.htm">Mail Order</a></li>
    </ul>
    </li>
    <li><a href="Contact.htm">Contact</a></li>
    <li><a href="Products.htm">Products</a></li>
    <li><a href="openstock.htm">Open Stock/Retail</a></li>
    </ul>

    </div>

    </body>
    </html>
     
    dthomas31uk, Feb 24, 2005 IP
  2. branduin

    branduin Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    I don't have a solution for you as I don't have Netscape on this PC but I wanted to mention that when I view the menu in Firefox the boxes shorten and I am only able to view the top half of each word. In IE6 it looks fine and they are the correct height to fit each line/word. Might just be my machine but I wanted to let you know!
     
    branduin, Feb 25, 2005 IP
  3. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #3
    SEbasic, Feb 25, 2005 IP
  4. carowan

    carowan Peon

    Messages:
    473
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4

    I can attest to the ALA article, I took SE basics advice a few months ago, and used the ALA code on my site.

    I also found http://www.htmldog.com (run by one of the authors of the ALA article) has the updated version of the menus, both vertical and horizontal.

    This is my first CSS project and I (incredibly) didnt have any problems using it at all.
     
    carowan, Feb 25, 2005 IP