Spry Menu not displaying correctly in IE

Can someone take a look at the following link and tell me why
the spry menu isn't displaying correctly in IE?
http://www.cedarcrossings.com/dev
It's working fine in Safari, Firefox, Opera, Camino, etc.,
but for some reason the sub-menus won't drop below the headings in
IE.
Thanks in advance.

I had the same problem and finally just gave up on the Spry
menu and went with a license from Milonic.com.

Similar Messages

  • DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8

    Hi,
    I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
    It works well in Google Chrome.
    It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
    Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
    Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
    The menu can be seen at work by clicking on this link:
    www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
    Below are all the scrips involved.
    Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
    /* 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: 10;
        padding: 0;
        list-style-type: none;
        font-size: 80%;
        cursor: default;
        width: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-align: center;
        /*whole menu moves*/
        margin-left: 100px;
    /* 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;
    /* My Note --Top buttons' background, height and font size adjust-- */
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        /* My note --I added the height and background-image as Main-Buttons.jpg-- */
        height: 55px;   
        background-image: url(../Main-Buttons.jpg);
        margin: -2;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: center;
        /*text-align: left;*/
        cursor: pointer;
        width: 99px;
        float: left;
    /* My note --Submenu font size adjust-- */
    /* 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
        /*height:38px;*/
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 87%;
        z-index: 1020;
        cursor: default;
        width: 160px;
        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
        /* My note --this margin alligns the drop buttons up and down-- */
        margin-top: 24px;
        height: 25px;   
        left: auto;
    /* My note --drop menu size adjustments-- */
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        height: 25px;
        width: 160px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position:absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        /*border: 1px solid #CCC;*/
    /* My note --Text Allignment global-- */
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        /*height: 40px;*/
        text-align: center;
        /*vertical-align: center;*/
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        text-decoration: none;
        /*zzzzzzzz Text Color*/
        color: #333;        /*background-color: #CCC;*/
        letter-spacing: -0.00px;
        margin-left: 1px;   
        margin-right: 0px;
        /*alligns text up or down globally*/
        margin-top: 1px;
    /* 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: #33C;
        color: #FFF;*/
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-image: url(../Main-Buttons-mouse-over.jpg);    /*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.MenuBarHorizontal a.MenuBarItemSubmenu
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* My note --mouse over-- */
    /* 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-repeat: no-repeat;
        background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
    // SpryMenuBar.js - version 0.12 - 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.
    var Spry; if (!Spry) 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];
    And last, here is the HTML code that has also not been modified in any way:
    <!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>Untitled Document</title>
    <script src="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Buy</a>
        <ul>
          <li><a href="#">Shop from Private Owner</a></li>
          <li><a href="#">Shop Direct from Stores</a></li>
          <li><a href="#">Help Buying</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Bid</a>
        <ul>
          <li><a href="#">Shop from Auction</a></li>
          <li><a href="#">Help Bidding</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Trade</a>
        <ul>
          <li><a href="#">Shop for Trades</a></li>
          <li><a href="#">Help Trading</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">List Items</a>
        <ul>
          <li><a href="#">List Items in Auction</a></li>
          <li><a href="#">List Items for Sale</a></li>
          <li><a href="#">List Items for Trade</a></li>
          <li><a href="#">Help Listing Items</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Intro</a>
        <ul>
          <li><a href="#">Flash Site & Intro</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
        <ul>
          <li><a href="#">Activity</a></li>
          <li><a href="#">Account</a></li>
          <li><a href="#">Mail</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Help</a>
        <ul>
          <li><a href="#">Main Help</a></li>
          <li><a href="#">Site Map</a></li>
        </ul>
      </li>
    </ul>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    Thanks in advance for any of your help.
    Jose H.

    Hello Nancy,
    I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now.  Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
    In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
    By the way.. the IE8 security measure did pop up while working from the server.
    Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
    Good luck.. as I know it can become a complicated task when creating custom Spry menus.
    <b>Here is the finished CSS script</b>
    <code>@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: 10;
        padding: 0;
        list-style-type: none;
        /* font size for top menu*/
        font-size: 80%;
        cursor: default;
        width: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-align: center;
        /*whole menu moves*/
        margin-left: 100px;
    /* 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;
    /* My Note --Top buttons' background, height and font size adjust-- */
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        /* My note --I added the height and background-image as Main-Buttons.jpg-- */
        height: 55px;   
        background-image: url(../Main-Buttons.jpg);
        margin: -2;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: center;
        /*text-align: left;*/
        cursor: pointer;
        width: 99px;
        float: left;
    /* My note --Submenu font size adjust-- */
    /* 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: 87%;
        z-index: 1020;
        cursor: default;
        width: 160px;
        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
        /* My note --this margin alligns the drop buttons up and down-- */
        margin-top: 0px;
        height: 25px;
        left: auto;
    /* My note --drop menu size adjustments-- */
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        height: 25px;
        width: 162px;
        /* New addition */
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position:absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        /*border: 1px solid #CCC;*/
    /* My note --Text Allignment global-- */
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        /*My note -- took out borders &amp; changed text color to #333(black)&amp; added my own mouse not over image-- */   
        /*border: 0px solid #333332;*/
        background-image: url(../Main-Buttons.jpg);
        /*height: 40px;*/
        text-align: center;   
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        text-decoration: none;
        /*My note --Text Color-- */
        color: #333;        /*background-color: was #CCC;*/
        letter-spacing: -0.00px;
        margin-left: 1px;   
        margin-right: 0px;
        /*alligns text up or down globally*/
        margin-top: 1px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        /* My note --took out all backgound &amp; text color for mouse over-- */
        /*background-color: #33C;
        color: #FFF;*/
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        /*My note -- took out background &amp; text &amp; added my own mouse over image-- */
        background-image: url(../Main-Buttons-mouse-over.jpg);
        /*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.MenuBarHorizontal a.MenuBarItemSubmenu
        /* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
        height: 40px;
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* My note --mouse over-- */
    /* 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-repeat: no-repeat;
        background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f&#92;loat: left;
            /* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
            background: #3e6487;
    </code>
    <b>Here is the modified HTML script</b>
    <code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
    &lt;script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;ul id="MenuBar1" class="MenuBarHorizontal"&gt;
      &lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;Buy&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop from Private Owner&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop Direct from Stores&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Buying&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Bid&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop from Auction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Bidding&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Trade&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop for Trades&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Trading&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;List Items&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items in Auction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items for Sale&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items for Trade&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Listing Items&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Intro&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Flash Site &amp;amp; Intro&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;My Xchange&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Activity&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Account&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mail&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;!-- My note --the bellow line was: &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; --- changing it to: &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Contact Us&lt;/a&gt;     corrected the height of the Contact us button wich did not have sub menus and because of this only diplayed at half size vertically in IE8 //--&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Contact Us&lt;/a&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Help&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Site Map&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;script type="text/javascript"&gt;
    &lt;!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //--&gt;
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    </code>
    And Richard.. Thanks again for the time and your help, truly appreciated.
    Jose H.

  • On windows 7 only, ie9 and firefox 4 spry bar not displaying correctly?

    This website www.colonialstock.com does not display the spry menubar correctly.  I need it to go all the way to the right.  But when I do a view on IE8 or do the compatibility view on IE9 (which is the same as IE8) it brings the bar too far, making it fall below where it is.  I need it to work on both browsers.  The same is on firefox 4 and earlier versions.  I am guessing this is just a windows 7 issue in all.  Also on firefox when i hover on this tab issuer services> annual meeting & proxy the sub sub menu appears farther down than it should it works fine on all ie8/9 versions.  Please let me know if you have any solutions.

    See here http://forums.adobe.com/message/4002145#4002145
    Gramps

  • Spry Menu not positioned correctly in IE

    I've search for a answer to this and it seems to be common but there has been no solution to be found. I have a spry horizontal menu that in FireFox, Safari and Opera opens and functions fine. In IE the menu buttons are in the correct place but the dropdowns are at the top of the screen. The virtical position is correct but the horizontal position is obviously off. I tried to keep the spry code as original as possible and have only altered the css to change font sizes and bkg colors.
    Another issue I can't seem to solve is the font sizes for the sub menus. I would like the main buttons to be in bold and every sub menu that opens below to be in a normal font. No matter what I change in the CSS I can't get the fonts to go to normal w/o it altering the fonts in the button above. I hope this make sence. Here is the CSS code I'm working with.
    @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;
        padding: 0;
        list-style-type: none;
        font-size: 17px;
        cursor: default;
        width: 800px;
    /* 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 this controls the main menu bar */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 17px;
        position: relative;
        text-align: center;
        cursor: pointer;
        width: 160px;
        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
        margin: -5% 0 0 20%;
        padding: 0;
        list-style-type: none;
        font-size: 10px;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        left: -1000em;
        font-weight: normal;
    /* 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: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #000000;
        color: #FFFFFF;
        text-decoration: none;
        width: 162px;
        font-style: oblique;
        font-size: 16px;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    /* 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: #666666;
        color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #999999;
        color: #FFF;   
    /*My Menu bar test css*/
    ul.testtext
        color:#006699;
        font-size:12px;
    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%;
    /* 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
        background-image: url(SpryMenuBarDownHover.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;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;

    Because you have centered the menu items you need to take special care not to upset the apple cart.
    To center the menu items properly have a look here: http://foundationphp.com/tutorials/sprymenu/centering.php and while you are at it have a look at customizing a Spry menu as well.
    After you have done that and made the appropriate chenges, please return here with further questions.
    Ben

  • Spry Menu not working correctly

    Hopefully this is the right part of the forum to post this question, if not, I apologize.
    I have created a site in dreamweaver and am using a single Spry Menu Bar. I have read tons of forum postings about Drop down menus not working in IE, however, mine don't work in any browser or in the Live View either. I have a feeling it has something to do with either the div containing the menu bar or the sizing, but I can't tell.  Please help.
    ul.MenuBarHorizontal
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size:17px;
              font-family:Tahoma, Geneva, sans-serif;
              cursor: default;
              width: 100%;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
              z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size:100%;
              position: relative;
              text-align: left;
              cursor: pointer;
              width:6.8em;
              height:3.5em;
              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
              margin: 0;
              padding: 0;
              list-style-type: none;
              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.MenuBarHorizontal ul.MenuBarSubmenuVisible
              left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
              width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
              position: absolute;
              margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
              left: auto;
              top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
              border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
              display: block;
              cursor: pointer;
              background-color: #CCC;
              padding: 0.7em 0.5em;
              color: #333;
              text-decoration: none;
    /* 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: #33C;
              color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
              background-color: #33C;
              color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
              background-image: url(SpryMenuBarDown.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
              background-image: url(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
              background-image: url(SpryMenuBarDownHover.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;
              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;
                        background: #FFF;
    Here is the code for the 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>
    <script language="javascript" type="text/javascript" src="http://www.onbile.com/websites/41ea989914d81eb7bd2e415141cd40fe"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GuitarFusion.com - Play. Learn. Make Music</title>
    <link href="guitarfusionblogstyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    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];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    <!--[if lt IE 7.]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-15280994-2']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    </script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="MM_preloadImages('images/homeOver.jpg','images/BioOver.jpg','images/LearnOver.jpg ','images/LessonsOver.jpg','images/ContactOver.jpg')">
    <div id="wrapper">
    <div id="header">
    <div id="logo"></div>
    <div id="social"><a href="http://www.facebook.com/pages/Guitarfusion/208575872514732"><img src="../images/facebook_32.png" width="32" height="32" alt="Facebook" border="0"/></a><a href="http://www.linkedin.com/in/sammills"><img src="../images/linkedin_32.png" width="32" height="32" alt="Linkedin" border="0" /></a><a href="http://www.myspace.com/lucid77"><img src="../images/myspace_32.png" width="32" height="32" alt="Myspace" border="0" /></a><a href="http://twitter.com/#!/guitarfusion"><img src="../images/twitter_32.png" width="32" height="32" alt="Twitter" border="0"></a><a href="http://www.guitarfusion.com/blog"><img src="../images/wordpress_32.png" width="32" height="32" alt="Wordpress" border="0"/></a><a href="http://www.youtube.com/guitarfusiondotcom"><img src="../images/youtube_32.png" width="32" height="32" alt="Youtube" border="0" /></a></div>
    <!-- Old Nav
    <div id="nav"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/homeOver.jpg',1)"><img src="images/home.jpg" alt="Home" name="Home" width="97" height="45" border="0" id="Home" /></a><a href="biography.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bio','','images/BioOver.jpg',1)"><img src="images/Bio.jpg" alt="Biography" name="Bio" width="97" height="45" border="0" id="Bio" /></a><a href="learn.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Learn','','images/LearnOver.jpg',1)"><img src="images/Learn.jpg" alt="Learn Online" name="Learn" width="97" height="45" border="0" id="Learn" /></a>    <a href="lessons.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lessons','','images/LessonsOver.jpg',1)"><img src="images/Lessons.jpg" alt="Lessons" name="Lessons" width="109" height="45" border="0" id="Lessons" /></a>    <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/ContactOver.jpg',1)"><img src="images/Contact.jpg" alt="Contact" name="Contact" width="126" height="45" border="0" id="Contact" /></a></div>
    End Old Nav -->
    <div id="navdropdown">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="#">Home</a>      </li>
        <li><a href="#" class="MenuBarItemSubmenu">About Me</a>
          <ul>
            <li><a href="#" title="A little about myself.">Biography</a></li>
            <li><a href="#">Cirriculum Vitae</a></li>
            <li><a href="#" title="See me play or teach.">Mp3 &amp; Videos</a></li>
            <li><a href="#" title="Where am I am playing?">Performances</a></li>
            <li><a href="#" title="Want me to play your event or party?">Booking</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">Lessons</a>
          <ul>
            <li><a href="#" title="What will you learn?">Syllabus</a>          </li>
            <li><a href="#" title="How much does this cost?">Pricing</a></li>
            <li><a href="#" title="Where do lessons take place?">Locations</a></li>
            <li><a href="#" title="What books and supplies will you need?"> Books &amp; Supplies</a></li>
    </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Learn Online</a>
          <ul>
            <li><a href="#">Guitar</a></li>
            <li><a href="#">Bass</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Contact</a>
          <ul>
            <li><a href="#">Email </a></li>
            <li><a href="#" title="Facebook, Twitter, Etc..">Social Media</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </div>
    <div id="content">
      <div id="blog_header"></div>
    <div id="sidebar">
    <form method=post action="http://poll.pollcode.com/Vp1c"><table border=0 width=150 bgcolor="#ffffff" cellspacing=0 cellpadding=2><tr><td colspan=2><font face="Verdana" size=-1 color="teal"><center><b>Most useful video lesson topics:</b></center></font></td></tr><tr><td width=5><input type=radio name=answer value="1"></td><td><font face="Verdana" size=-1 color="000000">Open Chords</font></td></tr><tr><td width=5><input type=radio name=answer value="2"></td><td><font face="Verdana" size=-1 color="000000">Barre Chords</font></td></tr><tr><td width=5><input type=radio name=answer value="3"></td><td><font face="Verdana" size=-1 color="000000">Scales</font></td></tr><tr><td width=5><input type=radio name=answer value="4"></td><td><font face="Verdana" size=-1 color="000000">Arpeggios</font></td></tr><tr><td width=5><input type=radio name=answer value="5"></td><td><font face="Verdana" size=-1 color="000000">Music Reading</font></td></tr><tr><td width=5><input type=radio name=answer value="6"></td><td><font face="Verdana" size=-1 color="000000">Picking Technique</font></td></tr><tr><td width=5><input type=radio name=answer value="7"></td><td><font face="Verdana" size=-1 color="000000">Strumming Patterns</font></td></tr><tr><td width=5><input type=radio name=answer value="8"></td><td><font face="Verdana" size=-1 color="000000">Tab Reading</font></td></tr><tr><td width=5><input type=radio name=answer value="9"></td><td><font face="Verdana" size=-1 color="000000">Songwriting</font></td></tr><tr><td width=5><input type=radio name=answer value="10"></td><td><font face="Verdana" size=-1 color="000000">Improvisation</font></td></tr><tr><td width=5><input type=radio name=answer value="11"></td><td><font face="Verdana" size=-1 color="000000">Triads</font></td></tr><tr><td colspan=2><center><input type=submit value="Vote">  <input type=submit name=view value="View"></center></td></tr><tr><td bgcolor="white" colspan=2 align=right><font face="Verdana" size=-2 color="black">pollcode.com <a href=http://pollcode.com/><font color="navy">free polls</font></a></font></td></tr></table></form><a href="./studies.html">
    <img src="images/studies.jpg" border="0" /></a><br/><br/>
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 4,
      interval: 6000,
      width: 'auto',
      height: 200,
      theme: {
        shell: {
          background: '#aee5f5',
          color: '#4b508f'
        tweets: {
          background: '#dbdbdb',
          color: '#333333',
          links: '#336699'
      features: {
        scrollbar: true,
        loop: false,
        live: false,
        hashtags: true,
        timestamp: true,
        avatars: false,
        behavior: 'all'
    }).render().setUser('guitarfusion').start();
    </script></font><br/>
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/Guitarfusion/208575872514732" width="200" show_faces="true" border_color="" stream="true" header="true"></fb:like-box>
    </div>
    <div id="blog">
    <?php
    /* Short and sweet */
    define('WP_USE_THEMES', false);
    require('./blog/wp-blog-header.php');
    ?>
    <?php
    require('./blog/wp-blog-header.php');
    ?>
    <?php
    $posts = get_posts('numberposts=10&order=ASC&orderby=post_title');
    foreach ($posts as $post) : start_wp(); ?>
    <?php the_date(); echo "<br />"; ?>
    <h2><?php the_title(); ?>    </h2>
    <?php the_content() ?>
    <a class="bloglink" href="<?php the_permalink() ?>">
    Read more...</a><br />
    <?php
    endforeach;
    ?>
    </div>
    <div id="ad_middle"></div>
    <div id="blog_bottom2">
    <h1> Free Stuff</h1>
    <br/>
    <ul>
    <li><a href="http://www.metronomeonline" target="_new">Online Metronome</a> - Metronomes are a great tool to use during practice to keep a steady tempo and to help increase speed of passages. Use this online metronome if you do not already have a stand alone metronome.</li><br/>
    <li><a href="http://itunes.apple.com/us/app/id347846503">Iphone / Itouch Metronome</a> - This is an example of several free metronome apps that are available for your phone. Android users can also find free metronomes on the Marketplace. Be sure and read the ratings, some are better at keeping time than others.</li><br/>
    <li><a href="https://market.android.com/details?id=com.pedrocorp.android.guitar&feature=search_result">Android Phone Metronome / Tuner / Chord Dictionary</a>This handy little app will not only provide you with a tuner, but has a built-in metronome and chord dictionary. - </li><br/>
    <li><a href="http://tuxguitar.herac.com.ar/" target="_new">Free Guitar Tab Editor</a> - View / Create Tab - Free alternative to GuitarPro Software. Use this software to open .gp3, .gp4, .gp5 files and search for music online.</li><br/>
    <li><a href="http://www.blanksheetmusic.net/">Free Blank Sheet Music</a> - Print blank sheet music. Choose from standard notation, treble, bass, alto clefs, and tablature. </li><br/>
    <li><a href="http://www.911tabs.com/">Free Tablature Search Engine</a> - This is a great search engine to find tabs. I mainly use this to find .gp5 files for my Tux Guitar Software. </li>
    </ul>
    </div>
    <div id="blog_bottom"><span style="float:left;">
    <img src="images/mapad.jpg" /></span>
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=1060+West+State+Road+434,+Longwood,+FL&sll=28.697815,-81.364 128&hl=en&sspn=0.006295,0.006295&ie=UTF8&hq=&hnear=1060+Florida+434,+Longwood,+Florida+327 50&ll=28.70572,-81.364145&spn=0.026349,0.036478&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?q=1060+West+State+Road+434,+Longwood,+FL&sll=28.697815,-81.364 128&hl=en&sspn=0.006295,0.006295&ie=UTF8&hq=&hnear=1060+Florida+434,+Longwood,+Florida+327 50&ll=28.70572,-81.364145&spn=0.026349,0.036478&z=14&iwloc=A&source=embed" style="color:#0000FF;text-align:right">View Larger Map</a></small>
    </div>
    </div>
    <div id="footer">
    <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../biography.html">Biography</a></li>
    <li><a href="../learn.html">Learn Guitar</a></li>
    <li><a href="../Lessons.html">Guitar Lessons</a></li>
    <li><a href="../contact.html">Schedule Lessons</a></li>
    <li><a href="mailto:[email protected]">Contact Webmaster</a></li>
    </ul>
    &copy; 2006-2011 Guitarfusion.com All Rights Reserved. Unauthorized Use Prohibited.
    </div>
    </div>
    </body>
    </html>
    And here is the code for the index.php's css
    body {
              background-color: #ff9933;
              font-family:Verdana, Geneva, sans-serif;
              font-size:11px;
    p {
              text-align:center;
              text-indent:15px;
    #wrapper {
              width:960px;
              height:100%;
              margin-left:30px;
              position:absolute;
    #header {
              width:960px;
              height:310px;
              background-image: url(images/gfheader.gif);
              background-position:center;
              background-repeat:no-repeat;
              position:relative;
              z-index:0;
    #logo {
              height:242px;
              width:235px;
              background-image:url(images/GuitarFusionLogo.gif);
              position:relative;
              top:40px;
              left:80px;
              z-index:1;
              visibility:hidden;
    #nav {
              width:600px;
              height:45px;
              z-index:2;
              position:relative;
              top:12px;
              left:290px;
              visibility:hidden;
    #navdropdown {
              background-color:#999;
              width:600px;
              height:45px;
              z-index:3;
              position:relative;
              top:12px;
              left:290px;
    #content {
              width:840px;
              height:1800px;
              background-color:#fff;
              position:relative;
              margin-left:60px;
    #social {
              width:195px;
              height:32px;
              border:none;
              position:relative;
              text-align:right;
              bottom:25px;
              right:65px;
              float:right;
              z-index:3;
              visibility:hidden;
    .social {
              margin-left:50px;
    #blog {
              width:600px;
              height:500px;
              border: thin solid #000;
              position:relative;
              top:15px;
              left:15px;
              float:left;
              z-index:1;
              overflow:auto;
              background-color:#d6e8f7;
    #blog_header {
              width:625px;
              height:45px;
              background-Image:url(images/blogheader.gif);
              position:relative;
              top:20px;
              left:5px;
              z-index:2;
              float:left;
    .nav {
              margin-left:20px;
    #sidebar {
              width:200px;
              height:1500px;
              border:none;
              left:-10px;
              top:10px;
              position:relative;
              float:right;
    #ad_middle {
              width:600px;
              height:200px;
              border: thin solid #000;
              position:relative;
              top:15px;
              left:15px;
              z-index:1;
              overflow:auto;
              float:left;
              background-color:#EFF5E9;
              background-image:url(images/lessonsad.jpg);
              background-repeat:no-repeat;
              background-position:center;
    #blog_bottom {
              width:600px;
              height:370px;
              border: thin solid #000;
              position:relative;
              top:15px;
              left:15px;
              z-index:1;
              overflow:auto;
              float:left;
              background-color:#F6F6F6;
    #contentwrapper {
              width:650px;
              height:500px;
              position:relative;
              top:50px;
              float:left;
              margin-left:95px;
    #header_content {
              width:624px;
              height:43px;
              background-image:url(images/Header.gif);
              text-align:center;
              font-size:28px;
              font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
              line-height:40px;
              color:#FFF;
              position:relative;
              left:10px;
    #bio_content {
              width:600px;
              height:1000px;
    .biopic {
              float:left;}
    #learn_content {
              width:600px;
              height:100%;
    #faq {
              width:700px;
              height:600px;
              background-color:#f8f8f8;
              border:thin solid #000;
              margin-left:60px;
    #books {
              width:750px;
              height:700px;
              position:relative;
              float:left;
              margin-left:35px;
    fieldset {
    margin: 1em 0;
    padding: 1em;
    border : 1px solid #ccc;
    background: #f8f8f8;
    legend {
    font-weight: bold;
    #form_content {
              position:relative;
              left:160px;
              height:880px;
              width:500px;
              text-align:center;
              background-color:#E7EFFF;
              border:double #900;
    form div {
              background-color:#f8f8f8;
              padding:0px;
              margin:0px;
    #footer {
              width:960px;
              height:40px;
              bottom:0px;
              position:relative;
              text-align:center;
              line-height:1px;
              font-size:10px;
              padding-bottom:10px;
    #footer ul li {
              display:inline;
              margin:20px;
    #footer ul li a {
              text-decoration:none;}
              #blog_bottom2 {
              width:600px;
              height:370px;
              border: thin solid #000;
              position:relative;
              top:15px;
              left:15px;
              z-index:1;
              overflow:auto;
              float:left;
              background-color:#F6F6F6;
              text-align:center;
    #studies{
                        width:600px;
                        height:800px;
                        position:relative;
                        margin-left:110px;
                        text-align:center;
                        background:#f8f8f8;
    #blog_bottom2 ul li
              {list-style-type:none
    Any help is appreciated.

    You do not have a constructor for the menu bar as in
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    There are too many mistakes in the JS outside of the Spry Menu Bar. Have a look at the following which includes all errors, not just the JS
    Validation Output:   117 Errors
      Line 21, Column 38: character "&" is the first character of a delimiter but occurred as data   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=… ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 21, Column 40: cannot generate system identifier for general entity "i" … var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=… ✉  
    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.
    If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
    Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
      Line 21, Column 40: general entity "i" not defined and no default entity … var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=… ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 21, Column 41: reference not terminated by REFC delimiter …var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x… ✉  
    If you meant to include an entity that starts with "&", then you should terminate it with ";".  Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
      Line 21, Column 41: reference to entity "i" for which no system identifier could be generated …var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x… ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 21, Column 39: entity was defined here   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=…
      Line 21, Column 50: character "&" not allowed in attribute specification list …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉  
      Line 21, Column 50: element "a.length" undefined …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉  
    You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
    incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
    by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
    by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
      Line 21, Column 51: character "&" is the first character of a delimiter but occurred as data …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 21, Column 60: character "&" is the first character of a delimiter but occurred as data …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 21, Column 62: cannot generate system identifier for general entity "x.oSrc" …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉  
    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.
    If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
    Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
      Line 21, Column 62: general entity "x.oSrc" not defined and no default entity …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 21, Column 68: reference to entity "x.oSrc" for which no system identifier could be generated …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 21, Column 61: entity was defined here …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
      Line 29, Column 76: character ";" not allowed in attribute specification list …  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) ✉  
      Line 29, Column 76: element "a.length" undefined …  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) ✉  
    You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
    incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
    by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
    by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
      Line 41, Column 57: character "&" is the first character of a delimiter but occurred as data …var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 41, Column 59: cannot generate system identifier for general entity "parent.frames.length" …var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉  
    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.
    If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
    Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
      Line 41, Column 59: general entity "parent.frames.length" not defined and no default entity …var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 41, Column 79: reference not terminated by REFC delimiter …var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉  
    If you meant to include an entity that starts with "&", then you should terminate it with ";".  Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
      Line 41, Column 79: reference to entity "parent.frames.length" for which no system identifier could be generated …var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 41, Column 58: entity was defined here …var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
      Line 45, Column 15: character "&" is the first character of a delimiter but occurred as data   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 45, Column 17: cannot generate system identifier for general entity "d.all"   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉  
    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.
    If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
    Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
      Line 45, Column 17: general entity "d.all" not defined and no default entity   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 45, Column 22: reference not terminated by REFC delimiter   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉  
    If you meant to include an entity that starts with "&", then you should terminate it with ";".  Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
      Line 45, Column 22: reference to entity "d.all" for which no system identifier could be generated   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 45, Column 16: entity was defined here   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms…
      Line 45, Column 47: character "&" is the first character of a delimiter but occurred as data …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 45, Column 50: reference not terminated by REFC delimiter …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉  
    If you meant to include an entity that starts with "&", then you should terminate it with ";".  Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
      Line 45, Column 50: reference to entity "i" for which no system identifier could be generated …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 21, Column 39: entity was defined here   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=…
      Line 45, Column 65: character ";" not allowed in attribute specification list …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉  
      Line 45, Column 65: element "d.forms.length" undefined …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉  
    You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
    incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
    by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
    by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
      Line 47, Column 13: character "&" is the first character of a delimiter but occurred as data   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 47, Column 15: cannot generate system identifier for general entity "d.layers"   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.
    If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
    Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
      Line 47, Column 15: general entity "d.layers" not defined and no default entity   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 47, Column 23: reference not terminated by REFC delimiter   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    If you meant to include an entity that starts with "&", then you should terminate it with ";".  Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
      Line 47, Column 23: reference to entity "d.layers" for which no system identifier could be generated   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 47, Column 14: entity was defined here   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum…
      Line 47, Column 23: character "&" is the first character of a delimiter but occurred as data   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 47, Column 26: reference not terminated by REFC delimiter   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    If you meant to include an entity that starts with "&", then you should terminate it with ";".  Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
      Line 47, Column 26: reference to entity "i" for which no system identifier could be generated   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉  
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      Line 21, Column 39: entity was defined here   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=…
      Line 47, Column 42: character ";" not allowed in attribute specification list …or(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].documen… ✉  
      Line 47, Column 42: element "d.layers.length" undefined …or(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].documen… ✉  
    You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
    incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
    by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
    by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
      Line 49, Column 9: character "&" is the first character of a delimiter but occurred as data   if(!x && d.getElementById) x=d.getElementById(n); return x; ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 49, Column 10: character "&" is the first character of a delimiter but occurred as data   if(!x && d.getElementById) x=d.getElementById(n); return x; ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 59, Column 76: character "<" is the first character of a delimiter but occurred as data …=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) ✉  
    This message may appear in several cases:
    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
      Line 65, Column 9: end tag for "d.layers.length" omitted, but OMITTAG NO was specified </script> ✉  
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      Line 47, Column 26: start tag was here   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum…
      Line 65, Column 9: end tag for "d.forms.length" omitted, but OMITTAG NO was specified </script> ✉  
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      Line 45, Column 50: start tag was here …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      Line 65, Column 9: end tag for "a.length" omitted, but OMITTAG NO was specified </script> ✉  
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      Line 29, Column 67: start tag was here …  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
      Line 65, Column 9: end tag for "a.length" omitted, but OMITTAG NO was specified </script> ✉  
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      Line 21, Column 41: start tag was here …var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x…
      Line 121, Column 579: end tag for "img" omitted, but OMITTAG NO was specified …ight="32" alt="Twitter" border="0"></a><a href="http://www.guitarfusion.com/bl… ✉  
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      Line 121, Column 492: start tag was here …="http://twitter.com/#!/guitarfusion"><img src="../images/twitter_32.png" widt…
      Line 225, Column 14: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified <form method=post action="http://poll.pollcode.com/Vp1c"><table border=0 width=… ✉  
      Line 225, Column 72: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …poll.pollcode.com/Vp1c"><table border=0 width=150 bgcolor="#ffffff" cellspacin… ✉  
      Line 225, Column 80: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …lcode.com/Vp1c"><table border=0 width=150 bgcolor="#ffffff" cellspacing=0 cell… ✉  
      Line 225, Column 114: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …dth=150 bgcolor="#ffffff" cellspacing=0 cellpadding=2><tr><td colspan=2><font … ✉  
      Line 225, Column 128: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …r="#ffffff" cellspacing=0 cellpadding=2><tr><td colspan=2><font face="Verdana"… ✉  
      Line 225, Column 146: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …acing=0 cellpadding=2><tr><td colspan=2><font face="Verdana" size=-1 color="te… ✉  
      Line 225, Column 174: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …d colspan=2><font face="Verdana" size=-1 color="teal"><center><b>Most useful v… ✉  
      Line 225, Column 197: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag …"Verdana" size=-1 color="teal"><center><b>Most useful video lesson topics:</b>… ✉  
    The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
    One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      Line 225, Column 277: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …center></font></td></tr><tr><td width=5><input type=radio name=answer value="1… ✉  
      Line 225, Column 291: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …</td></tr><tr><td width=5><input type=radio name=answer value="1"></td><td><fo… ✉  
      Line 225, Column 302: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …tr><td width=5><input type=radio name=answer value="1"></td><td><font face="Ve… ✉  
      Line 225, Column 323: end tag for "input" omitted, but OMITTAG NO was specified … type=radio name=answer value="1"></td><td&gt

  • Widget menu not displaying correctly

    Hi,
    I've created a web site and uploaded it to the FTP server to check it works OK and I've found the home page menu doesn't display correctly, but every other page is OK.
    The drop down 'sub-menu' is getting clogged up in it's layout.
    See here:
    all the other pages display correctly and look like this:
    Because the menu is generated by Muse as a widget, (I've just edited colours etc) why should 1 page display differently to the others?
    I have this in the Master file, so I'm not making duplicate menus on each seperate page... the one widget serves all the pages.
    Any ideas?
    Thanks a lot.

    If you have inserted the menu on the Master page, then ideally it should appear even and remain unselectable/uneditable on all of the content pages.
    Does the menu appear distorted in Design mode for the homepage too or only when you preview in browser/after publish?
    I believe you're using the "All Pages" menu type and by looking at the screenshots, it appears that the Products menu item is overlapping the Education menu item. Did you try making a copy or delete the menu and re-insert in Master page? Can you do a Select All on the Home page and check if you don't have an identical but mis-aligned manual menu overlapping the original menu?
    If the problem persists, can you share a link to the website for us to have a look?
    Thanks,
    Vinayak

  • Spry submenue not displaying correctly  on IE

    Hello fellows,
    I have tested my site on many browsers it looks ok on all
    except IE. It's the way the sub menus are displayed in Internet
    explorer. If you click on landscape -->getty photos ( the getty
    tab is far to the right and is disconnected from the main menu)
    I tried playing with the ul.MenuBarHorizontal ul ul but that
    affected the look on firefox and safari.
    Here is the site:
    http://karimsalha.com/
    Below is the spryhorizontal.css code
    Thanks in advance

    I had the same problem and finally just gave up on the Spry
    menu and went with a license from Milonic.com.

  • Dynamic Menu not displaying correctly on iOS devices

    Can't get my dropdown menus to display correctly when viewing on iPhone & iPad. For some reason the submenu will become visable but not let me select anything before disappearing again. Works fine on desktop browsers.

    Just realised the parent element  of the submenu is linking to a page, as soon as I took off the link, it works fine. Is there a way I can get it so that the first click brings up the submenu even if there is a link to another page.

  • Spry menu not displaying properly in IE8

    Right up front, I'm new to Spry.
    I built a flyout menu, nothing fancy just standard.
    Works and looks fine in Firefox, Opera, Safari.  But IE 8 on a PC the first items are "running together and the "twisty >" is under the text.
    Are there any known issues I need to be aware of when using Spry menus in IE?
    Thanks for any comments or suggestions.
    Steve

    Yes you're right code would help.  I took the smallest page and pasted in the code below.  I have bolded the spry menu itself.  I'm going to create another menu on a new page from scratch and without any og the other pieces of the page and see if it works in IE8
    anothe page with the same munu is at:
    http://davidwrightlandscape,com/index2.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>David H Wright - Landscape Architect</title>
    <style type="text/css" media="all">
    <!--
    @import url("CSSSculptor/1ColumnFixedCenteredHeaderandFooter_TahitiSea_css/screen.css");
    -->
    </style>
    <style type="text/css" media="print">
    <!--
    @import url("CSSSculptor/1ColumnFixedCenteredHeaderandFooter_TahitiSea_css/print.css");
    body {
    background-color: #FFF;
    -->
    </style>
    <script type="text/javascript" src="CSSMenuWriter/cssmw/menu.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <style type="text/css" media="all">
    <!--
    @import url("CSSMenuWriter/cssmw/menu.css");
    -->
    </style>
    <!--[if lte IE 6]>
    <style type="text/css" media="all">
    @import url("CSSMenuWriter/cssmw/menu_ie.css");
    </style>
    <![endif]-->
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="outerWrapper">
      <div id="header">
        <p align="center"><img src="images/DaveWright-logo-WEB.jpg" width="345" height="220" alt="Logo" /><img src="images/DSC_0076.jpg" width="416" height="220" alt="Lindsey OverHead - 076" /><br />
        </p>
    PO Box 100 - Branchville, NJ 07826 - Phone 973-948-2090 - Fax 973-948-2083 </div>
      <div></div>
        <img src="images/Servicebanner2-small.jpg" alt="" width="961" height="30" border="0" usemap="#Map1">
      <map name="Map1" id="Map1">
        <area shape="rect" coords="189,4,380,27" href="firm.html" alt="Firm Information">
             <area shape="rect" coords="61,2,154,27" href="index.html" alt="Return Home">
        <area shape="rect" coords="401,5,532,26" href="portfolio.html" alt="portfolio">
        <area shape="rect" coords="553,5,723,26" href="site.html" alt="Site Amenities">
        <area shape="rect" coords="754,5,903,27" href="contactus.html" alt="Contact Us">
      </map>
      <div id="contentWrapper">
        <div id="content">
          <h1 align="center"><img alt="" name="Image1" width="220" height="100" id="Image1" /><img src="" alt="" width="220" height="100" id="Image2" /><img src="" alt="" width="220" height="100" id="Image3" /><img src="" alt="" width="220" height="100" id="Image4" /></h1>
    <h1><br />
      Plantings Selection and Examples</h1>
    <p> </p>
    <p align="center"><img src="" alt="" width="920" height="500" id="Planting_collage" /></p>
        </div>
      </div>
      <div id="footer">
          <div><span class="parent"><a href="#"><img src="images/DaveWright-logo-FOOTER.jpg" alt="David Wright Landscaping" width="120" height="61" align="left" id="logo" style="background-color: #009966;" /></a></span>
            <ul id="MenuBar1" class="MenuBarVertical">
              <li><a href="index.html">HOME</a>          </li>
              <li><a href="firm.html" class="MenuBarItemSubmenu">FIRM INFORMATION</a>
                <ul>
                  <li><a href="aboutus.html">About Us</a></li>
                  <li><a href="services.html" class="MenuBarItemSubmenu">Services</a>
                    <ul>
                      <li><a href="design.html">Design</a></li>
                      <li><a href="installation.html">Installation</a></li>
                      <li><a href="gardeningservices.html">Gardening Services</a></li>
                      <li><a href="siteplanning.html">Site Planning</a></li>
                    </ul>
                  </li>
                  <li><a href="news.html">News</a></li>
                </ul>
              </li>
              <li><a class="MenuBarItemSubmenu" href="portfolio.html">PORTFOLIO</a>
                <ul>
                  <li><a href="residential.html">Residential</a>              </li>
                  <li><a href="public.html">Public</a></li>
                  <li><a href="display.html">Display Gardens</a></li>
                </ul>
              </li>
              <li><a href="site.html" class="MenuBarItemSubmenu">SITE AMENITIES</a>
                <ul>
                  <li><a href="plantings.html">Plantings</a></li>
                  <li><a href="hardscape.html">Hardscapes</a></li>
                  <li><a href="water.html">Water</a></li>
                  <li><a href="furnishings.html">Furnishings</a></li>
                </ul>
              </li>
              <li class="MenuBarVertical"><a href="contactus.html">CONTACT US</a></li>
            </ul>
        </div>
    <script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 2}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 2}); }, true); }</script>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

  • Spry Horizontal Menu not displayed correctly in Internet Explorer 6

    Hello to everyone. I'm creating a website using David's tutorial. My Spry Horizontal Menu is correctly shown in Dreamweaver Live View, Firefox10 but not in IE6. It happears at the bottom of the page. Any advise? Thanks much in advance. Cecilia

    Hello Cecilia,
    please have a look here: http://gs.statcounter.com/#browser_version-ww-monthly-201201-201202-bar where you can see that this browser (IE6 ) is no longer in use and might not be used anywhere anymore.
    And so you should not worry about this. But if it does please send a link to your website in question.
    ... and what's about the newer IE?
    Hans-Günter

  • Spry menu not displaying right in IE

    Again, I am very new to Dream Weaver, I need help...IE problems...
    my site looks fine when previewing in firefox, chrome, safari, when I preview in
    IE5.2 there is a small white line appears at the top of the footer and the menu looks fine until I hover the menu bar, it stretches out of the left side-bar across the page.
    When viewing in IE on a PC laptop... it's totally mixed up!
    Can you help?

    I have had a look in IE7and IE8 and do not see any mix-up.
    Having said that, there are a number of mods in the CSS that are confusing, such as
    ul.MenuBarVertical
    margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
    cursor: default;
    width: 11.75em;
         display: inline;
    It may be best if you have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and compare that with your style sheet.

  • Oops - spry menu bar 2.0 does not display correctly when loaded

    Oops - obviously I'm new at this. I think I got my graphics loaded now.
    Dear Sirs:
    I notice bzz31 had a pretty complicated post, so perhaps someone can help me with my complicated problem that has been vexing me for months. I tried the Spry Menu Bar 1.0, but it was impossible for me to edit, and I was delighted to see Spry Menu Bar 2.0 come out. However the 2.0 version has been frustrating me as well.
    I can get my menu bar to display properly in Live View, as shown below.
    However when I load everything onto the server, the menu bar does not display correctly, as shown below:
    I don't quite understand the code "file:///" but I interpret it to mean that the Spry-UI-1.7 folder is in the topmost folder of MacPro5-Docs, which is my hard drive. Here's the code I'm having trouble with:
    Here's my computer directory, shown below:
    Since my index file is two folders down from Spry-UI-1.7, I loaded the files onto the server similarly, as shown in the next three pictures:
    (The picture below is the same as the one just above, but now you can see the path from index to Spry-UI-1.7.)
    I would be most appreciative if someone can help me.
    Thank you.

    Have a look at the following links
    <script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <link href="file:///MacProG5-Docs/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    Each of the above points to a file on your local system and cannot be found by the remote server.
    Replace the red coloured parts with http://www.twhsbands.org/ will remedy the situation.
    You also have some remnants of the other SpryMenuBar that should be removed from your markup.
    Gramps
    Wel, so much for the red coloured parts, they did not show up.
    The red coloured parts read file:///MacProG5-Docs/

  • Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

    Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

    As an FYI: Adobe discontinued developing the Spry framework last year.  And Spry was removed from DW CC.  You can keep using Spry if you wish, but most of us have switched to other solutions that work better in IE10 and Touch Screens.
    Nancy O.

  • My vertical Spry is not displaying properly in IE 8

    I am working on my first website using Dreamweaver CS4 and my spry is not displaying properly over my flash photo gallery.  It looks ok in Firefox (although the borders are missing on my submenu for "sheds tool list") but in IE 8 the submenus can't be seen.  How can I correct this?
    My website is www.toolshedstudio.com
    Here's my 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: 10em;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    /* 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: 170px;
        border-top-style: outset;
        border-right-style: outset;
        border-bottom-style: outset;
        border-left-style: outset;
        border-top-width: thin;
        border-right-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
    /* 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: 1px none #CCC;
    /* 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: #000;
        padding: 0.5em 0.75em;
        color: #CCC;
        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: #000;
        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: #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;

    Hi
    You flash movie doesn't have the parameter wmode=transparent. If  you set that, the menu bar will be on top.
    <param name="wmode" value="transparent">
    I hope this helps.
    Ben

  • Horizontal Menu Not Displaying Right in IE (Shocker!)

    Can someone look and see why my menu wont display correctly in IE. I've used the same feature on other sights with no problems. I may have jacked up the code when tweaking the design. Any help would be appreciated. Cheers.
    www.brand32.com/Evoke
    I'll be happy to add code if needed.

    Here is the CSS. Hopefully this will elicit some response. Thanks in advance for those who reply.
    @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 0 0 0px;
    padding: 38px 0;
    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: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    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
    margin: 0;
    padding: 0;
    list-style-type: none;
    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.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    background-color: #300607;
    border: 0px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #fff;
    text-decoration: none;
    /* 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-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-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-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

Maybe you are looking for

  • How to remove "Read Only" attribute on folders

    Hi I am logged in with my User account which has full control over my folders.<o:p></o:p> I have a folder that I tried to add modifications to, however i could not do so because the folder was classified as read only. I have full permissions to this

  • IPhone 6 backlight dims while watching video

    If I watch a video that is first dark and then brights up, and I watch it (landscape video) in portrait mode, backlight is slightly dimming to brighter while video gets brighter. Is this a some kind of feature or a bug? I have the automatic brightnes

  • Text determination procedure with sales doc type

    For the Sales Doc type 'OR' , I am getting TEXT automatically in the Sales Order Header data , TEXT tab page. Can Any one tell me how can I remove the text, when i create sales order. Or please can any one give me the document or link or explain how

  • Change resolution in console, Arch on Virtualbox

    Good evening everyone, I'm now use Arch on Virtualbox with EFI boot enabled, I boot without boot manager follow these instructions When the guest completely install. I reboot and the resolution of the console quiet of large, about 1136x923, and want

  • Importing jar or ear into WSAD

    hi all, i have some .ear and .jar files. i want to extract these files in to WSAD. How to extract these files into WSAD? plz tell me if any one knows Regards praveen