Spry menu blank in IE 5.2

I tested all the DW CS3 menu bar, accordions, collapsible
panels on IE 5.2 - none work.
I even uploaded one test page on my server to make sure the
problem was not on my side.
http://www.cinelines.com/sprydropdown.html
The site I am building will be used by clients with older
browsers.
Is there a fix that can address the issue?
Thank you
JC

>I tested all the DW CS3 menu bar, accordions, collapsible
panels on IE
>5.2 -
> none work.
> I even uploaded one test page on my server to make sure
the problem was
> not on
> my side.
http://www.cinelines.com/sprydropdown.html
> The site I am building will be used by clients with
older browsers.
> Is there a fix that can address the issue?
I don't think you'll be able to "fix" the Spry solutions to
make them work
in IE 5.2
You can check the link below; these are not simple solutions
to implement,
but they have pretty good browser support.
http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
- Add "you are here" highlighting to virtually any menu
- FAQ pages made easy

Similar Messages

  • Images in Spry menu blank in IE

    I have a website with a spry drop down menu. It appears perfect in Safari and Firefox, but the image areas are blank in IE. Any help?

    Hi,
    Down at the bottom of the sprymenubarhorizontal.css (or if vertical, look for the same type ofthing at the bottom of the css document)  do you still have this text?:
    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;
        list-style-type: none;
    /* 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;
        list-style-type: none;
    Hope this helps.
    Cheers,
    Janell

  • Added Spry menu in CS3, site is entirely blank in IE 6 or 7, fine in FF, mac

    I've about had it. Built a site, posted here with some issues
    with a P7 menu adding blue bar. I deleted all the P7 code...page
    was back to normal, but without a navigation bar. So, I added one
    of the new Spry bars in DW, set it all up, tested it on my Mac,
    works fine.
    I upload all pages to server, open it in Explorer 6 and 7 on
    PC, and I get one blank white page! I downloaded Firefox for PC,
    and the site is fine there. It's fine everywhere else. At first, I
    had just the background tile in IE. Didn't panic yet. Did some
    stuff, and then even that is gone.
    I can not comprehend where to begin troubleshooting this. I
    did not backup the site before I started screwing with this, so I'm
    in trouble here.
    the url is
    http://www.auroratownship.org/proto
    Do you guys see a plain white page too? If you have Firefox
    or another browser, can you try it there as well to see what it is
    supposed to look like? I even tried deleting all the Spry menu
    stuff, didn't matter.
    HELP!

    So far I've not spotted the problem for usre, but there is
    one
    validation error that you should fix, just in case.
    <noscript>
    <map>
    Menu provided by f-source.com, All Rights Reserved. <a
    href="
    http://f-source.com">Web
    menu</a>
    </map>
    </noscript>
    remove that errant <map></map> tag and see what
    happens.
    E. Michael Brandt
    www.divaHTML.com
    divaGPS | divaFAQ
    www.valleywebdesigns.com
    JustSo PictureWindow
    synterx wrote:
    > I've about had it. Built a site, posted here with some
    issues with a P7 menu
    > adding blue bar. I deleted all the P7 code...page was
    back to normal, but
    > without a navigation bar. So, I added one of the new
    Spry bars in DW, set it
    > all up, tested it on my Mac, works fine.
    >
    > I upload all pages to server, open it in Explorer 6 and
    7 on PC, and I get one
    > blank white page! I downloaded Firefox for PC, and the
    site is fine there. It's
    > fine everywhere else. At first, I had just the
    background tile in IE. Didn't
    > panic yet. Did some stuff, and then even that is gone.
    >
    > I can not comprehend where to begin troubleshooting
    this. I did not backup the
    > site before I started screwing with this, so I'm in
    trouble here.
    >
    > the url is
    http://www.auroratownship.org/proto
    >
    > Do you guys see a plain white page too? If you have
    Firefox or another
    > browser, can you try it there as well to see what it is
    supposed to look like?
    > I even tried deleting all the Spry menu stuff, didn't
    matter.
    >
    > HELP!
    >

  • Problem with .css for Spry menu

    Hi,
    I am having a problem with the Spry menu I have created and edited. All looks great in the Design view of Photoshop however under the Live view or opened using a browser the menu reverts to a list of hyperlinks!
    I have checked the .css link but when using Firefox CSS editor the CSS file for the menu is simply blank?
    Any suggestions would be great!
    Thanks,
    Ozan

    Your SpryMenuBarHorizontal.css needs to be within your SpryAssets folder, which is where it would have been put automatically when you inserted the SpryMenuBar. You can move it back in there using the Files Panel.
    Here is what the file structure needs to look like:
    SpryAssets
    SpryMenuBar.js
    SpryMenuBarHorizontal.css
    cssstyletemplate.css
    index.html (or whatever the name of your page is)
    Hierarchally, the top level of your root folder will show folders for SpryAssets and css and the html pages will be on the same level.
    The Spry assets themselves will be down a level IN the SpryAssets folder, as the styletemplate.css file will be down a level IN the css folder.
    In the head of the document, you will have
         <link rel="stylesheet" type="text/css" href="css/styletemplate.css" />
         <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"> </script>
         <link rel="stylesheet" type="text/css" href="SpryAssets/SpryMenuBarHorizontal.css" />
    At the end, remove the slash before Spry inside the imgDown and imgRight sections:
         <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    Compare these with your files and file structure and correct any small typos, and they should be correctly linked.
    Beth

  • Spry Menu Bar Positioning Problem in IE

    I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
    In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
      <ul id="MenuBar2" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
          <ul>
            <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
            <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
            <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
          </ul>
        </li>
      </ul>
    <ul id="MenuBar3" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
          <ul>
            <li><a href="#">SLIDING DOORS</a></li>
            <li><a href="#">BI-FOLD DOORS</a></li>
            <li><a href="#">ROOM DIVIDERS</a></li>
          </ul>
        </li>
      </ul>
    Here is the page where you can see the problem if you view it with IE, and see that it's  fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
    http://2113web.com/indeco/index.html
    I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
    Below is the CSS:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        font-weight:bold;
        cursor: default;
        width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        white-space: nowrap;
    /* 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;
        top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        float: none;
        background-color:#f5f5e8;
        height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 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:none;
    /* 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: #59330d;
        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: #afa06f;
    /* 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: #afa06f;
    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;
    Perry

    Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
    Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
    I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
        padding: 0.5em 2em 0.5em 0.75em;"
    With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
    Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
    Perry
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        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: 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;
        margin-top: 40px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        display: block;
        float: none !important;
        width: auto;
        white-space: nowrap;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #f5f5e8;
        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: #f5f5e8;
        color: #afa06f;
    /* 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: #f5f5e8;
        color: #afa06f;
    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
    /* 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
    /* 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
    /* 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
    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);
        background: transparent;
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;

  • Spry Menu Bar disappears absolute position

    Hello all this is my first time posting on this site so bear with me. I have a semi-transperant spry menu bar that i inserted into the header div, over an image. I moved the menu bar -38px, when the position is set to relative the menu bar is visible, however the old position of the menu bar has a blank white space there. I think this is due to the relative position property. When i change it to absolute the whole menu bar disappears? http://www.brightlikethesun.com/index2.html (the position is back to relative to show the menu bar and also background for header is blue to show the space) 
    CSS
    /* 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
    width: 100%;
    margin: auto;
    position: relative;
    top: -38px;
    font-family: "Lucida Console", Monaco, monospace;
    opacity: 0.7;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    margin-right: auto;
    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 */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 20%;
    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-family:Arial, Helvetica, sans-serif;
    font-size: 70%;
    z-index: 1020;
    cursor: default;
    width: 50em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 50em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #C0C0C0;
    text-decoration: none;
    background: rgba(98, 135, 167, .4)
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45484d 0%,#000000 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45484d 0%,#000000 50%); /* IE10+ */
    background: linear-gradient(to bottom, #45484d 0%,#000000 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    /* 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;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    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;
    html 
    <!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>Bright Like The Sun -- San Antonio, TX</title>
    <style type="text/css">
    <!--
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #000000;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(background.jpg);
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;  /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 5px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    font-family: Tahoma, Geneva, sans-serif;
    color: #000;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    color:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background-color: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
    background-color:#06C
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
    float: left;
    width: 20%;
    padding-bottom: 0px;
    background: #f1da36; /* Old browsers */
    background: -moz-linear-gradient(left, #f1da36 0%, #fefcea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1da36), color-stop(100%,#fefcea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* IE10+ */
    background: linear-gradient(to right, #f1da36 0%,#fefcea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#fefcea',GradientType=1 ); /* IE6-9 */
    .content {
    padding: 0px 0;
    width: 80%;
    float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The footer ~~ */
    .footer {
    padding: 10px 0;
    background-color: #000000;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    font-family: "Comic Sans MS", cursive;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    #menurules {
    margin: 0px;
    padding: 0px;
    -->
    </style>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="BLTS1.jpg" alt="BLTS" name="BLTS" width="100%" height="100%" id="BLTS" style="display: block;" /></a>
       <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#"><center>Home</center></a></li>
         <li><a href="#"><center>Shows</center></a>
    <ul>
             <li><a href="#"><u>Upcoming shows</u><br />
    <br />
    May 4th 2013 @<img src="502.jpg" width="5%" height="5%"><br />
    Bright Like The Sun along with Little Science<br />
    8pm 21+
    </a></li>
                   </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#"><center>Merch</center></a>
           <ul>
             <li><a class="MenuBarItemSubmenu" href="#"><u>Album</u><br /><img src="coda fin cover.jpg" width="15%" height="15%"><font size="4">Coda Fin</font><br />
    Purchase Here or Itunes</a>
                        </li>
             <li><a href="#">Shirts--Coming Soon!</a></li>
             <li><a href="#">Various--Coming Soon!</a></li>
           </ul>
         </li>
         <li><a href="#"><center>Bio</center></a></li>
    <li><a href="#"><center>Contact</center></a></li>
    </ul><!-- end .header --></div>
    <div class="sidebar1">
      <p></p>
        <br />
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div> 
      <div class="content"><p align="right"><a href="https://www.facebook.com/brightlikethesun"><img src="FB.jpg" width="30" height="31" alt="Facebook" /></a><img src="twitter-icon.png" width="30" height="31" /></p>
        <p align="left"><img src="weare.jpg" width="185" height="72" /></p><p align="right"><iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=adznldvg&t=1366488970" width="340" height="54" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe></p>
        <p><img src="BLTS2.jpg" alt="BLTS" width="411" height="297" align="left" /><img src="BLTS font.jpg" width="340" /> is a Post-Rock band from San Antonio. They were born in early 2012 from the collective desire to make beautiful, thought provoking, and at times, chaotic music. Much like fellow Texan bands like Explosions in the Sky and This Will Destroy You, they are entirely instrumental, and known for creating progressively intricate waves of ambiance that grow with intensity and an unabashed wash of emotion. Attuned to their affinity for dynamics, seeing them live takes the listener from deafening walls of orchestrated sound, to melodies so subtle that one finds themselves acutely aware of their own breathing. <br />
          Bright Like The Sun&rsquo;s debut album, Coda Fin, was engineered/mixed by Alex Bhore (of This Will Destroy You), and mastered by TW Walsh (of Pedro The Lion). The record, which was self released, was made available on April 12, 2013.<br /><br /><img src="BLTS3.jpg" width="330" height="245" align="right" /></p>
    <br />
    <br />
        <h4>Bright Like The Sun Consists of:</h4>
        <p>Rob Mochen - Guitar <br />
        Chris Etheredge - Guitar/Keys <br />
        Christian Miranda - Bass <br />
        Steven Barrera - Drums    </p>
        <p><br />
        </p>
        <h4><u>Coda Fin</u> Release Date April 12th 2013    </h4>
        <h4><img src="coda fin cover.jpg" width="250" height="238" align="left" /><img src="venues.jpg" width="171" height="65" align="right" /><br />
        <br />
        <br />
        <br />
           <a href="http://502bar.com/"><img src="502.jpg" width="150" height="112" align="right" /></a><a href="http://www.gypsyloungeaustin.com"><img src="gypsylounge.jpg" / width="150" height="112" align="right"></a></h4>
        <p align="right"> </p>
      </div>
      <div class="footer">
        <p><font face="verdana" font size="2" font color="#FFFFFF">&#169;2013 Bright Like The Sun All Rights Reserved</font></p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    What I see:
    You need a width on the ul.MenuBarVertical style. Make it the same width as the ul.MenuBarVertical li selector.
    Remove the float: none; from this style:
    ul.MenuBarVertical ul li
         width: 12em;
         float: none;
    No such measurement as a half a pixel:
    ul.MenuBarVertical ul
         border: .5px solid #CCC;
    If you want a border, 1px is minimum...you repeat this incorrect half-pixel in several places.
    Running your page through the W3C Validator returned this: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.healthydirections.ca%2F&charset=%28dete ct+automatically%29&doctype=Inline&group=0
    Your initial errors are not declaring a DOCTYPE, which among other things, does not provide the browser with any information regarding how you want the code interpreted for your viewer. Some browsers guess well, some do not (IE).
    This
         <html>
    is insufficient.
    Apply this in its place, and run through the validator again.
    <!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">
    Beth

  • Added a spry menu bar and site works in firefox but not in chrome or IE.  Please help

    Hello,
    I'm a photographer by trade and have only picked up enough web design knowledge  in order to build a website that isn't distracting to my photographs and is simple to update and mantain.  Please breakdown any answers to my questions in very simple terms.
    To start off here is a link to my site for reference.  www.cechternach.com
    1.  My Biggest problem right now is that my site works in firefox but appears as a blank white page in chrome and in IE it only shows my background color.
         I'm assuming that this has something to do with the spry menu bar I added.  The galleries, banner, and footer were all part of a previous version of this website that didn't use the menu bar.  I actually used png's exported from an illustrator as buttons.  I've been wrestling with this menu bar for a few days now.  I had an issue with the menubar forcing down the gallery below it.  that was fixed by changing a position value from relative  to absolute in the menubar css.  Then I couldn't see the submenu over the galleries.  I think I fixed that with a wmode change but I"m not sure if I did that right.  I believe i needed to change that in the object and embed part of the code.  One spot for certain browsers and the other spot for other browsers.  I was a little confused on this because i also read that i needed to change the wmode in the javascript file in dreamweaver cs4 which is what i'm using.  Whatever wmode I changed it seemed to work in firefox.  The submenu background was showing up transparent but i fixed that in the menubar css.
    2.  I would like the submenu's to have a semi transparent blurred background effect.  Is this possible with a spry menu bar?
    3.  How do I center my text in the submenu?
    4.  My menu bar buttons should be the same font as my name in my banner.  It looks fine on my computer that has that font loaded but on other computers I was testing the site on the menubar buttons show up as a default font.  How can i fix this?
    5.  Is there any way to get rid of the grey lines that show up around my slideshow pro galleries and menu bar buttons when they are clicked?
    The last four questions aren't as important as the first one.  I may be upsetting the flow of the forum as well.  Please let me know if I'm not following procedure with any of my questions.  Feel free to point out any other problems you see with my page.  I'm trying to learn this as I go.  Thanks in advance.

    Spry widgets, which includes the SpryMenuBar, in their original state do not pose any problem in any browser!
    Widgets contain two parts
    JavaScript which drives the widget
    CSS which styles the widget to individual tastes
    The most common reason for a widget to misbehave especially in IE is because the inexperienced web developer has upset the delicate balance of the CSS. I say delicate, because in the original, great care has been taken by the Spry team to ensure cross browser compatibility.
    There are other reasons why a whole page can misbehave. In these cases, the culprit should be sought outside of the Spry framework.
    When trouble shooting, I would first of all comment out all of the Spry Spry parts and test the page in IE. If it does work after that, then yes come back here and we will have a look at the SpryMenuBarHorizontal.css for you.
    If it doesn't work after disabling Spry, then have a look at the coding and the CSS for your page and fix that.
    I hope this helps.
    Ben

  • Spry Menu not working correctly

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

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

  • Spry menu problems. Please help.

    Hello,
    I am new to web design so please try and be patient with me . 
    I am trying to create a horizontal spry menu bar into a new page.  Even though I select horizontal, the menu is vertical.  I have read through many previous posts and FAQ'q, but cannot find the answer.  It is not just in IE, it is in every browser and dreamweaver itself.  I am using 5.5.
    UPDATE-- If I create the spry into a new blank HTML document, it works just fine. So I imagine it is something to do with the template?
    Heres the code:
    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: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
              z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              position: relative;
              text-align: left;
              cursor: pointer;
              width: 8em;
              float: 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: 8.2em;
              position: absolute;
              left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
              left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
              width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
              position: absolute;
              margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
              left: auto;
              top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
              border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
              display: block;
              cursor: pointer;
              background-color: #EEE;
              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: #33C;
              color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
              background-color: #33C;
              color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
              background-image: url(SpryMenuBarDown.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
              background-image: url(SpryMenuBarRight.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
              background-image: url(SpryMenuBarDownHover.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
              background-image: url(SpryMenuBarRightHover.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
              position: absolute;
              z-index: 1010;
              filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
              ul.MenuBarHorizontal li.MenuBarItemIE
                        display: inline;
                        f\loat: left;
                        background: #FFF;
    ul.MenuBarHorizontal {
              width:8em;
              margin: auto;
    And this is the HTML for the menu bar when insterted into a page:
    InstanceBeginEditable name="Header" -->
                <div class="Header">
                  <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>
                        <li><a href="#">Item 1.3</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Item 2</a></li>
                    <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
                      <ul>
                        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                          <ul>
                            <li><a href="#">Item 3.1.1</a></li>
                            <li><a href="#">Item 3.1.2</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Item 3.2</a></li>
                        <li><a href="#">Item 3.3</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Item 4</a></li>
                  </ul>
                </div>
                <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Main Content" -->
    Thank you for any and all help!
    Nick

    Ok so I decided to make a nice menu through fireworks.
    This confuses me even further, how did you make a SpryMenuBar through FW?
    It now works, but the links to the drop down menu are not horizontal in the drop down menu.
    So it doesn't work
    And this is only when trying to enter it into the template, into a new HTML it works fine..So it does work
    Unforuntely I cannot post the website
    Well, our worries are over, there is no need to correct the problem, no one will ever see the website.
    Yes, I am being facetious.
    In all seriousness, you can upload the website to a temporary location. This way we will be able help you.
    Have a happy New Year!
    Gramps

  • Center Text in Spry Menu

    Hi there,
    I am building a basic website using DW CS4.
    I have put together a page that works without messing up the code too much:
    http://rcconnelly.net/900Fixed2.html
    In the Spry menu I would like to center the text vertically and
    have not been able to find a tutuorial that  included this tip.
    Can any of you folks get me going in the right direction?
    Thanks in advance!
    RC

    Alright I believe that you put my suggestions somewhere incorrect.  These menubars can be confusing.
    The easiest way to  center vertically is to simply make the box that is in a size that makes  the text in the middle.
    By this I mean that if this is your box (the ---- is the text)
    [        ]      <-----------------| Then the easiest way to make the box fit around the ----- is to get rid  of the bottom [      ]
    (just a figurative way of looking at the box, there is no actual division like [  ] its all just one box)
    You can do that by setting a height for the boxes. The height for the boxes is controlled by a particular div element. By default the height is left blank, which usually works because then it auto formats but in your case it does not appear to be working.
    We get rid of the bottom [      ] by setting the entire box's height to 35 px (which leaves enough room for the text to still show).
    Here is the code you want to modify. It is the second sub section down from the top. Pay attention to the CSS notes put there by the Adobe spry designer.
    /* Menu item containers, position children relative to this container and are same fixed width as parent */
    ul.MenuBarVertical li
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         position: relative;
         text-align: left;
         cursor: pointer;
         width: 175px;
            height: 35px;
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;
    If this does not work (make sure to update the live view or click the little globe icon to preview in
    a browser, or right click on the home page in your local files and click put to view on your actual remote
    server)then there might be another problem via a div box from the layout that is overriding it. If what I said
    above does not work then try visiting this part in the test stylesheet, and modify both the padding and
    width and height to see if that is the problem. The spry vertical menu might be trying to expand itself to fit in
    that div or another div somewhere on the page.
    .twoColFixLtHdr #sidebar1 {
         float: left; /* since this element is floated, a width must be given */
         width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
         padding: 15px 10px 15px 20px;
         background-color: #F5E7B6;
    I hope this all helped. If not, then I'm sorry- it's kind of hard to tell you exactly what to do, its much easier just
    to go through and change some stuff and troubleshoot it in dreamweaver. When messing around with the code, you should
    probably make an effort to edit the actual code and not use the built in interface, because its easier to lose
    track with the interface than when you actually go in and edit a part.
    Also, if you are new to CSS like you said, you might want to try to grasp the basics. Here is a good page to look through:
    http://www.adobe.com/devnet/dreamweaver/css.html
    Good luck!

  • Printing Problems with Spry Menu. Help?

    When I have a spry menu in the banner or main image and
    go to print. Well the image of banner or main image will not print out. It comes out as blank space, with just menu and no background pic.
    Help. Thanks

    what setting do i change?
    the thing is it printed before i added the spry menu.

  • Spry Menu 1.6.1 vs Spry Menu 2.0 (1.7) aka UI Menubar

    I have been working with the original Spry Menu that came with CS5 for some time now.  Slowly I have been learning how to use it, and more importantly, edit it without breaking it.  There are some great articles out there by David Power that I printed out and keep in a folder at my desk.  Great stuff.
    Now I want to build a menu that is supported on touch pads like an iPad.  Having spent many hours trying to figure it all out, I found a post that said you had to use the Spry Menu 2.0 version for touch features.  Oops, did not know that.  Having upgraded to the new version in the Widget Browser, customized it for colors and such, I put into a test page.  This is where it went all wrong. 
    I have no access to anything in the Properties Selector area.  It’s just blank, no options at.  If I go back to one of my old menus, it works just fine.  So I can't add top or submenu items to the menu like I could in the old version, unless I want to type out the code.  The menu does not display is design view like a finished product.  All I get is a listing of the menu.  I have to display the page in a browser or in live view mode to see it display right.  Which throws the page all out whack and it’s hard to edit with this big long list of text.
    So, I guess my question here is.  Does this sound right to everyone?  I saw a posting by Gramps, which makes me think I understand the problem above it true and because of that he sticks to the original version.  I want the touch pad access so I need to upgrade. 
    Is there a fix I have not found?  Some code change to make it all happy again?  Should I just dump the idea of using the Spry Menu and use something else?
    Thanks to everyone out there who take the time to answer our questions.  I think this is a my very first posting. 

    Amy, welcome to our fold.
    You have struck the epitome of the problem when using Spry Menu 2.0, it is a beast when one tries to shape and style it outside of the Widget Browser. The markup looks very meek and mild as in
    <ul id="MenuBar">
      <li> <a href="#">Home</a></li>
      <li> <a href="#">Entertainment</a></li>
      <li> <a href="#">Politics</a></li>
      <li> <a href="#">Sports</li>
    </ul>
    but once it is interpreted by the JavaScript, it looks like
    <div class="MenuBar  MenuBarLeftShrink" id="MenuBar">
        <ul id="" class="MenuBarView">
        <li class="MenuItemContainer"><a href="#" class="MenuItem MenuItemFirst" tabindex="0"><span class="MenuItemLabel">Home</span></a></li>
        <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Entertainment</span></a></li>
        <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Politics</span></a></li>
        <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Sports</span></a></li>
        <a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel MenuItemLast"></span></a>
      </ul><br class="MenuBarBreak">
    </div>
    <a href="#">
    <!-- rest of markup -->
    </a>
    </body>
    </html>
    There are certain aspects that I do not understand without spending time to follow them through. There is no documentation so you are left on your own. When submenu levels are added, the generated markup looks even stranger.
    The main problem with the original SpryMenuBar is its lack of support for touch screens; alternatively one could say that the problem lies with touch screens and their lack of ability to register hover events.
    This means that if we had a menubar that is not reliant upon hover events, our menubar will work in touch screen clients. In our menu above (that is the one that has not been reformed by JS), there is no hover event. All of the menuitems, being single level, follow the link with a click event. It is when a menuitem has a link as well as submenus that a hover event is required. If we remove the link when a menuitem has submenus, we also remove the need for a hover event and it will work in touch screen devices. To illustrate this
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a> <!-- no link -->
        <ul>
          <li><a href="mylink11.html">Item 1.1</a></li>
          <li><a href="mylink12.html">Item 1.2</a></li>
          <li><a href="mylink13.html">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="mylink2.html">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a> <!-- no link -->
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <!-- no link -->
            <ul>
              <li><a href="mylink311.html">Item 3.1.1</a></li>
              <li><a href="mylink312.html">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="mylink32.html">Item 3.2</a></li>
          <li><a href="mylink33.html">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="mylink4.html">Item 4</a></li>
    </ul>
    There are commercial extensions available that do work within DW as opposed to products from the Widget Browser that do not allow for DW interaction.
    Gramps

  • Divs are shifting after inserting spry menu bar

    I have tried so much that it has driven me crazy. Initailly I created this site by APdivs and it came out perfect and worked great, except it was not fluid and looked bad on bigger browser and screen size. I decided to change it to fluid way. Now I am in bad shape as soon as I put a horizontal spry menu bar. it shifts the columns to the left and leaves a blank space next to the column 3. I am out of idea, how to fix it. As soon as I take the menu bar out, it works perfect. and columns are stretched to the end on both sides.
    Here is the link of test page
    www.hpbsurgery.net
    This is what I have tried-nothing worked
    put menu bar in container
    put menu bar in header div
    Put mebu bar in a horizontal div inside header div.
    changed the size and dimension of menu bar
    Any help would be greatly appreciated as I am running out of time.
    Thanks much all....

    Thanks very much for your help. I just wanted to mention one thing which I discovered this am by accident out of frustration. Originally, I was trying to control the size of the 3 columns with external CSS and it was messing up after inserting menu bar. I wrote directly in the code this am to exactly define the size besides in my CSS. AND............it fixed the problem and stretched the columns to the end on both side and sizes were appropriate, I am still not sure why did it happen.
    I am not a professional and trying to build my own site as I have interest in web design, but this is first time with DW.
    I really appreciate your help and suggestion about the code.
    Thanks a lot, 
    Date: Wed, 26 Sep 2012 12:46:19 -0600
    From: [email protected]
    To: [email protected]
    Subject: Divs are shifting after inserting spry menu bar 
        Re: Divs are shifting after inserting spry menu bar 
        created by Nancy O. in Dreamweaver General - View the full discussion 
    You appear confused about how to use CSS classes and IDs.  Classes (.className) can be used multiple times in layouts as for re-usable styles.  IDs (#IDName) can be used only one time per page -- as for layout regions or when JavaScript is needed to act upon it.  Try copying and pasting this code into a new blank page.  Hopefully it will make more sense than what you have now. 
    <!NEW LAYOUT> 
    body  
    #header
    #horizontalmenu {
    min-height: 43px;
    width: 100%;
    overflow: hidden;
    margin: 0px;
    #leftbar {
    background-color: aqua;
    float:left;
    width: 18%; /*combined width and padding = 22%*/
    padding:2%;
    #middlebar {
    background-color: white;
    float:left;
    width: 52%; /*combined width and padding = 56%*/
    padding:2%;
    #rightbar    {
    background-color: green;
    color:white;
    float:right;
    width: 18%; /*combined width and padding = 22%*/
    padding:2%;
    #credential
    #footer {
    background-color: maroon;
    width: 100%;
    color:white;
    padding:2%;
    #header
    [Item 2 | #]
    [Item 3 | #]
    [Item 3.1 | #]
    [Item 3.1.1 | #]
    [Item 3.1.2 | #]
    [Item 3.2 | #]
    [Item 3.3 | #]
    [Item 4 | #]
    <!END #HEADER>
    #leftbar
    #middlebar
    #rightbar
    #credential
    #footer
      Nancy O. 
         Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/4729585#4729585
         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4729585#4729585
         To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4729585#4729585. In the Actions box on the right, click the Stop Email Notifications link.
         Start a new discussion in Dreamweaver General by email or at Adobe Community
      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

  • Spry menu in an include

    Using DW CS5 I created a spry menu in a blank page and placed it in an include file "ZzipMenuBar.inc.php"
    Created a template and put <?php include ('/ZzipMenuBar.inc.php'); ?> in the template.
    Created a new doc and selected no to remove code.
    Everything works at the root level
    http://www.zzipper.com/index.php
    Everything works at branch 1
    http://www.zzipper.com/Gallery/index.php
    Branch 2 I get a menu in live view but not on the web page
    http://www.zzipper.com/Gallery/Coyote/index.htm
    If I save the file and return live view doesn't show the menu.
    Any comments? It's got to be simple and operator error. Need to get this up quickly.
    Herman

    cycler wrote:
    Using DW CS5 I created a spry menu in a blank page and placed it in an include file "ZzipMenuBar.inc.php"
    Created a template and put <?php include ('/ZzipMenuBar.inc.php'); ?> in the template.
    Created a new doc and selected no to remove code.
    Everything works at the root level
    http://www.zzipper.com/index.php
    Everything works at branch 1
    http://www.zzipper.com/Gallery/index.php
    Branch 2 I get a menu in live view but not on the web page
    http://www.zzipper.com/Gallery/Coyote/index.htm
    If I save the file and return live view doesn't show the menu.
    Any comments? It's got to be simple and operator error. Need to get this up quickly.
    Herman
    Because you are using PHP code within your document, your document must have a PHP extension. At the moment this is HTM.
    I hope this helps.
    Ben

  • Dreamweaver "SPRY" Menu - Question on editing the CSS?

    Hi, I am using the "SPRY" menu in DW CS4
    In the CSS Styles panel there are a lot of "ul" (unordered lists) and "li" (lists) but I am unsure which ones to edit to get the changes I need below. If someone could give me some direction I would be very thankful.
    Here is the link to the website with the menu. http://www3.telus.net/~jessum/#
    How Do I ...
    1.Center the menu horizontally?
    2. Change the font style to a sans serif font?
    3. Move the menu's to the right so they're centered in the button?
    4. Add a different colored background images that will tile the width of the buttons?
    5. Change the width of the buttons?
    6. Add some "blank" buttons or empty spacers to the left and right of the menu buttons to fill up the with of the menu bar?

    Customizing Spry Menu Bar
    http://foundationphp.com/tutorials/sprymenu/customize1.php
    Centering a Horizontal Spry Menu
    http://foundationphp.com/tutorials/sprymenu/centering.php
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

Maybe you are looking for