SpryMenuBar & IE

Hello,
I searched through but couldn't find an answer to this, so I've made a new thread. I wasn't sure whether to post this here or the main Dreamweaver forums, so hopefully here is correct.
I am using the SpryMenuBar to make a dropdown menu for a website I'm working on, and I'm experience the nasty IE bug where I don't get any background on the menubar, AND the display is horizontal for the dropdown menu instead of vertical as it should be. I'm using SpryMenuBar version 0.13 - Spry Pre-Release 1.6.1. If there is a patch or newer version of this where the bug is fixed, please point me in that direction. I couldn't find one, however. In any case, I'm pasting my code below, and the test site I'm using is http://www.umich.edu/~rdawane/precise/about_us.html. The correct view can be found using firefox, and the incorrect one in IE. Mainly just look at the menubar part of the code; that is where I am having my difficulties.
Thanks in advance!
html file:
<!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" />
<meta name="viewport" content="width=device-width" />
<title>Precise Diagnostics, Inc.</title>
<script src="SpryMenuBar.js" type="text/javascript"></script>
<script src="DrawMain.js" type="text/javascript"></script>
<link href="stylesheet_desktop.css" rel="stylesheet" type="text/css" />

<link href="stylesheet_iphone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />

</head>
<body>
<br />
<div align="center">
<ul id="MenuBar" class="MenuBarHorizontal">
    <li class="MenuBarMain">
      <div align="center"><a href="about_us.html">About Us</a></div>
    </li>
    <li class="MenuBarMain"><a href="#" class="MenuBarItemSubmenu">Services</a>
      <ul>
        <li class="MenuBarMain"><a href="#" class="MenuBarItemSubmenu">Cytopathology   </a>
          <ul>
            <li class="MenuBarMain"><a href="#">Gynecological Cytology Services</a></li>
            <li class="MenuBarMain"><a href="#">Non-Gynecological Cytology Services</a></li>
          </ul>
        </li>
        <li class="MenuBarMain"><a href="#">Dermatopathology</a></li>
        <li class="MenuBarMain"><a href="#">Gynecologic pathology</a></li>
        <li class="MenuBarMain"><a href="#">H & E Stains</a></li>
        <li class="MenuBarMain"><a href="#">Immunohistochemical Stains</a></li>
        <li class="MenuBarMain"><a href="#">Oral Pathology</a></li>
        <li class="MenuBarMain"><a href="#">Podiatric Pathology</a></li>
        <li class="MenuBarMain"><a href="#">Special Stains</a></li>
        <li class="MenuBarMain"><a href="#">Gastrointestinal Pathology</a></li>
        <li class="MenuBarMain"><a href="#">Urological Pathology</a></li>
      </ul>
    </li>
    <li class="MenuBarMain"><a href="#">Our Pathologists</a>    </li>
    <li class="MenuBarMain"><a href="#">Patient Information</a></li>
    <li class="MenuBarMain"><a href="#">Careers</a></li>
    <li class="MenuBarMain"><a href="#">Contact Us</a></li>
</ul>
</div>
<script type="text/javascript">
var MenuBarMain = new Spry.Widget.MenuBar("MenuBar",{imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//alert("CW: " + getWidth() + "\nCH: " + getHeight() + "\nSW: " + screen.width + "\nSH: " + screen.height)
if (getDevice() == deviceIphone)
    document.write("<div class='center_apron'>");
    document.write("<div class='center_display'>");
    document.write("<img class='logo_position' src='logo-black-white-text-below-no-bg.gif' />");
else
    document.write("<div class='center_apron'>");
    document.write("<div class='center_display'>");
    document.write("<img class='logo_position' src='logo-black-white-text-below-no-bg.gif' />");
//    document.write("<div class='center_apron' style='width:" + (getWidth()*0.76) + "px; top:" + (getHeight()*0.083) + "px;'>");
//    document.write("<div class='center_display' style='width:" + (getWidth()*0.70) + "px;'>");
//    document.write("<img class='logo_position' src='logo-black-white-text-below-no-bg.gif' style='left:" + (-(getHeight()*0.02762)) + "'>");
document.write("<div> </div>");
t1draw("Laboratory Overview");
t3draw("Precise Diagnostics Laboratory is an independent CLIA certified full-service anatomical pathology laboratory dedicated to provide diagnostic excellence. Our facility utilizes state-of-the-art instrumentation and medical technology. Our experienced, board-certified   pathologists strive to meet the highest standards of pathology service.");
drawbreak();
t3draw("At Precise Diagnostics, Inc. a highly trained team of laboratory professionals provide fast, accurate, laboratory services in our quest for excellence.");
drawbreak();
t1draw("Certification & Accreditation");
t3draw("Precise Diagnostics, Inc. is a fully accredited, CLIA certified laboratory with license in New York.");
drawbreak();
t1draw("Hours of Operation");
t2draw("Laboratory");
t4draw("Monday through Saturday: 10 AM to 8 PM; Sunday: 10 AM to 5 PM");
drawbreak();
t2draw("Patient Billing Queries");
t4draw("Monday through Friday: 9 AM to 5 PM");
</script>



</div>
</div>
</body>
</html>
The .js file:
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
    var b = navigator.appName.toString();
    var up = navigator.platform.toString();
    var ua = navigator.userAgent.toString();
    this.mozilla = this.ie = this.opera = this.safari = false;
    var re_opera = /Opera.([0-9\.]*)/i;
    var re_msie = /MSIE.([0-9\.]*)/i;
    var re_gecko = /gecko/i;
    var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
    var r = false;
    if ( (r = ua.match(re_opera))) {
        this.opera = true;
        this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_msie))) {
        this.ie = true;
        this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_safari))) {
        this.safari = true;
        this.version = parseFloat(r[2]);
    } else if (ua.match(re_gecko)) {
        var re_gecko_version = /rv:\s*([0-9\.]+)/i;
        r = ua.match(re_gecko_version);
        this.mozilla = true;
        this.version = parseFloat(r[1]);
    this.windows = this.mac = this.linux = false;
    this.Platform = ua.match(/windows/i) ? "windows" :
                    (ua.match(/linux/i) ? "linux" :
                    (ua.match(/mac/i) ? "mac" :
                    ua.match(/unix/i)? "unix" : "unknown"));
    this[this.Platform] = true;
    this.v = this.version;
    if (this.safari && this.mac && this.mozilla) {
        this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
    this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
    this.element = this.getElement(element);
    // represents the current (sub)menu we are operating on
    this.currMenu = null;
    this.showDelay = 250;
    this.hideDelay = 600;
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
        // bail on older unsupported browsers
        return;
    // Fix IE6 CSS images flicker
    if (Spry.is.ie && Spry.is.version < 7){
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch(err) {}
    this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
    this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
    this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
    this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
    this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
    this.hoverClass = 'MenuBarItemHover';
    this.subHoverClass = 'MenuBarItemSubmenuHover';
    this.subVisibleClass ='MenuBarSubmenuVisible';
    this.hasSubClass = 'MenuBarItemSubmenu';
    this.activeClass = 'MenuBarActive';
    this.isieClass = 'MenuBarItemIE';
    this.verticalClass = 'MenuBarVertical';
    this.horizontalClass = 'MenuBarHorizontal';
    this.enableKeyboardNavigation = true;
    this.hasFocus = false;
    // load hover images now
    if(opts)
        for(var k in opts)
            if (typeof this[k] == 'undefined')
                var rollover = new Image;
                rollover.src = opts[k];
        Spry.Widget.MenuBar.setOptions(this, opts);
    // safari doesn't support tabindex
    if (Spry.is.safari)
        this.enableKeyboardNavigation = false;
    if(this.element)
        this.currMenu = this.element;
        var items = this.element.getElementsByTagName('li');
        for(var i=0; i<items.length; i++)
            if (i > 0 && this.enableKeyboardNavigation)
                items[i].getElementsByTagName('a')[0].tabIndex='-1';
            this.initialize(items[i], element);
            if(Spry.is.ie)
                this.addClassName(items[i], this.isieClass);
                items[i].style.position = "static";
        if (this.enableKeyboardNavigation)
            var self = this;
            this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
        if(Spry.is.ie)
            if(this.hasClassName(this.element, this.verticalClass))
                this.element.style.position = "relative";
            var linkitems = this.element.getElementsByTagName('a');
            for(var i=0; i<linkitems.length; i++)
                linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
        return false;
    return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
    if (!ele || !className || this.hasClassName(ele, className))
        return;
    ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
    if (!ele || !className || !this.hasClassName(ele, className))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
    try
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent('on' + eventType, handler);
    catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
    var layer = document.createElement('iframe');
    layer.tabIndex = '-1';
    layer.src = 'javascript:""';
    layer.frameBorder = '0';
    layer.scrolling = 'no';
    menu.parentNode.appendChild(layer);
    layer.style.left = menu.offsetLeft + 'px';
    layer.style.top = menu.offsetTop + 'px';
    layer.style.width = menu.offsetWidth + 'px';
    layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
    var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
    while(layers.length > 0)
        layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    var menus = root.getElementsByTagName('ul');
    for(var i=0; i<menus.length; i++)
        this.hideSubmenu(menus[i]);
    this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
    if(this.currMenu)
        this.clearMenus(this.currMenu);
        this.currMenu = null;
    if(menu)
        this.addClassName(menu, this.subVisibleClass);
        if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
            if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
                menu.style.top = menu.parentNode.offsetTop + 'px';
        if(Spry.is.ie && Spry.is.version < 7)
            this.createIframeLayer(menu);
    this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
    if(menu)
        this.removeClassName(menu, this.subVisibleClass);
        if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
            menu.style.top = '';
            menu.style.left = '';
        if(Spry.is.ie && Spry.is.version < 7)
            this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
    var opentime, closetime;
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    if(menu)
        this.addClassName(link, this.hasSubClass);
    if(!Spry.is.ie)
        // define a simple function that comes standard in IE to determine
        // if a node is within another node
        listitem.contains = function(testNode)
            // this refers to the list item
            if(testNode == null)
                return false;
            if(testNode == this)
                return true;
            else
                return this.contains(testNode.parentNode);
    // need to save this for scope further down
    var self = this;
    this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
    this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
    if (this.enableKeyboardNavigation)
        this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
        this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
    this.lastOpen = listitem.getElementsByTagName('a')[0];
    this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
    this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
    this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
    //search any intersection with the current open element
    if (!this.lastOpen)
        return;
    if (el)
        el = el.getElementsByTagName('a')[0];
        // check children
        var item = this.lastOpen;
        while (item != this.element)
            var tmp = el;
            while (tmp != this.element)
                if (tmp == item)
                    return;
                try{
                    tmp = tmp.parentNode;
                }catch(err){break;}
            item = item.parentNode;
    var item = this.lastOpen;
    while (item != this.element)
        this.hideSubmenu(item.parentNode);
        var link = item.getElementsByTagName('a')[0];
        this.removeClassName(link, this.hoverClass);
        this.removeClassName(link, this.subHoverClass);
        item = item.parentNode;
    this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
    if (!this.hasFocus)
        return;
    if (!this.lastOpen)
        this.hasFocus = false;
        return;
    var e = e|| event;
    var listitem = this.lastOpen.parentNode;
    var link = this.lastOpen;
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
    if (!opts[3])
        opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
    var found = 0;
    switch (e.keyCode){
        case this.upKeyCode:
            found = this.getElementForKey(opts, 'y', 1);
            break;
        case this.downKeyCode:
            found = this.getElementForKey(opts, 'y', -1);
            break;
        case this.leftKeyCode:
            found = this.getElementForKey(opts, 'x', 1);
            break;
        case this.rightKeyCode:
            found = this.getElementForKey(opts, 'x', -1);
            break;
        case this.escKeyCode:
        case 9:
            this.clearSelection();
            this.hasFocus = false;
        default: return;
    switch (found)
        case 0: return;
        case 1:
            //subopts
            this.mouseOver(listitem, e);
            break;
        case 2:
            //parent
            this.mouseOut(opts[2], e);
            break;
        case 3:
        case 4:
            // left - right
            this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
            break;
    var link = opts[found].getElementsByTagName('a')[0];
    if (opts[found].nodeName.toLowerCase() == 'ul')
        opts[found] = opts[found].getElementsByTagName('li')[0];
    this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
    this.lastOpen = link;
    opts[found].getElementsByTagName('a')[0].focus();
        //stop further event handling by the browser
    return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    if (this.enableKeyboardNavigation)
        this.clearSelection(listitem);
    if(this.bubbledTextEvent())
        // ignore bubbled text events
        return;
    if (listitem.closetime)
        clearTimeout(listitem.closetime);
    if(this.currMenu == listitem)
        this.currMenu = null;
    // move the focus too
    if (this.hasFocus)
        link.focus();
    // show menu highlighting
    this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
    this.lastOpen = link;
    if(menu && !this.hasClassName(menu, this.subHoverClass))
        var self = this;
        listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    if(this.bubbledTextEvent())
        // ignore bubbled text events
        return;
    var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
    if(!listitem.contains(related))
        if (listitem.opentime)
            clearTimeout(listitem.opentime);
        this.currMenu = listitem;
        // remove menu highlighting
        this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
        if(menu)
            var self = this;
            listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
        if (this.hasFocus)
            link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
    var child = element[sibling];
    while (child && child.nodeName.toLowerCase() !='li')
        child = child[sibling];
    return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
    var found = 0;
    var rect = Spry.Widget.MenuBar.getPosition;
    var ref = rect(els[found]);
    var hideSubmenu = false;
    //make the subelement visible to compute the position
    if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
        els[1].style.visibility = 'hidden';
        this.showSubmenu(els[1]);
        hideSubmenu = true;
    var isVert = this.hasClassName(this.element, this.verticalClass);
    var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
    for (var i = 1; i < els.length; i++){
        //when navigating on the y axis in vertical menus, ignore children and parents
        if(prop=='y' && isVert && (i==1 || i==2))
            continue;
        //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
        if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
            continue;
        if (els[i])
            var tmp = rect(els[i]);
            if ( (dir * tmp[prop]) < (dir * ref[prop]))
                ref = tmp;
                found = i;
    // hide back the submenu
    if (els[1] && hideSubmenu){
        this.hideSubmenu(els[1]);
        els[1].style.visibility = '';
    return found;
Spry.Widget.MenuBar.camelize = function(str)
    if (str.indexOf('-') == -1){
        return str;
    var oStringList = str.split('-');
    var isFirstEntry = true;
    var camelizedString = '';
    for(var i=0; i < oStringList.length; i++)
        if(oStringList[i].length>0)
            if(isFirstEntry)
                camelizedString = oStringList[i];
                isFirstEntry = false;
            else
                var s = oStringList[i];
                camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
    return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
    var value;
    try
        if (element.style)
            value = element.style[Spry.Widget.MenuBar.camelize(prop)];
        if (!value)
            if (document.defaultView && document.defaultView.getComputedStyle)
                var css = document.defaultView.getComputedStyle(element, null);
                value = css ? css.getPropertyValue(prop) : null;
            else if (element.currentStyle)
                    value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
    catch (e) {}
    return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
    var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
    if (isNaN(a))
        return 0;
    return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
    doc = doc || document;
    if (typeof(el) == 'string') {
        el = doc.getElementById(el);
    if (!el) {
        return false;
    if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
        //element must be visible to have a box
        return false;
    var ret = {x:0, y:0};
    var parent = null;
    var box;
    if (el.getBoundingClientRect) { // IE
        box = el.getBoundingClientRect();
        var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
        var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
        ret.x = box.left + scrollLeft;
        ret.y = box.top + scrollTop;
    } else if (doc.getBoxObjectFor) { // gecko
        box = doc.getBoxObjectFor(el);
        ret.x = box.x;
        ret.y = box.y;
    } else { // safari/opera
        ret.x = el.offsetLeft;
        ret.y = el.offsetTop;
        parent = el.offsetParent;
        if (parent != el) {
            while (parent) {
                ret.x += parent.offsetLeft;
                ret.y += parent.offsetTop;
                parent = parent.offsetParent;
        // opera & (safari absolute) incorrectly account for body offsetTop
        if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
            ret.y -= doc.body.offsetTop;
    if (el.parentNode)
            parent = el.parentNode;
    else
        parent = null;
    if (parent.nodeName){
        var cas = parent.nodeName.toUpperCase();
        while (parent && cas != 'BODY' && cas != 'HTML') {
            cas = parent.nodeName.toUpperCase();
            ret.x -= parent.scrollLeft;
            ret.y -= parent.scrollTop;
            if (parent.parentNode)
                parent = parent.parentNode;
            else
                parent = null;
    return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
    if (ev.stopPropagation)
        ev.stopPropagation();
    else
        ev.cancelBubble = true;
    if (ev.preventDefault)
        ev.preventDefault();
    else
        ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
        return;
    for (var optionName in optionsObj)
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
            continue;
        obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponent
Finally, the .css file:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
.t1
    /*font-family: Calibri;*/
    font-weight: bold;
    font-size: 1.3em;
    display: block;
    padding-left: 0px;
.t2
    /*font-family: Calibri;*/
    font-weight: bold;
    font-size: 1em;
    display: block;
    padding-left: 20px;
.t3
    /*font-family: Calibri;*/
    font-weight: normal;
    font-size: 1em;
    display: block;
    padding-left: 20px;
.t4
    /*font-family: Calibri;*/
    font-weight: normal;
    font-size: 0.9em;
    display: block;
    padding-left: 40px;
.t5
    /*font-family: Calibri;*/
    font-weight: normal;
    font-size: 0.9em;
    display: inline;
    padding-left: 40px;
/* Main body text (list format)*/
li
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 0px;
/* Menubar text (list format)*/
li.MenuBarMain
    font-family: Arial;
    font-weight: bold;
    font-size: 24px;
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0 auto; /* If using auto to center, width must be set to total menubar width */
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 48em; /* Change to the total width of your own menu bar */
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em;
    float: left;
    /*text-wrap: none;*/
    /*white-space: inherit;*/
    /*top: 0px;*/
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
/*    width: 8.2em;*/
    position: absolute;
    left: -1000em;
    background-color: #3093f5;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: auto;
/*    width: 8.2em;*/
    text-align: left;
    background-color: #3093f5;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    /*background-color: #FFF; */
    padding: 0.5em 0.75em;
    text-decoration: none;
    background-repeat: no-repeat;
    font-size: 0.83em;
    /*font-size: 19px;*/
    color: #000;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    /* [disabled]background-color: #33C; */
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    /*background-color: #33C;*/
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far right (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/*    background-image: url(SpryMenuBarDown.gif);*/
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(rightarrow.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
/*    background-image: url(SpryMenuBarDown.gif);*/
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(rightarrowhover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f/loat: left;
        background: #FFF;
Body
    font-family: Calibri;
    color: black;
    background-image: url(background-plain-original.jpg);
    background-repeat: repeat-x;
.logo_position
    position: absolute;
    top: 20px;
    left: -20px;
    /*left: -20px;*/
.center_display
    top: 0px;
    /*width: 1000px;*/
    width: 700px;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border-top-left-radius: 25px 18px;
    border-top-right-radius: 25px 18px;
    border-bottom-left-radius: 25px 18px;
    border-bottom-right-radius: 25px 18px;
    border-bottom: none;
    padding-top: 160px;
.center_apron
    /*top: 60px;*/
    /*width: 1080px;*/
    top: 100px;
    width: 780px;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40px;
    background-color: white;
    border-top-left-radius: 25px 18px;
    border-top-right-radius: 25px 18px;
    border-bottom-left-radius: 25px 18px;
    border-bottom-right-radius: 25px 18px;
    border-width: .1em;
    border-style: solid;
    border-color: black;

Add or modify
ul.MenuBarHorizontal ul li { */ this will stop the submenu from showing horizontal */
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
ul.MenuBarHorizontal li.MenuBarItemIE { /* this will influence thr bg colour */
    background: transparent;
Gramps

Similar Messages

How do i place image next to sprymenubar? CS4

Hey everyone I am extremely new to this all I have no background in coding or dreamweaver. I was able to place an image (my website logo) and create a functioning spry menu bar. however the menu bar is placed below my image and I want it to run side by side with my logo so that the logo and menu bar act as the main navigational buttons for my website.
<p><a href="------------.html"><img src="-----------.jpg" width="590" height="90" /></a></p>
<hr align="left" width="1000" />
<p>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</p>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Capabilities</a>
    <ul>
      <li><a href="Staff.html">Staff</a></li>
      <li><a href="Locations.html">Locations</a></li>
      <li><a href="Business Models.html">Business Models</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Solutions</a>
    <ul>
      <li><a href="Industries.html">Industries</a></li>
      <li><a href="Strategies.html">Strategies</a></li>
      <li><a href="Big Data.html">Big Data</a></li>
      <li><a href="Cloud Computing.html">Cloud Computing</a></li>
      <li><a href="Product Development.html">Product Development</a></li>
      <li><a href="Outsourcing.html">Outsourcing</a></li>
    </ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Innovations</a>
    <ul>
      <li><a href="White Papers.html">White Papers</a>      </li>
      <li><a href="Appearances.html">Appearances</a></li>
      <li><a href="Press Releases.html">Press Releases</a></li>
    </ul>
</li>
</ul>
<script type="text/javascript">

</script>

You'll need to use CSS floats.
.floatLt {
     float:left;
     width:auto;
HTML:
<div class="floatLt">
YOUR LOGO IMG HERE
</div>
<ul id="MenuBar1" class="MenuBarHorizontal floatLt">
YOUR MENU GOES HERE
</ul>
Coding skills are essential to using DW. Learn HTML & CSS first. DW will be much easier.
HTML, CSS & Web Design Theory Tutorials -
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
http://webdesign.tutsplus.com/sessions/web-design-theory/
Nancy O.

SpryMenuBar Horizontal - problems in IE - can you help ?

I tried myself for a few days - but I can't find a solution. So: I need your HELP !!
My SpryMenuBar Horizontal does not work in IE (but very well in Firefox, Safari, etc.): When I open the sub-menu the position is on the very left site - it was supposed to be under the menu. Is there anybody who can help me ? I don't know what I did wrong. The link is: http://www.schramm-finanzstrategien.de. Thank you very much for your help !!

Using the original (un-modified) SpryMenuBarHorizontal.css, I added the following to the document to get the result that you are looking for
ul.MenuBarHorizontal li {
     font-size: 11px;
     width: 120px;
ul.MenuBarHorizontal ul, ul.MenuBarHorizontal ul li {
     width: 125px;
ul.MenuBarHorizontal a {
     text-align: center;
     background: url(http://www.schramm-finanzstrategien.de/lightbox2/images/spry_out.gif) repeat-x;
ul.MenuBarHorizontal ul a {
     text-align: left;
ul.MenuBarHorizontal a.MenuBarItemSubmenu, ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
     background: url(http://www.schramm-finanzstrategien.de/lightbox2/images/spry_out.gif) repeat-x;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
     background-image: url(http://www.schramm-finanzstrategien.de/lightbox2/images/spry_on.gif);
     color: #000;
Gramps

How do you make a SpryMenuBar a different color for each page?

Hey everyone. I'm new to web design and dreamweaver is definitly kicking my butt. Anyway, I'm trying to create a simple website for a foundation and I want to make each page have a different color Sprymenubar to match the color theme of the different pages. The site will only have about 6 color themes max so this shouldn't be a huge undertaking. The trouble I'm having is I have created the home page (the color green) and right now I'm working on the second page (the color blue). When I added a new sprymenubar and changed the CSS Rule to make the color of the menu blue and the hover color light blue it then changes the color of the menu on the home page from Green to Blue. How annoying! I even tried starting from scratch and inserting another horizontal sprymenubar but I can't seem to make another horizontal sprymenubar with a whole new set of rules independent from the first one. What can I do? Do I have to make an editable region or am I just not clicking a certain button to make the new menubar independent from the first one?
Examples
First this
Then this
And then this happens
Let me know!!

Ok I found a similar question on this forum that was answered and helped. If anyone comes across this wondering the same thing, copy and paste your SpryMenuBarHorizontal.css file and rename the copy to something like "(Title_Of_Page)SpryMenuBarHorizontal.css" and then replace "SpryMenuBarHorizontal.css" in your code to <link href="../SpryAssets/(Title_Of_Page)SpryMenuBarHorizontal.css" and then you are good to go.

Sprymenubar on all pages

I have problems with sprymenubar. Is it possible to makea menu that is always displayed at the top of every page?

I have tried to have a template, the problem with a template is that if I have a website with 50 pages and want to change or add a menu so I have to obviouslychange all the 50 pages.

SpryMenuBar issue in IE9

Dear all,
First of all, I would like to state, that I am a beginner (started building my first website, for my own company, a few weeks ago only), and I tried to avoid asking any questions until I got at least a bit of a hang of it.
The website I am building is located here: http://test.madu-kapu.com
It only consits of the homepage so far, and in the Live View of Dreamweaver it looks perfect. In the simple deisgn view it is also displayed correct. I understand of course, that this is not equal to the browsers though.
I have three main issues now, but I will open separate discussions for them as recommended.
Here I would like to discuss the issue with the SpryMenuBar Horizontal.
I would like it to have no background, and the menu buttons should be a bit away from eachother. (margin-left:5px; )
The font color is white, while hover is grey. In the live preview it works fine, in GoogleChrome also, but in IE9, the whole menu bar becomes a big white stripe.
Is this a known issue, or are my settings wrong? (for example in the CSS for the menu bar)
As this is my first post, I don't know what exactly I should provide, probably the CSS code, though it is quite long.
If it is required, I will of course copy it to here.
I am using Dreamweaver CS5.5 trial version (my pre-order for CS6 is scheduled for today, if there are no delays).
Any ideas, advices or hints are welcome. I tried to find a solution for this online, but couldn't find any hints on what might be the cause of this.
Regards,
Peter Madudak

Thank you for your feedback.
I am intrigued what the meaning of the highlighted parts is
<script data-rocketsrc="SpryAssets/SpryMenuBar.js" type="text/rocketscript"></script>
Gramps

Forced to run SpryMenuBar within a menu

I have no idea about the make up of the application that I'm being asked to put within an iframe, I didn't create the SpryMenuBar or even know anything about this until I was forced to load classic asp pages within a .Net application that opens up iframes, I have no choice in the technology or anything so Please PLease don't ask me why I'm doing the, I can't ask my boss why if I do I die... LOL... anyway back to my problem,
I've been given access to the classic asp code but theres over 200 menu items and most don't have this spry crap inside them so they work just fine, so I can't tell my boss to fly a kite, I need to make this work one way or my job is over.
when I load the pages that use the SpryTabbed whatever stuff all I see is a spinning "Loading" gif. and I get this error:
'parent.frames.I_2' is null or not an object or 'parent.frames.I_1' is null or not an object or whatever, I also wouldn't like a lecture on using iframes because I see these elements need them to function.
what else do you need to know to help me? code? I can show you code.. Please help.
Thanks

Create one more stage for the same concurrent program.
Thanks
Nagamohan

Pre-drop down on SpryMenuBar- Possible?

Hello everyone,
I know this is possible, I just can't figure out how to do it.
I want to modify the SpryMenuBar so that the first submenu is dropped down and stays down when someone goes to the homepage. Similar to the current http://www.amazon.com homepage. And when any other item is rolled over, the first item stays down and the rest of the menu functions as normal.
I've modified the CSS and JS and have it looking/working the way I want except for this. Now I just need it to "pre"-dropdown on the first page. I imagne it is somewhere in the .js file and requires a boolean change somewhere from false to true or something like that. But it's probably harder than that. I'm intermediate at JavaScript at best. So if someone can explain or point me to a tutorial I would appreciate it.
Thanks for your time Adobe pros!
ADam
EDIT: Sorry, the Amazon homepage only does what I'm asking if it is wide enough. Sorry if that was confusing for anyone. If you don't see it you need to make it wider. Thanks again!

Adam,
Spry has been deprecated by Adobe and will no longer be supported from the next major release of DW.
Read here: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
Why don't you consider using a jQuery menu? This link lists some 45 menus that you can use: http://www.freshdesignweb.com/jquery-menu.html
-ST

How to remove %20 from the link parameter value of a vertical sprymenubar?

I have a Vertical menubar but I want to link the menu's to a new page where I sent a parameter value acros.
The url displays:
http://localhost/Category.php?Category=Digital%20Piano
I want it to display the following:
http://localhost/Category.php?Category=Digital-Piano
This is what the menu looks like
<ul id="MenuBar2" class="MenuBarVertical">
        <li><a class="MenuBarItemSubmenu" href="Category.php?Category=Digital Piano">Digital Pianos</a>
          <ul>
            <li><a href="#">All digital pianos</a></li>
I have tried to use str_replace, however that didn't work
Also I want to echo out the url without the "-" on the main page
Like so <?php echo $_GET['Category']; ?> where it diplays Digital piano rather than Digital-Piano
I presume I have to encode the Category=Digital Piano, however I have no idea where to start

Thanks for your quick response.
I actually tried that, but when I do it won't search my database as in there the Digital Piano is without a space.
The menubar is as follows:
<ul id="MenuBar2" class="MenuBarVertical">
        <li><a class="MenuBarItemSubmenu" href="Category.php?Category=Digital Piano">Digital Pianos</a>
          <ul>
            <li><a href="#">All digital pianos</a></li>
            <li><a href="#">Casio Digital Pianos</a></li>
            <li><a href="#">Kawai Digital Piano</a></li>
            <li><a href="#">Korg Digital Pianos</a></li>
            <li><a href="#">Roland Digital Pianos</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">Yamaha Digital Pianos</a>
              <ul>
                <li><a href="#">Yamaha Clavinova</a></li>
                <li><a href="#">Yamaha Digital Pianos</a></li>
              </ul>
            </li>
            <li><a href="#">Pre-Owned Digital Pianos</a></li>
            <li><a href="#">Other Digital Pianos</a></li>
          </ul>
        </li>
        <li><a href="#">Pre-Owned Digital Pianos</a></li>
        <li><a href="#" class="MenuBarItemSubmenu">Keyboards</a>
          <ul>
            <li><a href="#">All Keyboards</a></li>
            <li><a href="#">Casio Keyboards</a></li>
            <li><a href="#">Ketron Keyboards</a></li>
            <li><a href="#">Korg Keyboards</a></li>
            <li><a href="#">Roland Keyboards</a></li>
            <li><a href="#">Yamaha Keyboards</a></li>
            <li><a href="#">Pre-Owned Keyboards</a></li>
            <li><a href="#">Other Keyboards</a></li>
          </ul>
        </li>
        <li><a href="#">Pre-Owned Keyboards</a></li>
        <li><a href="#">Recording</a>        </li>
        <li><a href="#">Amplilication</a></li>
        <li><a href="#">Accessories</a></li>
        <li><a href="#">Modules & Add-On's</a></li>
      </ul>
    </div>
All the other Piano and keyboards will get a link as well, but what I was hoping to do was not make a seperate page for each category
But just use the link
the recieving page looks as follows:
$maxRows_getResults = 7;
$pageNum_getResults = 0;
if (isset($_GET['pageNum_getResults'])) {
$pageNum_getResults = $_GET['pageNum_getResults'];
$startRow_getResults = $pageNum_getResults * $maxRows_getResults;
$varCategory_getResults = "-1";
if (isset($_GET['Category'])) {
$varCategory_getResults = $_GET['Category'];
mysql_select_db($database_dBconn, $dBconn);
$query_getResults = sprintf("SELECT * FROM products WHERE Category LIKE %s", GetSQLValueString("%" . $varCategory_getResults . "%", "text"));
switch( $_GET['Sort'] ){
    case 'Low to High':
        $query_getResults .= 'ORDER BY Keysound_price ASC';
        break;
    case 'High to Low':
        $query_getResults .= 'ORDER BY Keysound_price DESC';
        break;
    case 'Color':
        $query_getResults .= 'ORDER BY Color ASC';
        break;
    case '0-500':
        $query_getResults .= ' AND products.Keysound_price BETWEEN 0 AND 500 ORDER BY Keysound_price ASC';
        break;
          case '500-1000':
        $query_getResults .= ' AND products.Keysound_price BETWEEN 500 AND 1000 ORDER BY Keysound_price ASC';
        break;
                    case '1000-2000':
        $query_getResults .= ' AND products.Keysound_price BETWEEN 1000 AND 2000 ORDER BY Keysound_price ASC';
        break;
          case '2000':
        $query_getResults .= ' AND products.Keysound_price BETWEEN 2000 AND 10000 ORDER BY Keysound_price ASC';
        break;
$query_limit_getResults = sprintf("%s LIMIT %d, %d", $query_getResults, $startRow_getResults, $maxRows_getResults);
$getResults = mysql_query($query_limit_getResults, $dBconn) or die(mysql_error());
$row_getResults = mysql_fetch_assoc($getResults);
if (isset($_GET['totalRows_getResults'])) {
$totalRows_getResults = $_GET['totalRows_getResults'];
} else {
$all_getResults = mysql_query($query_getResults);
$totalRows_getResults = mysql_num_rows($all_getResults);
$totalPages_getResults = ceil($totalRows_getResults/$maxRows_getResults)-1;
$queryString_getResults = "";
if (!empty($_SERVER['QUERY_STRING'])) {
$params = explode("&", $_SERVER['QUERY_STRING']);
$newParams = array();
foreach ($params as $param) {
    if (stristr($param, "pageNum_getResults") == false &&
        stristr($param, "totalRows_getResults") == false) {
      array_push($newParams, $param);
if (count($newParams) != 0) {
    $queryString_getResults = "&" . htmlentities(implode("&", $newParams));
$queryString_getResults = sprintf("&totalRows_getResults=%d%s", $totalRows_getResults, $queryString_getResults);
On the main page I use the <?php echo $_GET['Category']; ?> to echo out the category name
Hope this helps

How to correct SpryAssets/SpryMenuBar paths in template for sub-directories?

I recently converted my real estate web site to CSS using Dreamweaver CS4. I use a primary template for most of my pages, which have both a horizontal and a vertical spry menu bar. When I create a page with the template and save it in a sub-directory (not at root level), after a page view, I get errors on the server such as:
File does not exist: /home/I_DELETED_THIS/public_html/homes_for_sale/SpryAssets, referer: http://locatehome.com/homes_for_sale/10-2264.htm
(I replaced part of the URL with "I_DELETED_THIS" since this is posted publicly)
The SpryAssets directory is at the root level of my site. The template includes the code further below at the bottom of the source code in a non-editable area of the template, which I think is the source of the problem, especially since I get two error messages for each page view and the SpryAssets directory is referenced twice in the following code after the last div. Part of the code is commented out:
<script type="text/javascript">

</script>
</body>
Can I delete this code from the template or will my menu bars not function if they have sub-menus?
The template changes the file path for other CSS scripts in the head of the template and links, etc. in the body, but not for this section of code. Is there a way to modify my template so that the path files will be correct when a create new pages in sub-directories?
I saw one suggestion in the Forum to another user with a related problem that he should manually change the code in this section of the template to have a file path relative to the root, but it seems that the program should automatically be taking care of things like that.
Many thanks,
Dave K.

<script type="text/javascript">

</script>
No you cannot delete the menu constructors, they are the ones that call the menus. The comment tags are purely for browsers that do not have JavaScript enabled.
As far as template behaviours are concerned, I am afraid that this is not a very helpful forum. You will need to go to the Dreamweaver Forum for that http://forums.adobe.com/community/dreamweaver/dreamweaver_general
I hope this helps.
Ben

Can you add an image as a spacer in SpryMenuBars?

SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1
Version CS5 DW – Windows XP 32bit system
Can you insert an image as a spacer in the Spry Menu Bar widget?
Page link: http://test.thunderscientific.com/NewMenuTest-Vertical.html
I need to insert an image between menu items; About Thunder and Product Information that matches the height and width of a new menu item with no link to anything.
I’ve tried the image as a background image and it just shows up as the image for all menu items and that’s not what I want.
Would I put the code in the HTML or in the CSS? I’ve tried both to no avail.
I also tried to add a new CSS rule and that didn’t work ether.
Is what I’m asking even a possibility?
Thanks,
Thunder Bolt
Menu

I just wanted to say thank you to "vw2ureg" for answering my post, and very quickly I might add.
This worked perfectly, the only thing I had to change was, the background from a color to an image, and the height to 15 pixels and it worked great!
Thanks very much…
ul.MenuBarVertical a.spacer {
background-image:url(../images/image.gif);
cursor: default !important;
height: 15px;

SpryMenuBar Submenus not working in Internet Explorer

Hi there,
I am having trouble getting my sub menus to display correctly in IE. (It works properly in Firefox & Safari)
I have experimented with the Spry CSS a little, but it was such a struggle for me to modify the CSS to achieve what I already have, being somewhat of a CSS novice, that I became completely lost.
Here is a link to the html file online
The CSS is embedded.
I woudl be immensely grateful for any help/advice.
Thanks : )

an update on what I've discovered:
my menu bar consists of an unordered list, and list items which have submenus have additional unordered lists of their own.
IE is making the main LI the same width as the UL they themselves contain, and it's throwing off the alignment of my main UL.
Ugh... i know I've done a terrible job of explaining.
Would anyone care to take a peak and see if the solution is maybe simple to someone with more CSS experience?
Thank you so much in advance...

SpryMenuBar, problems with Submenu

Hi, everyone,
I am new to Spry widgets. I am working with CS5.
I have a problem with the only submenu I want to have for this site (in French). Instead of explaining, I attached a grab. My problme is clearly showing: the border of the submenu is offset on the left.
How can I fixed that? I went through all possible styles and could not find anything.
As well, when there are submenus, there generally appear a triangle on the right hand side of my menu to indicate that there is a submenu. How can I disable that?
Thanks a lot for any suggestion!
Bruno

First off, upgrade to Spry version 1.6.1 as per here.
Then replace the red coloured value to something that suits your menu
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 10px;
     font-weight: normal;
     z-index: 1020;
     cursor: default;
     width: 48em;
     position: absolute;
     left: -1000em;
something like 8em.
Lastly, you have a problem on line 56 of your code which has no relation to Spry.
I hope this helps.
Ben

SpryMenuBar IE Problem - Menu closes when the cursor is in between the text

http://www.blassdesign.com/temp/test.html
In firefox, it works like it is supposed to.
In IE, however, (as always) it messes it up. When you put
your cursor in between the words, the menu closes. While this isn't
catastrophic, the company that I am designing this for will
potentially have many clients who are very computer illiterate and
this may really confuse and frustrate them...and they will probably
be the users who have IE6.
The default spry menu bar doesn't seem to have this problem
at all. I compared the stylesheets and I can't find out why this is
happening.
I also tried removing the class that I made for the submenu
items, ul.MenuBarHorizontal a.MenuBarItemSubmenu2 and it didn't
change anything so I don't think the problem is there.
Any ideas anyone?
Thanks in advance...

Sometimes a problem with Firefox may be a result of malware installed on your computer, that you may not be aware of.
You can try these free programs to scan for malware, which work with your existing antivirus software:
* [http://www.microsoft.com/security/scanner/default.aspx Microsoft Safety Scanner]
* [http://www.malwarebytes.org/products/malwarebytes_free/ MalwareBytes' Anti-Malware]
* [http://support.kaspersky.com/faq/?qid=208283363 TDSSKiller - AntiRootkit Utility]
* [http://www.surfright.nl/en/hitmanpro/ Hitman Pro]
* [http://www.eset.com/us/online-scanner/ ESET Online Scanner]
[http://windows.microsoft.com/MSE Microsoft Security Essentials] is a good permanent antivirus for Windows 7/Vista/XP if you don't already have one.
Further information can be found in the [[Troubleshoot Firefox issues caused by malware]] article.
Did this fix your problems? Please report back to us!

Can i move the position of submenu? The SpryMenuBar

Please see the pic! thank you !

I'm not sure what you mean, but I know there are horizontal and vertical menu's, and you have to move the editable region in the template to move the input on the pages. Hope it answers your question.

SpryMenuBar & IE

Similar Messages

Maybe you are looking for