Spry menu with 1px (line? shift?) down in IE7

Hi. I built a spry menu that works great on my Mac using Safari, Opera, Firefox, Flock, Navigator. But on my PC, using IE7, there appears a 1px (white) line at the top of the menu. At first, I thought IE7 was shifting the menu down 1px. But I see a 1px (white) line between (at the top of) each submenu item, and think it may be the same issue. Can anyone help?
Thanks.
Here's the example: http://www.ontherise.org/Rev/
Here's the css I'm using for the menu:
@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
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 12px;
list-style-image: none;
text-decoration: 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 a auto width that stretches to accomodate text */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
list-style-image: none;
text-decoration: none;
/* 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: 19em;
position: absolute;
left: -1000em;
text-decoration: none;
/* 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: 19em;
/* 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 #FFFFFF;
/* Menu items are a red block with padding and no text decoration. Stephen added the ul.MenuBarHorizontal a:visited to keep the same treatment for visited links */
ul.MenuBarHorizontal a, ul.MenuBarHorizontal a:visited
display: block;
cursor: pointer;
background-color: #992E2E;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding-top: 0.5em;
padding-right: 2em;
padding-bottom: 0.2em;
padding-left: 0.5em;
text-decoration: none;
/* Stephen added this  id selector so a clicked main tab would remain a white block*/
#clicked
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and black text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
/* Menu items that have mouse over or focus have an orange background and black text. Stephen added the ul.MenuBarHorizontal a:hover#clicked so the hover highlight color would appear when you mouse over a clicked state main menu item */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus,
ul.MenuBarHorizontal a:hover#clicked
background-color: #FFCC66;
color: #000000;
text-decoration: none;
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;

I guess the real question is: is there any reason IE7 would add a 1px white line at the top of the main menu and each submenu?

Similar Messages

  • HT201412 did a software update and now the only thing I get is the itunes logo and arrow pointing up and a lock symbol with a line going down toward the screen button.  Any suggestions to get this to open?

    Trying to get the ipad to open after doing a software update.  I only get the itunes logo with an arrow pointing toward it and a lock symbol with a line going down towards the screen button.  Any suggestions to get this to open?

    You are in Recovery Mode. Follow the instructions below to recover your iPad.
    http://support.apple.com/kb/ht4097

  • Spry Menu with submenu border?

    Hi Everyone,
    I'm a bit of a newbie, and I am designing a website with a spry menu (which I have since found out probably wasn't the best way to go) and I have hit a hurdle which I can't fix or find the solution to anywhere. I'm hoping it might be easy for you guys.
    I have attached a pic of the problem, one menu item has a submenu, this is the 'About' menu, as you can see, it has a border top and bottom that I can't seem to find in the code in order to get rid of it. If anyone could let me know how to fix this I'll be extremely grateful!
    Also, any suggestions of better menu methods would be appreciated.
    Have a nice day
    Spry CSS below:
    @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
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 100%;
        float: none;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: 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 KN: width changed to auto */
    ul.MenuBarHorizontal li
        margin: 0;
        list-style-type: none;
        font-size: 18px;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        white-space: nowrap;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: bolder;
        text-transform: uppercase;
        padding: 0;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: auto;
        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
        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%;
    /* 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. KN: I removed the border radius prior to this it was border-radius: 5px 5px 0px 0px;*/
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding-left: 1.1em;
        padding-right: 1.1em;
        padding-top: 1em;
        padding-bottom: 1em;
        text-decoration: none;
        color: #009007;
        border-bottom: 2px;
        border-right: 0.3px #333333;
        border-bottom-color: rgb(51,51,51);
        background-image: url(../Images/spry-menu%20chrome.jpg);
        background-position: right;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #333;
        background-image: url(../Images/spry-menu-chrome-hover.jpg);
    /* 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(../Images/spry-menu-chrome-hover.jpg);
        color: #333;
    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%;
        color: rgb(0,141,7);
        background-image: url(../Images/spry-menu%20chrome.jpg);
    /* 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%;
        background-color: rgb(3,139,7);
    /* 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-position: 95% 50%;
        background-image: url(../Images/spry-menu-chrome-hover.jpg);
        color: #333;
    /* 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-position: 95% 50%;
        background-image: url(../Images/spry-menu-chrome-hover.jpg);
        color: #333;
    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;

    Hi Gramps,
    Here is the site:
    http://www.wordartist.com/mythicharacters
    If you hover on "Sacred Arts", you'll see the behavior.
    Thanks for taking a look at this,
    Phlange98

  • POP UP menu with image not pull down

    I'm new to fireworks. I've looked at tutorials, but it seems
    all the pop up menu features are for pull down menus. I want to
    press the button and have a blank ( separate window 360x 303 pixals
    ) pop up with a jpeg image in it. How do I do this?

    katveze,
    What you are wanting to do is called Disjointed Rollovers.
    Here is a
    great tutorial to point you in the right direction:
    http://www.communitymx.com/content/article.cfm?cid=E11E8
    alex
    katveze wrote:
    > I'm new to fireworks. I've looked at tutorials, but it
    seems all the pop up
    > menu features are for pull down menus. I want to press
    the button and have a
    > blank ( separate window 360x 303 pixals ) pop up with a
    jpeg image in it. How
    > do I do this?
    >

  • Spry Menu with Dynamic Content

    I am having a problem with Spry Menus where the content is
    created dynamically, from another Javascript function.
    This seems to be a Firefox issue: it works in IE7.
    The menu content loads, but the drop down functions don't
    work. Is there a way to make this work.
    Here is an example:
    quote:
    <head>
    <script src="spry/SpryMenuBar.js"
    type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
    {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    function loadMenu() {
    ... script to build menu content (strMenu)...
    document.getElementByID(MenuBar1).innertHTML=strMenu;
    //-->
    </script>
    <body onload="loadMenu()">
    <div id="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Item
    1</a>
    <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Item
    2</a>
    <ul>
    <li><a href="#">Item 2.1</a></li>
    <li><a href="#">Item 2.2</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    I have tried putting the creation of the menubar widget after
    the menu was filled, but that did not work either.
    Thanks,
    Rob

    Hi,
    You should use observers to activate the Menu after the
    markup is built.
    This has to do with the way styles are applied.
    http://labs.adobe.com/technologies/spry/samples/menubar/MenuFromNestedData.html

  • How do you fix a screen with colored lines going down left side

    my HP DV6 notebook has a dark spot going half way down screen and red,green,blue lines on left side of screen,how do I fix this, some have said I could maybe replace cable in the hinge area on left side, I am a senior citizens, is there a utube showing how to do this, if you think this is my problem , help

    Hi @gloriacarsale2 ,
    Thank you for visiting the HP Support Forums and Welcome. I have looked into your issue about your HP Pavilion dv6 Notebook and  LCD screen giving you an issue. You could reset the BIOS with this document selecting the reloading the BIOS default settings.
    I would be happy to assist if needed. How Do I Find My Model Number or Product Number?
    Please let me know.
    Thanks.
    Please click “Accept as Solution ” if you feel my post solved your issue, it will help others find the solution.
    Click the “Kudos, Thumbs Up" on the bottom to say “Thanks” for helping!

  • Formatting restaurant menu  with dotted line to price, what I see isn't what I get.

    I have returned to Dreamweaver CS3 after using homesite for a
    couple of years. I've been using both. I thought dreamweaver would
    be helpful for things that would be easier when you really need to
    visualize them. I've gone round and round about how to redo a
    restaurant menu. I decided to stick with a table but to simplify
    the coding. Each item is set up as follows. The item is in the left
    cell along with the leading periods and the prices are in the right
    cell.
    Pad Thai
    Chicken....................................................................
    $8.95
    Shrimp.......................................................................$9.95
    The problem is that I have to guess how long the line of
    periods needs to be in Dreamweaver. I can't just bring the line up
    to the end of the cell. I guess, save and look at it in a browser
    to see if it's right. Some lines need to be shorter or longer and
    there's no rhyme or reason, at least as far as I can tell. Below is
    an example of how different lengths can equal the same thing when I
    look in the browser.
    Please note, I can't get the forum to line up the prices but
    they should be lined evenly up since there in the right hand cell.
    Pad Thai
    Chicken....................................................
    $8.95
    Shrimp.....................................................................
    $9.95
    Beef.....................................................................
    $10.95
    I'm wondering if there's something I'm not understanding or
    if there's something I can do to really display WYSIWYG.
    Thanks.

    > I'm wondering if there's something I'm not understanding
    or if there's
    > something I can do to really display WYSIWYG.
    You'll never get this done in WYSIWYG.
    The trick is to use a little CSS with an image of a series of
    dots declared
    as the background image of the table cell. Let it repeat
    across the cell.
    You have what you want.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "amy3000" <[email protected]> wrote in
    message
    news:[email protected]...
    >I have returned to Dreamweaver CS3 after using homesite
    for a couple of
    >years.
    > I've been using both. I thought dreamweaver would be
    helpful for things
    > that
    > would be easier when you really need to visualize them.
    I've gone round
    > and
    > round about how to redo a restaurant menu. I decided to
    stick with a table
    > but
    > to simplify the coding. Each item is set up as follows.
    The item is in
    > the
    > left cell along with the leading periods and the prices
    are in the right
    > cell.
    >
    >
    Pad Thai
    >
    Chicken....................................................................
    > $8.95
    >
    >
    Shrimp.......................................................................$9.
    > 95
    >
    > The problem is that I have to guess how long the line of
    periods needs to
    > be
    > in Dreamweaver. I can't just bring the line up to the
    end of the cell. I
    > guess,
    > save and look at it in a browser to see if it's right.
    Some lines need to
    > be
    > shorter or longer and there's no rhyme or reason, at
    least as far as I can
    > tell. Below is an example of how different lengths can
    equal the same
    > thing
    > when I look in the browser.
    >
    > Please note, I can't get the forum to line up the prices
    but they should
    > be
    > lined evenly up since there in the right hand cell.
    >
    >
    Pad Thai
    >
    Chicken....................................................
    > $8.95
    >
    Shrimp.....................................................................
    > $9.95
    >
    Beef.....................................................................
    > $10.95
    >
    > I'm wondering if there's something I'm not understanding
    or if there's
    > something I can do to really display WYSIWYG.
    >
    > Thanks.
    >
    >
    >

  • Help  iPhone 5 completely black & white glow in the middle with pink lines vertically down the screen

    i got my iphone 5 screen fixed, and since then the screen this is what has happend and I can't use it.

    If Apple or an Authorized Apple Service Provider replaced the screen, bring it back and let them check the phone, repairs are also covered by a short warranty period.
    If a 3rd party did replace the screen, you can't bring it to Apple to get it serviced, Apple does not allow others to do repairs on their devices. In that case, those who fixed the screen, have to do something about that.

  • Spry Vertical Navigation menu with secondary flyout menu not showing

    I'm using Windows and CS3. I have a vertical spry menu with one of the items opening to a secondary vertical menu. The menu is positioned left and I want the flyout menu to open so it can be seen on top of the central content column. I have a background color on the central div and when I hover over the item on the menu bar, you can't see the secondary menu opening. But I know it is there as I have removed the central div and when previewed in the browser (IE) it works fine. But when I replace the central div, the secondary menu is hidden again. I don't want to play around too much as I know Javascript is involved and I can easily ruin those elements which are now working. I hope someone can suggest something reasonably straight forward to assist.
    The code is the standard stuff - I have only modified colours basicall with one or two other tweaks to fit the space:
    ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 200px;
    background-color: #979c9c;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-color: #FFFFFF;
    ul.MenuBarActive
    z-index: 1000;
    ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 200px;
    color: #343642;
    ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 200px;
    left: -1000em;
    top: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 100%;
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    ul.MenuBarVertical ul li
    width: 200px;
    ul.MenuBarVertical ul
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #979c9c;
    color: #343642;
    text-decoration: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #343642;
    color: #fff;
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #343642;
    color: #fff;
    ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    @media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
      display: inline;
      f\loat: left;
      background: #FFF;
    Thanks.

    Frank,
    The code that you have shown us re SpryMenuBarVertical.css is correct so that we can assume that the problem lies elsewhere.
    Because you have not shown the rest of the code, we can only make assumptions which may or may not help. From the above screen shot, I see that you are using AP's (Absolute Positioned) elements. This is a NO NO!!!
    Have a look at the following wich achieves the same, but without AP's. Just copy and paste in a new document and view in any browser.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        margin: 0;
        padding: 0;
    html {
        height: 100%;
        background: #FFC;
    body {
        width: 960px;
        margin: auto;
        background: #060;
    h1, h2, h3, p {
        margin: 0 20px;
    #header {
        height: 95px;
        background: #060;
    #sidebarL {
        width: 160px;
        float: left;
        color: #CCC;
    #content {
        width: 800px;
        float: left;
        background: #FFF;
    #sidebarR {
        width: 200px;
        float: right;
        background: #FF3;
    #footer {
        height: 50px;
        background: #060;
        color: #CCC;
        clear: both;
    </style>
    </head>
    <body>
    <div id="header"><h1>This is my Header</h1></div>
    <div id="sidebarL">
      <h3>This is my sidebar</h3>
      <p>This is where our menu goes</p>
    </div>
    <div id="content">
      <div id="sidebarR">
          <h3>This is my other sidebar</h3>
        <p>Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Qui officia deserunt consectetur adipisicing elit, ut enim ad minim veniam.</p>
      </div>
        <h2>This is the content</h2>
      <p>Velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ullamco laboris nisi sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua. Sunt in culpa in reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor quis nostrud exercitation lorem ipsum dolor sit amet. Ullamco laboris nisi consectetur adipisicing elit, qui officia deserunt. Ut labore et dolore magna aliqua. Quis nostrud exercitation. Velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
      <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut enim ad minim veniam. Eu fugiat nulla pariatur. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Cupidatat non proident, excepteur sint occaecat velit esse cillum dolore.</p>
    </div>
    <div id="footer"><p>and lastly here is my footer</p></div>
    </body>
    </html>
    Gramps

  • Using a background image for the buttons in spry menu

    Hi All,
    Going nuts here.
    I'm using the vertical spry menu widget w DW CS3 and trying
    to alter the css style sheet, so that I can use a li class for each
    of the 14 links on this page, with an upstate and a hover state
    only. (the focus, and hover while down will be the same as the
    others, to keep it simple and not too distracting)
    The page is here that I will be replacing the entire
    background image in sidebar1 and sidebar2 with a custom spry menu
    with the 14 li classes for 2 seperate menus:
    http://audibleimagesav.com/blank_doc.html
    Has anyone used a background image in place of just using
    bkgrd colors and borders for the spry menu ?
    I am aware of the attributes that the help docs suggest that
    need to be altered as listed here :
    http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
    I have been working on just an experimental page, that is now
    hacked up, however if you want to see that it is here with only the
    first list item coded:
    http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
    The spry css menu widget for that page is here:
    http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
    So in short, has anyone done a bkgrd image for the main menu
    (not submenu) in a spry widget?
    Thanks in advance.
    Art
    Art Hansen
    Web Design & Marketing
    http://www.innova-techsolutions.com
    321.750.3852 - Cocoa Beach, Florida, USA

    http://meyerweb.com/eric/css/edge/popups/demo2.html
    Maybe

  • Dreamweaver Spry Menu Not Working Properly

    Hello,
    I'm putting a horizontal spry menu bar into a table cell (I haven't had the time to learn how to use divs yet and tables have been working fine for me).  I have 6 items in the menu with 2 or3 drop down menus for each one.  When I view it in live view, when I roll over the menu items, the whole bar drops down to the left side and becomes vertical.  Why is this happening?  It is shorter than the table cell so that shouldn't be the problem.  Thank you for your help. 

    Okay, this is crude, but it's as far as I got.  Only some of the buttons cause the menu to move down.  Please keep in mind that I am a designer, not a programmer.  I'm learning, but am very weak when it comes to coding knowledge.  Thanks.
    http://littlechisel.com/Ideal_Window/

  • SPRY Menu Focus State

    To eliminate the fuzzy line around the boxes, I understand
    how to in Accordion and other SPRY. But, I can not figure it out in
    SPRY Menu with both the main and sub menus.
    Can someone please advise as to what Style is needed? For
    example "TabbedPanelsTab:Focus, but for SPRY Menu. ??
    Regards,
    John M

    You're probably looking for this one:
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    in SpryMenuBarHorizontal.css or this one:
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    in SpryMenuBarVertical.css.
    Best - Joe
    Joseph Lowery
    Vice President of Marketing, WebAssist
    Author of Dreamweaver CS3 Bible
    "mcgregorlink" <[email protected]> wrote in
    message
    news:fleia0$ihc$[email protected]..
    >
    > To eliminate the fuzzy line around the boxes, I
    understand how to in
    > Accordion
    > and other SPRY. But, I can not figure it out in SPRY
    Menu with both the
    > main
    > and sub menus.
    >
    > Can someone please advise as to what Style is needed?
    For example
    > "TabbedPanelsTab:Focus, but for SPRY Menu. ??
    > Regards,
    >
    > John M
    >

  • Spry Menu Color Changes

    I'm looking to only change the hover on the submenu of the
    spry menu I'm creating. In the CSS file I seperated the lines that
    have all the MenuBarHorizontal hovers grouped together but that
    didn't work. I dont' want the background-color to change on the
    main menu when hovered, however, I'd like the submenus
    background-color and color to change. Please help.
    Email me

    The sample page I posted came after searching for an easy
    "how to do it". The closest I found to a tutorial was this:
    http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
    The author designs and implements a spry menu with Fire Works
    graphics. The last section describes how to modify the existing CSS
    for multiple levels. Yet I found the sample page easier to follow.
    I hope this helps though.

  • Transparent spry menu

    I am using a spry menu with a transparent background, but it
    shows up as white in IE. Also, how can I make the top level have a
    transparent background and the drop downs have a color background?

    You can find the answer for thisin the same forum

  • Spry Menu bar file

    Hi,
    While running link checker on my site, I discovered the
    SpryMenuBar.js file is shown as a broken link (and probably why
    when i view my site in a browser, none of the drop down menus
    work). I searched my hard drive and the file is nowhere to be
    found...actually, didn't even know it existed. Question is, can I
    get it back somehow?

    "dreamnew" <[email protected]> wrote in
    message
    news:f4rkr2$g6i$[email protected]..
    > Ok, when I created the new page in the same site as you
    suggested, I did
    > get
    > the SpryAssets folder,
    Ok, that's good, we know it's working as it should. Take a
    look in the site
    definition preferences, there is a section for Spry - you can
    set where the
    Spry files get written.. maybe there's something in there
    that's not quite
    right.
    > before the few spry files I had were just in the file
    > manager listing, right along with my othr files. Very
    strange indeed.
    This is confusing me... are you saying that the spry files
    were just mixed
    in with the rest of your files? but weren't saved to a Spry
    folder?? I
    thought you said that no such js file was created....
    > So, will the menu settings I've created on the template
    and other pages of
    > my
    > site need updating somehow or does it automatically pick
    up the .js file?
    You will need to check your original file and see where the
    Spry Menu js
    script is being pointed to?
    As long as the JS script and the css file are pointing to the
    correct files
    so that paths are correct, then you will be able to edit the
    Spry menu with
    no problems.
    Hope all that makes sense :-)
    Nadia
    Adobe® Community Expert : Dreamweaver
    CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    ~ Customisation Service Available ~
    http://www.csstemplates.com.au
    Spry Widget Examples
    http://www.dreamweaverresources.com/spry-widgets/

Maybe you are looking for