Navigation not displaying horizontally

I've been trying to tweak every level of the CSS but cannot get the sub nav items to display horizontally on hover. Here is the test page: http://gbetza.mydomain.com/webservice2/test/Basso56/test/Reviews.html
Here is the CSS: http://gbetza.mydomain.com/webservice2/test/Basso56/test/css/style.css
Code:
<div class="fluid" id="centeredmenu">
            <ul>
                <li>
                    <a href="../about.html">about</a>
                    <ul>
                        <li><a href="About.html">Restaurant</a></li>
                        <li><a href="Chef.html">Chef</a></li>
                    </ul>
                </li>
                <li>
                    <a href="../menu.html">MENU</a>
                    <ul>
                        <li><a href="lunch.html">Lunch</a></li>
                        <li><a href="dinner.html">Dinner</a></li>
                        <li><a href="wine.html">Wine List</a></li>
                    </ul>
                </li>
                <li>
                    <a href="../reviews.html">REVIEWS</a>
                    <ul>
                        <li><a href="reviews.html">Press/Media</a></li>
                    </ul>
                </li>
                <li>
                    <a href="contact.html">CONTACT</a>
                    <ul>
                        <li><a href="reservations.html">Reservations</a></li>
                    </ul>
                </li>
            </ul>
        </div>
Thank you for your help.

Hello Greg,
using your source code I got this:
what means something like: This document uses the following files not contained in this site. Looking deeper I found some of these
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/BuiltIn/Fluid%20Grid%20 Layout/respond.min.js"></script>, what means your path is not correct. file: /// "says" your JS links are pointing to your hard drive, which nobody can see except you.
Please use the correct pathes and come back.
Hans-Günter

Similar Messages

  • Video not displaying horizontally

    Gentlefolk,
    iPhone 5s, IOS 8.3, although the video in question was shot in IOS 8.2.
    I started capturing a video with the iPhone vertically, then turned the phone horizontally, which is the format I wanted to begin with. The video appeared to capture fine,but when I view the video on my phone, or upload to YouTube, the video does not display horizontally, but vertically. That is, a horizontal video has the action of people walking up and down the screen rather than left and right across the screen.
    So, take a horizontal image,and rotate it 90 degrees, and you have my issue.
    How do I correct this? All I need is the graphics equivalent of "rotate 90 degrees clockwise" and my problem is solved.
    It APPEARS that the video, once it started capturing in a vertical format (I hamhanded the controls to start with) did not recognize the change to a horizontal position. This is quite goofed.
    Many thanks for any suggestions.

    Found a free utility in the APP Store that (RotateNFlip) that....well...rotates videos. Worked perfectly for my issue.

  • Ul horizontal navigation not displaying correctly in IE6

    I am designing a web site for my psychology department and ideally it will display correctly across browsers, including older versions. I've used CS Live to test how it displays, and everything looks great EXCEPT IE6. What percentage of people out there are still using that? I'm not sure how concerned to be.
    If there is a fix, I'd like to apply it, because the problem is with my top navigation, which will display on about 130 pages of the web site.
    Here is what it is supposed to look like
    Here is what it looks like in IE6
    Here is my posted page:
    http://www.psychology.vcu.edu/test/
    Here is my code:
    SOURCE CODE
    <!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>VCU Psychology Department</title>
    <style type="text/css"></style>
    <link href="styles/homepage.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
    </head>
    <body>
    <div class="container">
      <div class="header">
        <div id="quick_links"><a href="http://www.has.vcu.edu/psy/cpsd" title="Center for Psychological Services and Development" target="_blank">Clinic</a> | <a href="undergraduate/advising.html" title="Academic advising">Advising</a> | <a href="http://vcu.sona-systems.com/" title="Participation in research" target="_blank">SONA</a></div>
        <img src="images/homepage/vcu_psyc_banner.jpg" alt="VCU Psychology Department" width="500" height="60" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="rect" coords="19,20,125,62" href="http://www.vcu.edu" target="_blank" alt="VCU homepage" />
          <area shape="rect" coords="129,21,488,60" href="http://www.psychology.vcu.edu" alt="Psychology homepage" />
        </map>
        <ul id="main_nav">
          <li><a href="about/index.html">About Us</a></li>
          <li><a href="undergraduate/index.html">Undergraduate Program</a></li>
          <li><a href="graduate/index.html">Graduate Programs</a></li>
          <li><a href="research/index.html">Research</a></li>
          <li><a href="people/index.html">People</a></li>
          <li><a href="centers/index.html">Centers and Institutes</a></li>
          <li id="main_nav_last"><a href="resources/index.html">Resources</a></li>
        </ul>
        <!-- end .header --></div>
    CSS CODE
    @charset "utf-8";
    body {
    background-color: #000;
    background-image: url(../images/backgrounds/container_yellow_gr_220.jpg);
    background-repeat: repeat-x;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0px;
    line-height: 1.1;
    h1, h2, h3, h4, h5, h6, p {
    margin: 0px;
    padding: 0px;
    h1 {
    color: #FFA103;
    font-size: 20px;
    float: left;
    padding-top: 10px;
    padding-bottom: 7px;
    a img {
    border: none;
    #quick_links {
    position: absolute;
    top: 20px;
    right: 40px;
    #quick_links a {
    color: #000000;
    text-decoration: none;
    #quick_links a:hover {
    text-decoration: none;
    color: #FFA103;
    a:link, a:visited {
    color: #999999;
    text-decoration: none;
    a:hover, a:active, a:focus {
    text-decoration: none;
    color: #FFA103;
    .container {
    width: 960px;
    background-color: #EEF0EC;
    background-image: url(../images/backgrounds/container_bg.jpg);
    background-repeat: repeat-x;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    .header {
    position: relative;
    height: 110px;
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    ul#main_nav {
    list-style-type: none;
    width: 920px;
    background-color: #EAECE7;
    background-image: url(../images/backgrounds/main_nav_grey_gr.jpg);
    background-repeat: repeat-x;
    padding: 0px;
    height: 30px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    #main_nav li a {
    color: #000;
    text-decoration: none;
    display: block;
    margin: 0px;
    padding-right: 19px;
    padding-left: 19px;
    padding-top: 6px;
    height: 24px;
    font-weight: bold;
    #main_nav_last {
    width: 110px;
    #main_nav li {
    float: left;
    #main_nav li a:hover, #main_nav li a:active, #main_nav li a:focus {
    color: #FFF;
    background-color: #000;
    display: block;
    font-weight: bold;
    Thanks for any advice that you may have!

    Thanks for the reply!
    I did add the float left as suggested, and it did fix the menu for IE6. Here is the current page, which I hope displays correctly in every browser, including IE6, http://www.psychology.vcu.edu/test/.
    The problem is that it broke one aspect of the menu for IE7 and others.
    The code in blue is what was added to fix IE6.
    The code in red is what no longer works. I had added it so that the width of the final list item would extend to the end of the main_nav width.
    ul#main_nav {
    list-style-type: none;
    width: 920px;
    background-color: #EAECE7;
    background-image: url(../images/backgrounds/main_nav_grey_gr.jpg);
    background-repeat: repeat-x;
    padding: 0px;
    height: 30px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    #main_nav li a {
    float: left;
    color: #000;
    text-decoration: none;
    display: block;
    margin: 0px;
    padding-right: 19px;
    padding-left: 19px;
    padding-top: 6px;
    height: 24px;
    font-weight: bold;
    #main_nav_last {
    width: 110px;
    #main_nav li {
    float: left;
    #main_nav li a:hover, #main_nav li a:active, #main_nav li a:focus {
    color: #FFF;
    background-color: #000;
    display: block;
    font-weight: bold;
    If anyone has suggestions on how to optimize this code I'd be grateful. This menu will appear on 120 pages or so, and I want it to be as perfect as possible.
    Thank you so much.

  • Detailed Navigation not displaying giving ip address instead of hostname

    Hi
    I created applications in web dynpro.So i imported in the Enterprise Portal.
    In that I created Role----Under That Worksets (X ,Y ,Z, W) -For each workset I created more than 4 Pages to that---For each page i added Iview.
    I added "IP Address" and "HostName" in the c:/windows/system32/drivers/etc/host
    Then i login into the Portal with normal URL
    http://<HostName>:50000/irj/portal
    So its Displaying.....Up to this its fine...
    If suppose i want to login with
    http://<IP Address>:50000/irj/portal....Under Each Workset, one page is showing,,,means one Iview is Visible...means Detailed Navigation is not showing.
    All Pages are not visible...
    Please any one help me to do this....
    So its not possible to say to anyone ,,,,u have to add this ip Addrss in the path.
    Please Provide the Permanent solution ,,even by giving IP address also all pages and Iviews must see..
    Regards
    Sushma

    Hi Sushma,
    I am not sure if the same apply when you access the URL through the IP. The SAP BI works on the concept of Fully Qualified domain names for access and also there is a system of web dispatchers which are configured for the domain name to handle report requests.
    Also with portal in place you will not be able to see the URL of the application running within portal
    for example the URL we see are
    ttp://<xyz>.com/irj/portal but then the individual URLs for the applications running within the portal cannot be seen...due to security reasons.
    That could be the possible case.
    Regarding Use of Portal at client place:
    1. You can use the VPN connectivity. You will only need to give the access rights to the perticular id & that will be all.
    2. Assign the portal port to the some global address. That will work.
    But, I suggest, VPN is better.
    Regards
    Chander Kararia
    Edited by: Chander Kararia on Feb 6, 2009 11:10 AM

  • Problems with navigator not displaying artboard correctly

    I'm having a heck of a time getting my navigator window to only display the artboard, option is selects in nav tab to "only display artboard". The navigator window is always bigger than the image and has extra white space around the artboard settings. Any ideas, I've tried a new preference and windows login, that seemed to work for awhile then it went back.
    My thoughts:
    Does a placed image with a clipping mask applied have an effect ?
    Does the use of numerous compound paths and groups have an effect?
    My navigator window is very important to me as I design for mobile devices and I use it to see the design at handheld size.
    Any help?

    On component resize in layeredpane I get the following output:
    Layared pane component resized: 2
    LayeredPane size: w=540 h=422
    LayeredPane Pref size: w=509 h=412
    Component 1: x=119 y=114 w=100 h=100
    Component 2: x=119 y=219 w=19 h=14

  • 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&#92;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&#92;.]*)/i;
        var re_msie = /MSIE.([0-9&#92;.]*)/i;
        var re_gecko = /gecko/i;
        var re_safari = /(applewebkit|safari)&#92;/([&#92;d&#92;.]*)/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:&#92;s*([0-9&#92;.]+)/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 &amp;&amp; this.mac &amp;&amp; this.mozilla) {
            this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (&lt;ul&gt; 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.' &amp;&amp; typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie &amp;&amp; typeof document.uniqueID == 'undefined'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        if (Spry.is.ie &amp;&amp; Spry.is.version &lt; 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&lt;items.length; i++)
                if (i &gt; 0 &amp;&amp; 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&lt;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 &amp;&amp; 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("&#92;&#92;b" + className + "&#92;&#92;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("&#92;&#92;s*&#92;&#92;b" + className + "&#92;&#92;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 &gt; 0)
            layers[0].parentNode.removeChild(layers[0]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (&lt;ul&gt; tag)
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
        var menus = root.getElementsByTagName('ul');
        for(var i=0; i&lt;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 &amp;&amp; (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 &amp;&amp; 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' &amp;&amp; !Spry.is.opera &amp;&amp; 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 &amp;&amp; Spry.is.version &lt; 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' &amp;&amp; !Spry.is.opera &amp;&amp; navigator.vendor != 'KDE')
                menu.style.top = '';
                menu.style.left = '';
            if(Spry.is.ie &amp;&amp; Spry.is.version &lt; 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 &gt; 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 &gt; 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 &gt; 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 &gt; 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 &gt; 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 &amp;&amp; !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 &gt; 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 &amp;&amp; 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] &amp;&amp; !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 &lt; els.length; i++){
            //when navigating on the y axis in vertical menus, ignore children and parents
            if(prop=='y' &amp;&amp; isVert &amp;&amp; (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' &amp;&amp; !isVert &amp;&amp; !hasParent &amp;&amp; (i==1 || i==2))
                continue;
            if (els[i])
                var tmp = rect(els[i]);
                if ( (dir * tmp[prop]) &lt; (dir * ref[prop]))
                    ref = tmp;
                    found = i;
        // hide back the submenu
        if (els[1] &amp;&amp; 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 &lt; oStringList.length; i++)
            if(oStringList[i].length&gt;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 &amp;&amp; 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 &amp; (safari absolute) incorrectly account for body offsetTop
            if (Spry.is.opera || Spry.is.safari &amp;&amp; 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 &amp;&amp; cas != 'BODY' &amp;&amp; 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 &amp;&amp; optionsObj[optionName] == undefined)
                continue;
            obj[optionName] = optionsObj[optionName];
    And last, here is the HTML code that has also not been modified in any way:
    &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="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link href="../BXC Main Navigation Spry Drop Menu/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;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&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;
    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.

  • Navigation Bar Not Displaying in Opera10

    Hello again,
    There seems to be an issue with the navigation container in my website, and it is not displaying at all in Opera10. It displays fine and visible in every other browser. I thought maybe Opera 10 requires some extra position settings, and the navigation bar is at the very top of the page behind the header. So I tried to put a z-index value on the container, to see whether or not it is behind the header, and in fact, I still could not see it.
    My website has a header image at the very top of the browser, with a horizontal spry drop down menu right underneath it.
    Does anybody have any ideas? I am not sure which details to provide with this question, however I can give any details upon request.
    Thanks in advance a thousand times!
    Cheers,
    Mr.V

    I have just read the "new to spry forums?" quick info, and I realized that I only have the version 1.4 framework. I will upgrade to 1.6.1 immediately, and the issue could be possibly resolved.
    Sorry for the inconvenience. I will note the details from now on.
    Mr.V

  • Navigational Attribute data is not display in Cube level and reporting

    Hello ALL
    Iam facing a problem like,I created Navigational attribute and I selected that navigational attribute in cube level also but data is not display in cube level.
    What will be the problem?Pl help me out.
    regards
    balaji

    Hi Dinesh
    You mean base characteristic means loading data after creating Navigational attribute?Is it this way,(orelse can u tell me about this base characterstic)
    Yes after making that particular attribute as a navigational attribute I loaded data in master data tables.
    How to run Attribute change run?can u give me steps
    regards
    balaji

  • Chinese and Korean characters not displaying in navigation pane

    I have an issue with Chinese and Korean characters not displaying on the tabs in the navigation pane:
    I have 2 RoboHelp projects (using RoboHelp 8 with the updates installed) to generate WebHelp, one in Simplified Chinese, the other Korean. The HTML files, .HHC and .HHK were sent out for translations. I have set the appropriate language in the project settings, everything almost works, except for the text on the Contents, Index, and Search tabs. (I'm not using a skin.) I have read in various threads that the lng file should be edited using the RoboHelp interface, and this seems to be the crux of the problem. The characters do not display correctly through the RoboHelp UI.
    The computer on which I generate the WebHelp is Windows Server 2003, and I do not have the language packs installed. (And am having problems getting hold of the language packs to install to see if this fixes the problem.)
    Aside from installing the language packs, is there anything else I can try to help resolve the problem? (The characters in the content are displaying as expected.)
    Any assistance is greatly appreciated

    Perhaps something in the Translation Info section of this page might help? (The specifics are for Japanese, but I believe the issue would apply to all double-byte languages).
    http://helpware.net/FAR/far_faq.htm#JapComp

  • How can I make the jsp pages not displayed by using the navigation class?

    I'm right now implementing a function on my program GUI . It's like whenever I click "STOP THE SERVER" button on the main page, I need those jsp pages relates to the server running to be not displayed, even by directly type in the URL(that's just stay in the main page), How can I do that? I heard that a navigation class might do it, but I'm not sure how. It might be great if some experts could help me!! Thanx a million !!
    Shannon

    See:
    * [[Removing the Search Helper Extension and Bing Bar]]
    You can use one of these extensions to adjust the default font size and page zoom on web pages:
    * Default FullZoom Level - https://addons.mozilla.org/firefox/addon/6965
    * NoSquint - https://addons.mozilla.org/firefox/addon/2592

  • Csv/excel not showing vertical .  it is displaying horizontally plus

    hi i have this code that displays html, pdf or csv/excel
    download.
    htmll report and pdf is ok but the csv/excel download
    displays/ works but
    it shows accross instead of down.
    on my html to csv it is not dispalying vertically /down and
    it shows the html on the excel download
    also
    per cel it has both the plotid and the ceenum. it displays
    horizontally.
    Help
    Thanks in advance.
    <!-------------------- here are the code in 2 .cfm pages.
    here is the first page where the user selects
    html
    pdf
    escel/csv----------then it goes to a action page act_lop.cfm
    <h1>LOP Reports </h1>
    <div align="center">
    <form name="theForm" action="act_lop.cfm"
    method="post"><BR />
    Sorted by:  
    <select name="Orderby" size="1">
    <option value="CEEnum">CEE num</option>
    <option value="Plot">plot No</option>
    </select>
    <br />
    <br />
    Output Format:
    <input type="radio" name="outputFormat" value="HTML"
    checked="checked" />
    HTML  
    <input type="radio" name="outputFormat" value="PDF" />
    PDF  
    <input type="radio" name="outputFormat" value="CSV" />
    Download/Open Excel Spreadsheet <BR />
    <br />
    <input name="Submit" type="Submit" value="Generate Report"
    />
    <BR />
    <BR />
    <BR />
    </form>
    </div>
    </body>
    </html>
    <!--------- act_lop.cfm the action page. Html and pdf is
    working ok but the problem is the excel sheet.
    <cfquery name="getlop" datasource="oracdb10">
    select
    tabTee.CEEnum,
    tabTee.Plot,
    FROM
    tabTee
    ORDER BY
    <cfswitch expression="#Form.orderBy#">
    <cfcase value="CEEnum">
    tabTee.CEEnum
    </cfcase>
    <cfcase value="Plot">
    tabTee.Plot
    </cfcase>
    </cfswitch>
    </cfquery>
    <!---html report--->
    <cfswitch expression="#Form.outputFormat#">
    <cfcase value="HTML,PDF">
    <cfsavecontent variable="htmlData">
    <!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=iso-8859-1" />
    <title>lop</title>
    </head>
    <style type="text/css">
    td{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    th{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-color:#FFFF99;
    h2{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    </style>
    <body>
    <cfoutput>
    <table border="0" cellpadding="3" cellspacing="0">
    <tr>
    <td align="center">
    <h3>lop</h3><br><br></td>
    </tr>
    <tr>
    <td align="center">
    </h2>Your report returned #getlop.RecordCount#
    records</h2></td>
    </tr>
    <tr>
    <td>
    <table border="2" cellpadding="2" cellspacing="0">
    <tr>
    <th>Record Number</th>
    <th width="120">CEE num</th>
    <TH>plot No</TH>
    </tr>
    <cfloop query="getlop">
    <tr bgcolor="<cfif currentrow mod
    2>GHOSTWHITE<cfelse>WHITE</cfif>">
    <td>#CurrentRow#</td>
    <Td>#CEEnum#</td>
    <td>#Plot#</td>
    </tr>
    </cfloop>
    </table>
    </td>
    </tr>
    </table>
    </BODY>
    </HTML>
    </cfoutput>
    </cfsavecontent>
    <cfswitch expression="#Form.outputFormat#">
    <cfcase value="HTML">
    <cfoutput>
    #htmldata#
    </cfoutput>
    </cfcase>
    <cfcase value="PDF">
    PDF
    <cfdocument format="pdf">
    <cfoutput>
    #htmldata#
    </cfoutput>
    </cfdocument>
    </cfcase>
    </cfswitch>
    </cfcase>
    <cfcase value="CSV">
    <CFHEADER NAME="Content-Disposition" VALUE="attachment;
    filename=lop.csv">
    <cfcontent type="application/msexcel">"Cee Num","plot
    No"
    <cfoutput query="getlop"> #ltrim(CeeNum)#, #PLOT#
    </cfoutput>
    <cfabort>
    </cfcase>
    </cfswitch>
    <!-----------here is the las page
    ------------------------csv---------------------------->
    <cfquery name="getlop" datasource="oracdb10">
    select
    tabTee.CEEnum,
    tabTee.Plot,
    FROM
    tabTee
    ORDER BY
    tabTee.CEEnum
    </cfquery>
    <CFHEADER NAME="Content-Disposition" VALUE="attachment;
    filename=lop.csv">
    <cfcontent type="application/msexcel">"CEE num","plot
    No"
    <cfoutput query="getlop">#CEEnum#,#Plot#
    </cfoutput>

    CSV interpreted format expects a carriage return/line feed at
    the end of the row. Try
    <cfcontent type="application/msexcel">
    "CEE num","plot
    No"<cfoutput>#chr(13)&chr(10)#</cfoutput>
    <cfoutput
    query="getlop">#CEEnum#,#Plot##chr(13)&chr(10)#
    </cfoutput>
    HTH,

  • Navigation & Photo Page not displaying within some browsers

    Hello,
    I am using iWeb '08 and am having great difficulties trying to get my site cross browser compatible. The site is working perfectly on the Mac in Firefox 2 & Safari but not Firefox 3. It is also not displaying correctly in Firefox 2.0.0.13 and IE7 on my WinXP machine. Unfortunately the error is not just a cosmetic issue. The Main Navigation is not displaying on any page and only shows a bullet point where it is meant to be. The other error occurs in the Photo Template and the photos are not displaying. I am using a "Version 1 template" and did a test with a "version 2" template that provided the same errors.
    Has anyone else had these problems???
    The site is located at:
    http://web.mac.com/maxkit/Kai/
    Photo Page:
    http://web.mac.com/maxkit/Kai/CurrentPictures/Pages/Snowy_AprilDay.html
    The test site is located at:
    http://web.mac.com/maxkit/Site/
    Thanks
    Max

    You have applied a height of "auto"to your menubar container, which gives it no height at all in some browsers. If you have a clue what height you would like to display for your menubar, give it, instead of:
        <div style="height: auto;" id="p7PMM_1" class="p7PMMh04">
    Better yet, leave it in the CSS file, where you will find it when you go looking for it. You already assign a height there:
    .p7PMMh04 {
        width: auto;
        height: 20px;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        background-image: url(http://home.roadrunner.com/~jgigandet/trinity/img/new_bk.gif);
        background-repeat: repeat-x;
        background-color: #000;
        text-align: left;
        line-height: normal;
    Because your inline style of height:auto; has more proximity (is closer) to the element being styled, it overrides the style in the stylesheet and applies the height: auto; instead of allowing the height: 20px;
    Beth

  • Horizontal Scroll Bar not displaying

    Hi,
    We have a page with many recursive tables for alignment.
    We have a lot of graphs displayed horizontally, so that we need to scroll the page horizontally.
    We happened to change the layout and suddenly we are missing the horizontal scroll bar !!
    We could not scroll to see the hidden page details.
    This happens only in IE6, IE7. Firefox, Mozilla displays it with horizontal bars
    Does anybody knows as what the problem could be ??
    - Mohan

    Horizontal Scrollbar in base window... has nothing to do with Framework, its a browser feature and should appear automatically. I m still wondering what must have caused in ur cause.Can u upload the page screenshot on any pic website, would like to have a look !
    There is CSS work around for this but it would be difficult to inject it in a OAF page!Anyways upload the screenshot.
    --Mukul                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

  • Horizontal Menu Bar Drop Downs Not Displaying

    I've had this problem before and here I am grappling with it again.  I have a Spry horizontal menu bar with a few drop down menus on it.  The drop downs are not displaying above the other layers on the page.  http://bakerlake50k.com/draft/index.php
    Need help.
    Jeannette

    I get dizzy when I look at your markup. Have a look at the following
    <body class="BakerLake_body_design">
    <div class="BakerLake">
      <!-- (CSSLayouts Begin)  #BakerLake #build_version=1.1.276;pack=;category=;layout=;layoutType=page;scheme=;cssSource=file;ass ets=;halign=center;minwidth=964px;maxwidth=964px;width=964px;bc=;bl=-->
      <div class='cssLO BakerLake_wrapper_layout'>
        <div class='wrapper cssLI BakerLake_wrapper_design'>
          <div class='cssLO BakerLake_row_1_layout'>
            <div class='row_1 cssLI BakerLake_row_1_design'>
              <div class='cssLO BakerLake_row_1_xtdalignwrapper_layout'>
                <div class='row_1_xtdalignwrapper cssLI BakerLake_row_1_xtdalignwrapper_design'>
                  <div class='cssLO BakerLake_row_2_layout'>
                    <div class='row_2 cssLI BakerLake_row_2_design'>
                      <!-- row_2 Content Starts Here -->
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <ul id='MenuBar'>
    and compare that to
    <body>
    <div id="header">
    </div>
    <div id="nav">
    </div>
    The document looks like
    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="header">
    </div>
    <div id="nav">
        The Spry Menubar goes here
    </div>
    <div id="content">
        <div class="article">
      </div>
    </div>
    </body>
    </html>
    and the stylesheet
    /* CSS Document */
    html {
        background: #ccc;
        height: 100%;
    body {
        background: #333;
        width: 1000px;
        margin: auto;
        height: 100%;
    #header {
        background: url(http://bakerlake50k.com/images/bk-header2.gif) no-repeat 30px;
        height: 233px;
    #nav {
        height: 28px;
        background: #000;
        color: #FFCC00;
        width: 900px;
        margin: -30px auto 0 auto;
    #content {
        background: #000;
        padding: 30px;
        margin-top: 15px;
        height: 100%;
    #content .article{
        width: 750px;
        float: left;
        background: #FFF;
        height: 100%;
    If you follow the proposed structure, your SpryMenuBar worries will be a thing of the past
    Gramps

  • Horizontal spry menu dropdowns not displaying properly in IE7

    Hi,
    Grateful for any help!  I have a dreamweaver template which works fine on a Mac with Firefox and Safari, but when opened in IE7 on a PC the menu bar accros the top is ok but the dropdowns appear as a horizontal list, instead of vertical, and the submenues are not displayed.  The site is not available on the web Can anyone advise how to fix this please?
    I am using the default Spry code and Dreamweaver CS5, and have run Update to ensure latest versions, on iMac with Snow lepoard - also updated.
    Many thanks
    Richard

    Have a look here http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml and when you get down near the bottom of the page add !important as per following
    ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
    The !important will override any changes that the JS wants to make.
    Gramps

Maybe you are looking for

  • TS3899 Email safe senders going to junk folder

    How to stop safe senders from going to the junk folder?

  • How do I get a movie from my mac to my pc?

    Hi, I have created a movie on my ibook in imovie, I however do not have a dvd burner or the internet on my ibook, I do have a dvd burner on my home pc though. How can I get my movie to my pc? ibook g4   Mac OS X (10.4)  

  • How to setup an on demand web connection?

    Hi there, I would like my N8 to connect to the net only when a connection is requested and then close the connection when the request is finished. The only widgets requiring connection being active on my screens are the 3 ones for emails. Email is se

  • How can I get iPhoto to make edits possible?

    I just received my new MacBook Pro and transferred all my data (including all my photos) from my old one. While I use Photoshop for more complex editing, I've never had a problem using the older versions of iPhoto for basic edits (e.g. rotating, crop

  • Images from synced collection won't download

    I'm trying to sync a collection between LR desktop and LR mobile.  The collection has 1444 NEF files in it.  When I mark for sync on my desktop the collection name appears on LR mobile saying  "1 collection with 1444 Photos" and the catalogue appears