kencameron

Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter kencameron

    (@kencameron)

    Hey All,
    I managed to get the Son os Sucker fish menus working with my Andreas 08 3 column Theme, sort of that is.

    If you check out

    https://praguetech.com/tagby

    Firefoxyou will see that the menus look nice, and drop down to display the child pages. The problem is that it only really works properly in Firefox based web browsers. If I look at it in Opera, or Internet Explorer, the menus do not disappear after you have moved the pointer off of them. In Safari, blocks from the right side of drop downs stay on the screen after the menu has disappeared. Can any one give me some hints as how to get this working properly in IE and the rest?

    My thanks in advance.

    what follows is the header.php as I have it now:

    [code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Archives <?php } ?> <?php wp_title(); ?></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="WordPress <?php bloginfo('version') ?>" />

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <?php wp_head(); ?>

    </head>

    <body>
    <div id="container" >

    <div id="header">
    <h1><?php bloginfo('name'); ?></h1>
    <h2><?php bloginfo('description'); ?></h2>
    </div>

    <script language="javascript">
    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>

    <div id="nav">
    <li class="selected">>Home
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </div>

    <div id="extradiv">
    </div>
    [/code]

    What follows is the stylesheet.php section controlling the drop down menus (with a few comments):

    [code]
    /*menu */
    #nav {
    margin-left: 1px;
    list-style: none;
    /* this controls the highlight color */
    /* background: #900; */
    background: #467aa7;

    /* this adds a border above the menu bar when you change padding from 0px to a greater number of px */
    /* padding: 0; */
    padding: 0;
    border: 0px solid #FFFFFF;
    /* border-width: 0px 0px 0px 1px; */
    /*controlls the width of the margin around the menu */
    /* top, , ,Left , */
    border-width: 0px 0px 0px 0px;
    }
    /* this controls the space between the drop down menu border and the menu itself */
    #nav ul {
    /* margin: 0; */
    margin: 0;
    /* padding: 0; */
    padding: 2;
    height: 1em;
    }

    /* I do not know what this controls */
    #toolbar form {
    margin: 0;
    /* margin: 1em; */
    padding: 0.1em 2em 0.1em 0em;
    /* padding: 10em 10em 10em 10em; */
    /* height: 1em; */
    height: 1em;
    }

    /* this controlls the margin around the menu bar */
    #toolbar input {
    /* margin: 1px; */
    margin: 0px;
    }

    #nav a {
    /* display: block; */
    display: normal;
    /* this was not here origionally */
    font-weight:normal;
    /* this controlls the font color of menus */
    color: #FFFFFF;
    text-decoration: none;
    /* padding: 0.1em 2em; */
    /* controlls the horizontal spacing around and between menus */
    padding: 0.1em .8em;
    /* this was not here origionally */
    margin: 0.0em;
    /* this was not here origionally */
    border: 0.0em;
    }

    /* this controlls the backgroung color of the header menus */
    #nav li {
    float: left;
    padding: 0;
    background: #999999;
    border: 0px solid #FFFFFF;
    /* border-width: 1px 0; */
    border-width: 0px 0;
    /* this was not here origionally. This puts the verticle white line in the menu bar seperating hte menue Items.*/
    margin-right: 1px;
    }

    #nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    /* width: 14.4em; */
    width: 14.4em;
    w\idth: 12.9em;
    font-weight: normal;
    /* this controls the border color around the drop down menus */
    border: 0px solid #FFFFFF;
    /* this puts a space between the menu bar and the drop down menu. */
    /* margin: 0; */
    margin: 0;
    list-style: none;
    }

    /* this controls the (white) space between the drop down menu items. */
    #nav li li {
    padding-right: 1em;
    width: 13.4em;
    /* border: 0px; */
    /* border-width: 0.1em 0.1em 0.1em 0.1em solid #FFFFFF; */
    /* this was not here origionally. This adds a margin (whites space) above (between) the drop down menu items. */
    margin-top: 1px;
    }

    #nav li ul a {
    /* width: 12em; */
    width: 12em;
    w\idth: 9em;
    }

    #nav li ul ul {
    margin: -1.75em 0 0 14em;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }

    #nav li:hover, #nav li.sfhover {
    /* background: #F20000; */
    /* this controls the hover color */
    /* background: #6699CC; */
    background: #467aa7;
    }
    /* end menu */
    [/code]

    Thread Starter kencameron

    (@kencameron)

    Also Jwurster, can you post a link to your website with the working child pages?

    Thread Starter kencameron

    (@kencameron)

    OK, so cool. I will give it a try and report back. Thank you so much.

Viewing 3 replies - 1 through 3 (of 3 total)