SPRY menu bar not working in IE 9

Hey! I recently just finished building my very first website using Dreamweaver CS5.5!  It looks really great and works perfectly in firefox and safari however the SPRY menu bar does not work in IE 8 or 9. Does anyone know what i can do to fix this without messing up how the website looks in firefox and safari?
thanks,
Toby
here is a copy of my code:
1
@charset "UTF-8";
/* SpryMenuBarVertical.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
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 200px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 200px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 50%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 180px;
    left: -1000em;
    top: 0;
    background-color: #cccccc;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: ;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    color: ;
    font-size: 100%;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: ;
    color: ;
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 left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(home.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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
2
// 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
3
<!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>Integrated Sensors, LLC</title>
<style type="text/css">
body,td,th {
    font-family: "Arial Narrow", "Arial Narrow Bold", "Arial Narrow Bold Italic", "Arial Narrow Italic";
    font-size: medium;
    color: #000000;
body {
    background-image: url(images/_jpg%20png/background.jpg);
</style>
<link rel="shortcut icon" href="images/favicon.ico" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
    text-decoration: underline;
a:visited {
    text-decoration: underline;
a:hover {
    text-decoration: none;
a:active {
    text-decoration: underline;
h1 {
    font-size: large;
    color: #3165C9;
</style>
</head>
<body>
<table width="617" border="0" align="center" cellpadding="2" href="images/favicon.ico" rel="favicon">
  <tr>
    <td width="609"><table width="600" border="0" cellpadding="2">
      <tr>
        <td><img src="images/sensor2.gif" width="195" height="195" align="absmiddle" /></td>
        <td><img src="images/heading.gif" width="600" height="170" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="817" border="0" cellpadding="0">
      <tr>
        <td width="200" height="35" valign="top"><ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="index.html"><img src="images/b2_home.gif" alt="" onmouseover=" this.src='images/b2_home_ov.gif'" onmouseout=" this.src='images/b2_home.gif'"
style="cursor:pointer;"></a>            </li>
          <li><a href="about_1.html" class="MenuBarItemSubmenu"><img src="images/b2_about.gif" alt="" onmouseover=" this.src='images/b2_about_ov.gif'" onmouseout=" this.src='images/b2_about.gif'"
style="cursor:pointer;"></a>
            <ul>
                <li><a href="about_1.html"><img src="images/bs_1.gif" alt="" onmouseover=" this.src='images/bs_1_ov.gif'" onmouseout=" this.src='images/bs_1.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="about_2.html"><img src="images/bs_2.gif" alt="" onmouseover=" this.src='images/bs_2_ov.gif'" onmouseout=" this.src='images/bs_2.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="about_3.html"><img src="images/bs_3.gif" alt="" onmouseover=" this.src='images/bs_3_ov.gif'" onmouseout=" this.src='images/bs_3.gif'"
style="cursor:pointer;"></a></li>
            </ul>
          </li>
          <li><a href="technology_2.html" class="MenuBarItemSubmenu"><img src="images/b2_technology.gif" alt="" onmouseover=" this.src='images/b2_technology_ov.gif'" onmouseout=" this.src='images/b2_technology.gif'"
style="cursor:pointer;"></a>
            <ul>
                <li><a href="technology_2.html"><img src="images/bs_6.gif" alt="" onmouseover=" this.src='images/bs_6_ov.gif'" onmouseout=" this.src='images/bs_6.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="technology_3.html"><img src="images/bs_7.gif" alt="" onmouseover=" this.src='images/bs_7_ov.gif'" onmouseout=" this.src='images/bs_7.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="technology_4.html"><img src="images/bs_8.gif" alt="" onmouseover=" this.src='images/bs_8_ov.gif'" onmouseout=" this.src='images/bs_8.gif'"
style="cursor:pointer;"></a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu"><img src="images/b2_applications.gif" alt="" onmouseover=" this.src='images/b2_applications_ov.gif'" onmouseout=" this.src='images/b2_applications.gif'"
style="cursor:pointer;"></a>
            <ul>
                <li><a href="applications_1.html"><img src="images/bs_10.gif" alt="" onmouseover=" this.src='images/bs_10_ov.gif'" onmouseout=" this.src='images/bs_10.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="applications_2.html"><img src="images/bs_11.gif" alt="" onmouseover=" this.src='images/bs_11_ov.gif'" onmouseout=" this.src='images/bs_11.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="applications_3.html"><img src="images/bs_12.gif" alt="" onmouseover=" this.src='images/bs_12_ov.gif'" onmouseout=" this.src='images/bs_12.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="applications_4.html"><img src="images/bs_13.gif" alt="" onmouseover=" this.src='images/bs_13_ov.gif'" onmouseout=" this.src='images/bs_13.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="applications_5.html"><img src="images/bs_14.gif" alt="" onmouseover=" this.src='images/bs_14_ov.gif'" onmouseout=" this.src='images/bs_14.gif'"
style="cursor:pointer;"></a></li>
                <li><a href="applications_6.html"><img src="images/bs_15.gif" alt="" onmouseover=" this.src='images/bs_15_ov.gif'" onmouseout=" this.src='images/bs_15.gif'"
style="cursor:pointer;"></a></li>
            </ul>
          </li>
          <li><a href="publications.html" class="MenuBarItemSubmenu"><img src="images/b2_publications.gif" alt="" onmouseover=" this.src='images/b2_publications_ov.gif'" onmouseout=" this.src='images/b2_publications.gif'"
style="cursor:pointer;"></a></li>
          <li><a href="contact.html"><img src="images/b2_contact.gif" alt="" onmouseover=" this.src='images/b2_contact_ov.gif'" onmouseout=" this.src='images/b2_contact.gif'"
style="cursor:pointer;"></a></li>
        </ul></td>
        <td width="611" valign="top" bgcolor="#FFFFFF"><div align="justify">
          <blockquote>
            <h1 align="center">Background</h1>
            <p>Integrated Sensors is the first company in the world to apply the high gain, high-performance advantages of low cost PDP-TV (plasma display panel) technology to radiation detection.   This has resulted in the development of what is now known as the Plasma Panel Sensor (PPS), which has been called a <em>revolutionary</em> technology by U.S. government scientists. </p>
            <p>Integrated Sensors with seven issued patents holds all of the core intellectual property - which is seminal in scope - on the PPS radiation detector technology.  The PPS could well prove to be a transformational technology for a number of <em>multibillion</em> dollar industries, ranging from radiation therapeutics for the treatment of cancer, to medical imaging, to homeland security. </p>
            <p>With a secure IP and patent position established, and an international collaborative team involving over a dozen world-class scientists, and with substantial research investment by the U.S. government, Integration Sensors is now transitioning to the commercialization of its technology.</p>
          </blockquote>
          </div></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><p> </p>
    <p>Copyright 2007-2011. Integrated Sensors, LLC. All rights reserved.</p></td>
  </tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

90% of browser rendering problems are caused by invalid code.   See details here:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.i-sensors.com%2F
You have a bunch of unclosed <img /> tags on your menus.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Spry menu bar not working in Contribute

    I have created a site in Dreamweaver which my client will
    edit in Contribute. However when i view the site in Contribute -
    the Spry menu bar doesn't show up like it did in Dreamweaver.
    instead it shows up like a text list. Has anyone run into this
    issue before? if so how did you resolve it. Thank you.

    Although, I did download IE-Tester which allows you to test in different IE versions and it does not seen to work there?
    IE-tester shows that you have got a problem 0n line #102. Unfortunately, the tester cannot be relied upon reflecting the correct line number. There is a problem on line #27 where there is no space in front of "type="
    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>
    and line #86 where there is no space before "rel="
    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css"rel="stylesheet" type="text/css" />
    Now for my next problem, and if I can get this working I should be in fairly good shape. I had made some formatting changes (centered the menu bar, and made some color changes) See below, however those are now not working..Normally, when a question has been answered, it is marked as correct and any new questions are asked in a new post.
    However, you caught me in a good mood, just signed contracts for three new projects one as far away as Switserland.
    Lines #27 and #28 look like
    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>
    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    Lines #84 and #86 look like
    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>
    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css"rel="stylesheet" type="text/css" />
    This may not confuse the browser, but it is not very conducive. Remove either set of links.
    When I look at SpryMenuBarVertical.css
    change the value of line 16 to auto, has not been done
    starting at line 81, change the highlighted values, has not been done
    So it is no wonder there are no changes.
    Gramps

  • Vertical Spry Menu Bar not working in all browsers

    Hi, everyone!
    I'm hoping you'll help me troubleshoot something.  I have a spry menu bar (vertical) that's expanding properly in IE but not in Firefox or other browsers.  Here is the link:
    http://midlochorus.org/
    Thanks in advance for any help!
    Karen

    I'm pretty bummed not to receive any answers to this.  Is there nobody who can help me?

  • Spry menu bar not working on website

    I try to load the spry menu bar on my website and it keeps coming up as an order list instead of the style. Then these two errors pop up.
    SpryMenu.js requires SpryWidget.js!
    SpryMenuBarKeyNavigationPlugin.js requires SpryMenu.js!
    my website is:
    countryclublandscapesct.net
    let me know if you need anything else. thanks!

    A couple of your Spry supporting files look corrupted to me. 
    Try using Filezilla or another 3rd party FTP app to upload them.
    FYI: Spry is dead.  Adobe abandoned the framework last year with no plans to keep supporting it.  You might want to take this opportunity to find a better menu system.
    Pop-Menu  Magic2 by PVII (commercial DW extension)
    http://www.projectseven.com/products/menusystems/pmm2/index.htm
    jQuery Superfish  (open source code)
    http://users.tpg.com.au/j_birch/plugins/superfish/
    Nancy O.

  • Spry menu bar not working in IE

    Hi there,
    This is the first time I'm using Spry.  Everything was fine until I tested the site in IE. My top menu moves position upon rollover and the submenu doesn't show at all. I looked at the forums and thought I would add the IE hack into the code, but upon doing that I saw that it was already there. I'm not sure where to go from here.  Please help, many thanks in advance!
    Update Note: I just noticed it says it's version 1.4. I did update to 1.6.  When I check for Spry updates it does say I am using 1.6, but appears to be 1.4 in the css code. Any reason why?
    Site:
    http://retouching.zeoproductions.com/
    SpryMenuBarHorizontal.css:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */ 
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ 
    LAYOUT INFORMATION: describes box model, positioning, z-order 
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
    /* 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
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        cursor: pointer;
        width: 9.2em;
        margin: 0;
        float: left;
    /* 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
        list-style-type: none;
        font-size: 20pt;
        cursor: default;
        width: 190px;
        position: absolute;
        font-weight: normal;
        text-decoration: none;
        font-family: century;
        line-height: 13px;
        letter-spacing: 2pt;
        text-align: right;
        left: -1000px;
        z-index: 1020;
        margin-top: -2%;
        margin-right: 0%;
        margin-bottom: 0%;
        margin-left: -55%;
        padding: 1px;
    /* 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: 25pt;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        background-color: #E8E8E8;
        width: 190px;
        text-align: right;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
    /* 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
        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: #FFFFFF;
        padding: 0.5em 0.75em;
        color: #999999;
        text-decoration: none;
        font-family: century;
        font-variant: small-caps;
        font-size: 10pt;
        text-align: right;
        text-indent: 40px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        background-color: #FFFFFF;
        color: #000000;
    /* 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: #FFFFFF;
        color: #000000;
        left: 20px;
    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 left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        text-align: center;
        background-color: #FFFFFF;
    /* 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(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        white-space: nowrap;
    /* 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(SpryMenuBarRightHover.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;
    /* 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;

    OK... what I needed was a proper update... not sure why it didn't work the first time, but now I am definitely running 1.6.  My initial problems are no longer relevant.
    However.... this created a few other obstacles. The background color, text color, text-transform, and all hover attributes are not working in IE.  Confused I am.
    @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
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        list-style-type: none; 
        font-size: 100%; 
        cursor: default; 
    /* 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 
        padding: 0; 
        list-style-type: none; 
        font-size: 100%; 
        position: relative; 
        cursor: pointer; 
        width: 9.2em; 
        margin: 0; 
        float: left; 
        background-color: #FFFFFF; 
    /* 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 
        list-style-type: none; 
        font-size: 20pt; 
        cursor: default; 
        width: 190px; 
        position: absolute; 
        font-weight: normal; 
        text-decoration: none; 
        font-family: century; 
        line-height: 13px; 
        letter-spacing: 2pt; 
        text-align: right; 
        left: -1000px; 
        z-index: 1020; 
        margin-top: -2%; 
        margin-right: 0%; 
        margin-bottom: 0%; 
        margin-left: -55%; 
        padding: 1px; 
    /* 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: 25pt; 
    /* Menu item containers are same fixed width as parent */ 
    ul.MenuBarHorizontal ul li 
        background-color: #FFFFFF; 
        width: 190px; 
        text-align: right; 
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ 
    ul.MenuBarHorizontal ul ul 
        position: absolute; 
    /* 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 
        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: #FFFFFF;
        padding: 0.5em 0.75em;
        color: #999999;
        text-decoration: none;
        font-family: century;
        font-size: 10pt;
        text-align: right;
        text-indent: 40px;
        text-transform: uppercase;
        font-variant: normal;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        background-color: #FFFFFF;
        color: #000000;
    /* 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: #FFFFFF;
        color: #000000;
        left: 20px;
    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 left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        text-align: center;
        background-color: #FFFFFF;
    /* 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(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        white-space: nowrap;
    /* 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(SpryMenuBarRightHover.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;
    /* 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;

  • Spry menu bar not working in firefox; working in safari

    this seems to be a common problem, but i cant find a solution that works for me.
    here is the link (it's the parts that say "description" with the arrow to the right):
    http://www.coryharrisonsmith.com/video.html
    any ideas?
    thanks

    If the browser window has a size of 1280X1024, then logically speaking, a top margin of -2750% will place my element 35200px above where it would have been if there were no top margin and with a left margin of 410% it will place my element 4198px to the right of where it would have been if no margin had been applied.
    Unless the screen has a minimum size of 35200px X 4198px, you will not be able to see the element.
    I do not have Safari; but I do have DW, IE7-9, FF and Chrome, and believe me, they all give the same result.
    Gramps

  • Spry Menu Bar not working live??

    Hi,
    I'm brand new.  Uploaded index.html and sprymenubar.js, along with the .css file, but all I get are the bulleted lists.  Can someone help me??
    Here are the links to the page and the code...
    www.crystaleyet.com
    http://www.crystaleyet.com/sprymenubar.js
    http://www.crystaleyet.com/sprymenubarhorizontal.css

    These files are not found on the server.
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    Change your site definition preferences to document relative links instead of site root relative links.
    They should look like this (no leading dots or slash):
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    Upload your SpryAssets folder to the server and test it again by re-freshing your browser.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Spry menu bar not visible in live view

    Hi everyone,
    I was just working on the css for my spry menu bar and went to check it out in the live view, but it is no longer visible. I checked it out in Safari and Firefox to no avail. It looks totally fine in the design view in Dreamweaver. I'm new to web design and I have no idea what I did, but I'm really hoping someone here does! Below is the CSS.
    @charset "UTF-8";
    /* SpryMenuBarVertical.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
    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 8em;
    color: #333;
    background-color: #FFF;
    vertical-align: middle;
    text-align: left;
    white-space: normal;
    display: list-item;
    /* 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 same fixed width as parent */
    ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
    background-color: #FFF;
    letter-spacing: normal;
    vertical-align: middle;
    word-spacing: normal;
    white-space: pre;
    display: table-column;
    height: 70px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    width: 8.2em;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    border: 0px solid #FFF;
    alignment-adjust: central;
    background-color: #FFF;
    margin-top: 50px;
    margin-left: 50px;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #FFF;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #33C;
    color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical 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 left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

    My guess is that you have a dark background in which case the menu items will not be seen.
    I suggest you have a look here first http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one, then resurrect the original SpryMenuBarVertical.css and change as required.
    Gramps

  • Trouble with Spry Menu Bar Not Opening on Hover

    I have two Spry Menu Bars on this one page. They were both working fine. Now the menu bar on the top right is not opening on rollover. I have uploaded the Spry .JS and .CSSfiles to the server.Could it be that I added 2 to the names of the CSS styles, but not all of them? I just tested them all with 2 after the style name, and it didn't fix it.
    I also noticed that the ability to edit these two navigation bars using the Property Inspector went away. I can't seem to click on them to edit. Now I edit them through the code only.
    Rebuild it on another page, and paste in the code?
    Suggestions?
    ALso, getting an error message on line 2 of HTML below, which I don't remember editing.
    I will paste the template page HTML, then the CSS, then the Javascript Spry file for Menu Bar Horizontal. I did not edit the JS file at all.
    Link to the uploaded files: http://www.sproulcreative.com/filetest/panin_website/
    Thanks for any help you can offer.
    D
    HTML for template page:
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Press Reviews of Paninos Italian Restaurant Food in three Colorado Locations</title>
    <!-- TemplateEndEditable -->
    <link href="../styles_paninositalianrestaurant.css" rel="stylesheet" type="text/css" />
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="../SpryAssets/SpryMenuBar_topnav.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="../SpryAssets/SpryMenuBarHorizontal_topnav.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- TemplateParam name="LinksSidebar" type="boolean" value="true" -->
    </head>
    <body>
    <div id="wrapper">
    <a href="#skiptomaincontent">
         <img src="../images/spacer.gif" alt="Skip to main page content" name="spacer" width="1"
    height="1" class="invisible" id="spacer">   </a><!--ANCHOR FOR SCREEN READERS-->
    <!--START TOP NAV DIV-->
    <div id="topnav">
    <!--START TWITTER/FACEBOOK MENU BAR -->
    <script type="text/javascript">
    <!--
    var MenuBar2 = new Spry.Widget.MenuBar("twittermenu", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    <ul id="twittermenu" class="MenuBarHorizontal2">
          <li><a href="../paninos_local_italian_restaurant_fort_collins_colorado_springs_minnesota.html">H ome</a></li>
          <li><a href="../reviews_italian_restaurant_food.html">Reviews</a></li>
          <li><a href="../history_of_paninos_local_italian_restaurant_coloradosprings_fortcollins_minnesot a.html">History</a></li>
          <li><a class="MenuBarItemSubmenu2" href="#">Twitter</a>
                      <ul>
                            <li><a href="http://twitter.com/Paninosfc">Follow Fort Collins, CO, Paninos</a></li>
                            <li><a href="http://twitter.com/paninosmn">Follow Minnesota Paninos</a></li>
                      </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu2">Facebook</a>
                <ul>
                      <li><a href="http://www.facebook.com/search/?q=Paninos&init=quick#/pages/North-Oaks-MN/Paninos/13234142 7180?v=wall&ref=search">Minnesota Twin Cities Four</a></li>
                </ul>
                </li>
    </ul>
    <!--END TWITTER/FACEBOOK MENU BAR-->
    </div>
    <!--ENDS TOP NAV DIV-->
    <div id="pagebg">
    <div id="centralpageborder"><!--FOR BORDER TRIM & BG color-->
    <!--START OF HEADERBOX-->
    <div id="headerbox">
          <div align="left">
                <img src="../images/web_logo_paninos_final.png" alt="Paninos Italian Restaurant Logo (black text with a tomato for the letter O), Your family's Italian restaurant for over 35 years, locally owned and operated." width="215" height="118" class="paddingbottom" />
    <!--START OF MAIN FOUR NAVIGATION -->
    <ul id="MainFourNav" class="MenuBarHorizontal">
          <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_mainnav_locations_contact.png" alt="Paninos Italian Restaurant Locations and Contact Information: Colorado Springs, Fort Collins, Minnesota" name="locationscontactbutton" width="167" height="24" border="0" id="locationscontactbutton" /></a>                 <ul>
                         <li><a href="../contact_info_italian_restaurant_fort_collins_colorado_paninos.html">Fort Collins, Colorado, by CSU</a></li>
                         <li><a href="../contact_info_italian_restaurant_colorado_springs_downtown_colorado_paninos.html" >Colorado Springs Downtown: Tejon St. by Colorado College</a></li>
    <li><a href="../contact_info_italian_restaurant_colorado_springs_8th_street_colorado_paninos.htm l">Colorado Springs: South Eighth St.</a></li>
                      <li><a href="http://paninos.com/minnesota/">Minnesota website</a></li>
                      </ul></li>
          <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_main4nav_download_menus.png" alt="Download Italian Restaurant Menus in PDF format for restaurants in Fort Collins, Colorado; Colorado Springs, Colorado; and Minnesota" name="menudownloadbutton" width="142" height="24" border="0" id="menudownloadbutton" /></a>
                <ul>
                      <li><a href="#"><em>Please pick your favorite Paninos:</em></a></li>
                      <li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Downtown.pdf">Color ado Springs Downtown: Tejon St. by Colorado College</a></li>
    <li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Eighth_Street.pdf"> Colorado Springs: South Eighth St.</a></li>
                      <li><a href="../online_menus_local_italian_food/Paninos_Menu_Fort_Collins_Colorado.pdf">Fort Collins, Colorado, by CSU</a></li>
                      <li><a href="http://paninos.com/minnesota/">Minnesota (go to website)</a></li>
                </ul>
          </li>
          <li><a href="../photo_gallery_pasta_dishes_pizza_italian_food.html"><img src="../images/img_main4nav_photo_gallery.png" alt="Photo Gallery of Local Italian Food including pizza and pasta" name="photogallery" width="56" height="24" border="0" id="photogallery" /></a> </li>
          <li><a href="../pizza_coupons_and_special_deals_italian_food.html"><img src="../images/img_main4nav_specials.png" alt="Pizza Coupons and Specials" name="pizzacouponsandspecials" width="71" height="24" border="0" id="pizzacouponsandspecials" /></a> </li>
    </ul>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MainFourNav", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>           
                <!-- TemplateBeginEditable name="HeaderPhotos" -->
                <p class="headerphotos"><img src="../images/imgheader_lasagna_beef_hot_cheesey_coloradosprings_fortcollins_italian_res taurant.png" width="263" height="133" /><img src="../images/imgheader_spinach_salad_with_chicken.png" width="263" height="133" /><img src="../images/imgheader_big-t-pizza2.png" width="263" height="133" /></p>
                <!-- TemplateEndEditable --></div>
    </div><!--ENDS HEADERBOX DIV-->
    <div id="bodybox"><!--BOX AROUND MAIN PAGE TEXT, FOR WHOLE PAGE BELOW HEADER AREA-->
    <div id="pagetitle"><!-- TemplateBeginEditable name="MainPageHeader" --><img src="../images/img_title_press_reviews_italian_restaurant.png" width="307" height="38" /><!-- TemplateEndEditable --></div><!--ENDS PAGE TITLE-->
    <div id="innerbdybox"><!--WRAPS ALL MAIN CONTENT BELOW BODYBOX TITLE, all 3 columns -->
    <div id="content"><!--WRAPS MAINTEXT AND PHOTO SIDEBAR COLUMNS-->
    <div id="maintext"><!--MAINTEXT OR BODY CONTENT OF P-->
    <!-- TemplateBeginEditable name="BodyTextSection" -->
    <a name="skiptomaincontent" id="skiptomaincontent"></a><!--ANCHOR FOR SCREENREADERS-->
    <h1>A Tradition Food And Sports: <br />
                            CC &amp; Panino’s Love of Hockey Runs From Colorado to Minnesota</h1>
          <h4>Byline: By Jim Bainbridge, The Gazette</h4>
          <p>No Colorado Springs business has had a deeper bond with the Colorado College hockey program during the past three decades than Panino’s Restaurant, a connection seen on its walls, in its clientele and in its bloodlines.<br />
                Panino’s has been tied to the school’s hockey program since the restaurant was bought in 1974 by former CC All-America hockey player Tony Frasca. It’s still the place to be on game day a generation later with his son Mike running things. <a href="http://daily.gazette.com/Repository/ml.asp?Ref=VGhlR2F6ZXR0ZS8yMDA1LzAzLzI5I0FyMDMzMDI=&Mo de=HTML&Locale=english-skin-custom"><span class="smalltext">Click here to view entire article.</span></a><br />
    <span class="smalltext">(Reprinted with permission of The Gazette)</span></p>
          <!-- TemplateEndEditable --> </div>
    <!--ENDS MAINTEXT DIV-->
          <div id="photosidebar">
                <!--STARTS PHOTO SIDEBAR DIV-->
                <!-- TemplateBeginEditable name="PhotoSidebar" --><img src="../images/img_waiter1_pizza_lasagna.png" alt="Happy waiter serving Pizza and Lasagna" width="190" height="158" /> <br />
                <img src="../images/img_panino_italian_grinder_sandwich.png" alt="Grinder Hot Italian Sandwich called a Panino" width="190" height="158" /><!-- TemplateEndEditable --></div>
          <!--ENDS PHOTOSIDEBAR DIV-->
    </div><!--ENDS #CONTENT DIV THAT ENCLOSES 2 COLUMNS- MAINTEXT AND PHOTOSIDEBAR-->
          <!-- TemplateBeginIf cond="_document['LinksSidebar']" --><!-- TemplateBeginEditable name="EditRegion3" -->
    <div id="linkssidebar"><!--START LEFT LINKSSIDEBAR DIV--> 
            <p>The Gazette<br />
                The Coloradoan<br />
                The North Forty News<br />
                Colorado Springs Times</p>
    </div><!--ENDS LINKSSIDEBAR DIV-->
    <!-- TemplateEndEditable --><!-- TemplateEndIf -->
    </div><!--ENDS INNERBODYBOX DIV THAT WRAPS ALL 3 COLUMNS BELOW THE HEADER -->
    <div id="footer"> </div><!--CLEARS CONTENT BEFORE LOWER CONTENT BORDER-->
    <br />
    <br />
    </div> <!--****ENDS BODYBOX DIV THAT ENCLOSES PAGE HEADER BELOW "HEADER" AREA,INNERBODYBOX (FOR ALL 3 COLUMNS OF CONTENT), and FOOTER DIV (TO CLEAR CONTENT) . MOVING THIS AFER THE LINKKSIDEBAR SEEMED TO MAKE IT ALGIN CORRECTLY. PUTTNG AFTER THE PHOTOSIDEBAR MADE THE MAINTEXT HAVE SCROLL BAR-->
    </div><!--ENDS CENTRALPAGEBORDER DIV-->
    </div><!--ENDS PAGEBG DIV-->
    </div><!--ENDS WRAPPER TO MAKE PAGE LEFT JUSTIFY -->
    </body>
    </html>
    CSS for Spry Menu Bar:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal2
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        /*margin-top: -10px; */
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0px;
        padding-top: 0;
        padding-bottom: 0;
    /* 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.MenuBarHorizontal2 li
        list-style-type: none;
        font-size: 95%;
        position: relative;
        text-align: left;
        cursor: pointer;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    /* 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.MenuBarHorizontal2 ul
        margin: 0;
        padding: 0;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        left: -1000em;
    /* 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible
        left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal2 ul li
        width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal2 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal2 ul
        border: 1px solid #9E2532;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal2 a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: #F3E8CC;
        text-decoration: none;
        background-color: #663300;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal2 a:hover, ul.MenuBarHorizontal2 a:focus
        color: #FFF;
        background-color: #663300;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal2 a.MenuBarItemHover, ul.MenuBarHorizontal2 a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal2 a.MenuBarSubmenuVisible
        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 left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal2 a.MenuBarItemSubmenu2
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenu2
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 iframe
        position: absolute;
        z-index: 1010;
    /* 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.MenuBarHorizontal2 li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    JAVASCRIPT FILE FOR MENU BAR HORIZONTAL:
    /* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
    // 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.
    var Spry;
    if(!Spry)
        Spry = {};
    if(!Spry.Widget)
        Spry.Widget = {};
    // 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;
        var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
        if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
            // bail on older unsupported browsers
            return;
        // load hover images now
        if(opts)
            for(var k in opts)
                var rollover = new Image;
                rollover.src = opts[k];
        if(this.element)
            this.currMenu = this.element;
            var items = this.element.getElementsByTagName('li');
            for(var i=0; i<items.length; i++)
                this.initialize(items[i], element, isie);
                if(isie)
                    this.addClassName(items[i], "MenuBarItemIE");
                    items[i].style.position = "static";
            if(isie)
                if(this.hasClassName(this.element, "MenuBarVertical"))
                    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.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:false;';
        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.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, "MenuBarActive");
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return (navigator.vendor == 'Apple Computer, Inc.' && (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, "MenuBarSubmenuVisible");
            if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
                if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
                    menu.style.top = menu.parentNode.offsetTop + 'px';
            if(typeof document.uniqueID != "undefined")
                this.createIframeLayer(menu);
        this.addClassName(this.element, "MenuBarActive");
    // 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, "MenuBarSubmenuVisible");
            if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
                menu.style.top = '';
                menu.style.left = '';
            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, isie)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = false;
        if(menu)
            this.addClassName(link, "MenuBarItemSubmenu");
            hasSubMenu = true;
        if(!isie)
            // 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)
            if(self.bubbledTextEvent())
                // ignore bubbled text events
                return;
            clearTimeout(closetime);
            if(self.currMenu == listitem)
                self.currMenu = null;
            // show menu highlighting
            self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
            if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
                opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
        }, false);
        this.addEventListener(listitem, 'mouseout', function(e)
            if(self.bubbledTextEvent())
                // ignore bubbled text events
                return;
            var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
            if(!listitem.contains(related))
                clearTimeout(opentime);
                self.currMenu = listitem;
                // remove menu highlighting
                self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
                if(menu)
                    closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
        }, false);

    It has to do with all of your absolutely positioned elements.  What's happening is that the menu is falling behind the absolutely positioned elements on your page.  Since there is nothing there, it's like trying to click a link that is outside your home while you are staring through a window.  Personally with that page setup you have now I really don't see a need for absolutely positioned elements.  But if you feel you will require them as part of your design you need to ensure the z-index of your menu layer is greater than that of the body elements positioned below it.

  • Spry menu bar doesnt work in IE

    Hi,
    I have created a new site in dreamweaver cs5 that works fine in firefox and safari but in IE the spry menu bar does not appear. It does not show at all until you put the mouse over it then the rollover box shows and you are able to click on it to get to the page. The whole bar does not show at all, just each box once you put mouse in area???
    Any ideas what is wrong??
    This is the site : www.adamthomastherapy.co.uk
    Thanks,
    Katie

    Change the rule
    ul.MenuBarHorizontal a {
        background-image: url("../../../../../../../../../Desktop/Adams%20site/buttons.gif");
        color: #FFFFFF;
        cursor: pointer;
        display: block;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
        text-decoration: none;
    to
    ul.MenuBarHorizontal a {
        background-image: url("../Gifs/buttons.gif");
        color: #FFFFFF;
        cursor: pointer;
        display: block;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
        text-decoration: none;
    This path to your image seems quite wrong and overrides the li background. White text on white background (for IE), you cannot see anything.

  • Spry Menu Bar not loading on website

    Hey guys,
    I am currently editing a website so that it has a large horizontal spry menu bar on the homepage and once you go to other pages it has a smaller spry menu bar as a header. To do this I have created to .css files, for the larger one the CSS file is called SpryMenuBarHorizontal.css and the css file of the smaller header is called SpryMenuBar1.css. I have uploaded the Spry Assets folder to my remote server and a test html just to see whether it works. For some reason though it doesn't work? In DW on Live View and Previewing in Chrome and IE work perfectly fine for both the larger and smaller Spry Menu Bar. Bear in mind I work on a local server in DW. The test html is http://www.soccerexperience.com/cover_flow_test.html. On this page I have included the smaller Spry Menu Bar. I haven't actually tested out my homepage yet. Could you please help me shed some light on this problem? I am fairly new to website editing so if your answer could be clear that would be great.
    Thanks in advance

    Thanks for your reply David Powers. I have now uploaded the Js file and all is well! Thanks again

  • Spry Horizontal Menu Bar not working in IE

    Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
    I appreciate any help I can get with this as I have tried everything I know.
    This is the link to my site: www.digitaldesignsbymargee.com

    Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
    w@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
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
    /* 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: 0px;
        padding: 0px;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 14em;
        float: left;
        border-color: white;
        border-left-style: solid;
        border-left-width: 1px;
        border-right-style: none;
        border-right-width: 1px;
    /* 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: 14em;
        position: absolute;
        left: -1000em;
    /* 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: 14em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: 0 0 0 99%;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 0.9em 0.75em;
        color: white;
        font-size: 14px;
        font-weight: bold;
        font-family: Arial, Helvetica, Verdana, sans-serif;
        text-decoration: none;
        color: white;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        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
        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 left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 10px 85%;
    /* 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(SpryMenuBarRight.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
        b/ackground-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 10px 85%;
    /* 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
        b/ackground-image: url(SpryMenuBarRightHover.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;
            float: left;
           /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
    ul.MenuBarHorizontal a:visited { color: white;}
    ul ul a { background-color: #436d9c; }
    ul a.MenuBarItemHover { background-color: #19385a; }
    ul .MenuBarItemSubmenu ul li a { border: none; }
    ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
    ul.MenuBarSubmenuVisible li { border: none; }
    I appreciate any help I can get with this as I have tried everything I know.

  • Spry Vertical Menu Bar not working in IE8

    I've upgraded to 1.6.1, but it still doesn't work in IE8 unless in compatibility mode.  http://jimgreenrealty.com/Test.html
    Works fine in other browsers and other Spry elements appear to work normally in IE8.  Can anyone help?
    Thanks,
    Steve B.

    If you deselect compatibility mode on IE8 the menu bar disappears (on
    all our computers anyway).  Works fine in all other versions of IE and
    all other browsers.  Updated to Spry 1.6.1 and still no avail.
    Here it is w/o the emulating statement: http://jimgreenrealty.com/Test.html
    The other pages on the site still have it.
    Thanks for looking at it.
    */ <mailto:[email protected]>
    <mailto:[email protected]>/*
    Message was edited by: RRR Trail
    Not sure how this forum works, I responded by email and it posts my email address.  I don't seem to be able to edit to remove it.  Please remove the email address.  Thanks,

  • My verticle Spry menu will not work in Internet Explorer

    I know a lot of people have posted about similar issues, and I've researched multiple "solutions" on multiple forums for something that will work, but nothing has solved the problem so far.
    Here is a link to the prototype homepage: http://www.abrasivesales.com/indexnew.html
    Everything looks great on my mac when opened in Firefox or Safari, however when opened on Internet Explorer on a PC, the menu ceases to be verticle, instead extending horizontally past the end of the screen.  Also, the menu items adopt a white background color, and none of the submenu items will appear when their parent menu item is rolled over.
    PLEASE HELP....this issue has kept me from launching the site for a week now, and my superiors are wondering why this problem is taking me longer than it did to build the homepage in the first place, so I'd love to look like less of an idiot.
    I assuming this is a CSS issue, so I've posted my CSS code below:
    @charset "UTF-8";
    /* SpryMenuBarVertical.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
    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
        margin: 0;
        padding: ;
        list-style-type: none;
        font-size: 12px;
        cursor: default;
        font-weight: bold;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        left: 0px;
        top: 0px;
    /* 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 same fixed width as parent */
    ul.MenuBarVertical li
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 150px;
        margin: 0;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
        margin: 0 0 0 100%;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        left: -1000em;
        top: 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
        left: 0;
        width: 165px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
        width: auto;
    #masterContainer #container #sidebar #sideNav2 li ul li {
        top: -400px;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
        border: 0
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
        border: 0
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        padding: 2px 3px;
        color: #333;
        text-decoration: none;
        font-family: "Comic Sans MS", cursive;
        font-size: 13.5px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
        background-color: #33C;
        color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
        background-color: #1A6AF4;
        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 left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarRight.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.MenuBarVertical a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    #masterContainer #container #sidebar #sideNav2 {
    #masterContainer #container #sidebar li ul li  {
        background-color: #F4EC9A;
    /* 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.MenuBarVertical li.MenuBarItemIE
    display: inline;
    float: left;

    I solved one of my own problems.  It turns out I still had a setting for width set to "auto" instead of a pixel amount.  So now my menu displays normally and my submenus are no longer invisible.
    One one tab, "Products", I set the top at -430px, which internet explorer seems to ignore.  I'm so close!  I'll search for the answer but any help is greatly appreciated.

  • Spry Menu Bar not showing up in Internet Explorer 7

    So, after hours of playing with CSS code yesterday and today,
    I finally got my Spry navigation bar laid out the way I would like
    it to display in Safari. It look a very long time for me to
    customize it the way I wanted it, but it the end, it turned out
    fine.
    Then... to my horror, I jumped into Internet Explorer 7, and
    there is no navigation bar to be seen. I've heard of some problems
    when viewing Spry menus in different browsers, but I never heard of
    the menu simply not being displayed.
    Any ideas on why this would occur? You can view the page I'm
    working on
    here.
    Any insights would be greatly appreciated. Thanks!

    I am sorry, but I do not see a SpryMenuBar in your document nor do i see a problem with the menubar that you do have. I have tested in IE7+
    Gramps

Maybe you are looking for

  • [SOLVED] Broken SLiM after pacman -Syu

    I know that it's good to understand the rolling release approach from ArchLinux and that an update may have unforeseen consequences. Yesterday I wasn't that smart and updated my system using pacman -Syu. I'm having the system with SLiM and Cinnamon o

  • Problem with a Business Rule

    Hi I am trying to set an account transformation BR. Account A goes to Account B. I set the the same flow. nothing fancy... When i have an amount in account B, and if account A is different than 0, then the amount is replicated to the account B. So fa

  • Viewing Photo as "Picture Size"

    Does anyone know what happened to the option "Picture Size" under the "View" menu in Photoshop CS6?  It was great for viewing as picture size before sharpenning.  I know the option 100% is there, but it is often larger than the actual photo size. Als

  • Error while sending PO email as PO is in smartform

    As my PO is in smartform so when I am sendin the email of PO using SAP standard Program  'SAPFM06P', FORM routine ENTRY_NEU'  the processing routines,system is giving the error to open PO form. So is there any way to send the email of smartform. Than

  • Flash & Augmented Reality on Phones

    Hi, Does anyone know of any examples of Flash-based augmented reality on cell phones? Is it possible? Is there anything like Layar for Flash? (Sorry for the simple question. Yes, I've googled the topic.) Thank you. -Laxmidi