Professional Web Applications Themes

Spry Horizontal Drop Down Menu - Macromedia Exchange Dreamweaver Extensions

I just created a spry horizontal drop down menu and have a transparent background on the main menu. The transparency is there with all browsers except IE. Wondering if anyone knows the problem. Thanks cht "UTF-8"; /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /************************************************** ***************************** LAYOUT INFORMATION: describes box model, positioning, z-order ************************************************** *****************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; } ...

  1. #1

    Default Spry Horizontal Drop Down Menu

    I just created a spry horizontal drop down menu and have a transparent
    background on the main menu. The transparency is there with all browsers except
    IE. Wondering if anyone knows the problem.

    Thanks

    cht "UTF-8";

    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


    /************************************************** *****************************

    LAYOUT INFORMATION: describes box model, positioning, z-order


    ************************************************** *****************************/

    /* The outermost container of the Menu Bar, an auto width box with no margin
    or padding */
    ul.MenuBarHorizontal
    {
    margin: 0;
    padding: 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:
    [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
    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: auto;
    white-space: nowrap;
    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;
    background-color: transparent;
    }
    /* 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;
    background-color: #defdfa;

    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
    background-color: #defdfa;
    float: none;

    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%)
    */
    ul.MenuBarHorizontal ul ul
    {
    position: absolute;
    margin: -5% 0 0 95%;
    background-color: transparent;
    }
    /* 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;
    background-color: transparent;
    }


    /************************************************** *****************************

    DESIGN INFORMATION: describes color scheme, borders, fonts


    ************************************************** *****************************/

    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
    border: 1px solid #6E3900;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    }
    /* Menu items that have mouse over or focus have a blue background and white
    text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    background-color: transparent;
    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: transparent;
    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;
    }
    /* 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-color: #FFF;
    }
    }

    Webkil Guest

  2. #2

    Default Re: Spry Horizontal Drop Down Menu

    Webkil wrote:
    > I just created a spry horizontal drop down menu and have a transparent
    > background on the main menu. The transparency is there with all browsers except
    > IE. Wondering if anyone knows the problem.
    >
    > Thanks
    >
    > cht "UTF-8";
    >
    > /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

    First thing you should do is to update to the latest version of Spry which is Spry 1.6.1. Install the updater:
    [url]http://www.macromedia.com/go/labs_spry_download[/url]


    Or grab the files from the Spry download package, I think that they are in there:
    [url]http://labs.adobe.com/technologies/spry/home.html[/url]

    Or pull directly from:
    [url]http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css[/url]
    [url]http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css[/url]
    [url]http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js[/url]

    Also, there's a forum dedicated to Spry, so it would be better to be asking Spry questions there:
    [url]http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602[/url]

    Regardless, you should post a link to your page, as it is quite common to need to look at code from many of the files that comprise the final page your visitors receive.


    --
    Danilo Celic
    | [url]http://blog.extensioneering.com/[/url]
    | WebAssist Extensioneer
    | Adobe Community Expert
    danilocelic AdobeCommunityExpert Guest

Similar Threads

  1. Spry horizontal menu bar question
    By lafleuja in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 4
    Last Post: August 28th, 05:52 PM
  2. Problem with Spry Horizontal Menu Bar
    By suddethm in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 0
    Last Post: August 13th, 05:16 PM
  3. Spry Horizontal Menu
    By mahrer96 in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 2
    Last Post: June 28th, 05:14 PM
  4. Spry Menu - Horizontal
    By Symplig0thi in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 1
    Last Post: April 23rd, 07:22 AM
  5. PLEASE HELP! Spry horizontal menu bar
    By sara moore in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 4
    Last Post: December 26th, 01:26 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139