Horizontal Menu in IE6

Created a horizontal menu works great in all browsers but IE6, http://www.remodelersoutlet.com. I posted in the forum a couple of weeks ago but no response so I'm giving it another try. I think the problem is with visited links, but can't resolve. Here is the code and some screen shots of the error I'm seeing. Thanks for taking a look.
@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;
    float: right;
/* 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: 5.6em;
    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: 5.6em;
    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: 5.6em;
/* 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;
    width: 5.6em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #FFFFFF;
    padding: 5px;
    color: #333399;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-align: center;
    font-weight: bold;
    border: thin double #757B95;
/* 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: #333399;
    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;

I added this to my code
<!--
a:link {
    color: #FFFFFF;
a:hover {
    color: #FFFFFF;
a:focus {
    color: #FFFFFF;
a:active {
    color: #FFFFFF;
-->
and it seems to have fixed my menu bar disppearing act. It was and a:focus, a:active (ie does not recognize) problem. Now my white text (links) throughout the site has turned purple and I can't figure that out where it is reading that from. Any suggestions? Thanks!

Similar Messages

  • Spry horizontal menu - IE6 issue with drop downs not displaying correctly

    Hello everyone,
    I have an IE6 display issue with a spry horizontal menu on a website I recently developed and hope someone can help me sort it out.
    You can see the live site here: www.callumstrust.org
    This is a site for a new charity so obviously I'm very keen to get it sorted out as soon as I can. The easiest way to view the problem is to either view it in IE6, or view it IE8, turn on the Developer Tools and change the Document Mode to 'Quirks mode'. you'll immediately see that the sub-menus on the header menu display permanently as a full width list, and not as a drop down menu as they should.
    I think the problem lies with the 'width' being set to 'auto' in the ul.MenuBarHorizontal li style. However, I can't seem to get the style right to display the menu on a single line with enough space for text of all the menu items.
    Can anyone advise on how to sort this out? I've not posted any code here: let me know if you need this and I'll happily post it.
    Many thanks,
    chris.

    Hello everyone,
    I have an IE6 display issue with a spry horizontal menu on a website I recently developed and hope someone can help me sort it out.
    You can see the live site here: www.callumstrust.org
    This is a site for a new charity so obviously I'm very keen to get it sorted out as soon as I can. The easiest way to view the problem is to either view it in IE6, or view it IE8, turn on the Developer Tools and change the Document Mode to 'Quirks mode'. you'll immediately see that the sub-menus on the header menu display permanently as a full width list, and not as a drop down menu as they should.
    I think the problem lies with the 'width' being set to 'auto' in the ul.MenuBarHorizontal li style. However, I can't seem to get the style right to display the menu on a single line with enough space for text of all the menu items.
    Can anyone advise on how to sort this out? I've not posted any code here: let me know if you need this and I'll happily post it.
    Many thanks,
    chris.

  • Spry Horizontal Menu List Items crash IE6 browser

    ****Update*****
    Apparently, it was width:100%; set on each hover over
    background color for the list items in our default stylesheet that
    was causing IE6 to crash.
    Menus are in working order in all browsers now!
    We have integrated the Spry Horizontal Menu with a website,
    and added custom styling to SpryMenuBarHorizontal.css. The menu
    works in Mozilla, Safari, and IE7. However, in IE6, after hovering
    over the navigation, the drop down menu appears, but, as soon as
    you move your mouse into the drop down to select an item from the
    list, IE6 crashes. Every time. Various Computers.
    We have tried reverting to the original
    SpryMenuBarHorizontal.css file, however, the same problem occurs.
    We haven't made any changes to the original js file
    (SpryMenuBar.js).
    Has anyone ever experienced this issue?
    Here is our customized CSS:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
    1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    LAYOUT INFORMATION: describes box model, positioning,
    z-order
    img#nfl {
    background-image:url(/Images/slices/nfl.png);
    background-repeat:no-repeat;
    height:14px;
    width:40px;
    margin:7px auto auto 25px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/nfl.png");
    _background-repeat:no-repeat;
    _background-image:none;
    img#mlb {
    background-image:url(/Images/slices/mlb.png);
    background-repeat:no-repeat;
    height:14px;
    width:43px;
    margin:7px 20px auto auto;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/mlb.png");
    _background-repeat:no-repeat;
    _background-image:none;
    img#milb {
    background-image:url(/Images/slices/milb.png);
    background-repeat:no-repeat;
    height:14px;
    width:112px;
    margin:7px auto auto auto;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/milb.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto -10px;
    img#ctown {
    background-image:url(/Images/slices/ctown.png);
    background-repeat:no-repeat;
    height:14px;
    width:114px;
    margin:7px auto auto 50px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/ctown.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto 40px;
    img#nba {
    background-image:url(/Images/slices/nba.png);
    background-repeat:no-repeat;
    height:14px;
    width:43px;
    margin:7px auto auto 100px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/nba.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto 70px;
    img#nhl {
    background-image:url(/Images/slices/nhl.png);
    background-repeat:no-repeat;
    height:14px;
    width:41px;
    margin:7px auto auto 90px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/nhl.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:margin:7px auto auto 100px;
    img#ncaa {
    background-image:url(/Images/slices/ncaa.png);
    background-repeat:no-repeat;
    height:14px;
    width:52px;
    margin:7px auto auto 70px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/ncaa.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto 60px;
    /* The outermost container of the Menu Bar, an auto width box
    with no margin or padding */
    ul.MenuBarHorizontal
    list-style-type: none;
    cursor: default;
    width:950px;
    height:32px;
    background-image:url(/Images/slices/primaryNavSlice.png);
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
    vertical-align:middle;
    border-bottom:1px solid #000;
    /* 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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
    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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    /*width: 8.2em;*/
    width:auto;
    position: absolute;
    left: -1000em; /* without this all menus are visible without
    hover */
    /* 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; /* without this menus don't show up */
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    /*width: 8.2em;*/
    width:auto;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.15em 0.15em;
    text-decoration: none;
    ul#teamsMenu table#teams {
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size:11px;
    width:500px;
    background-color:#fff!important;
    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;
    li.ncaa_list #teams.ncaa_table {
    position:absolute;
    left:-590px;
    top:7px;
    To center the tables in the screen
    li.nfl_list #teams.nfl_table {
    position:absolute;
    top:7px;
    li.mlb_list #teams.mlb_table {
    position:absolute;
    top:7px;
    li.milb_list #teams.milb_table {
    position:absolute;
    left:-80px;
    top:7px;
    li.ctown_list #teams.ctown_table {
    position:absolute;
    top:7px;
    li.nba_list #teams.nba_table {
    position:absolute;
    left:-200px;
    top:7px;
    li.nhl_list #teams.nhl_table {
    position:absolute;
    left:-190px;
    top:7px;
    li.ncaa_list #teams.ncaa_table {
    position:absolute;
    left:-590px;
    top:7px;
    }

    I am having the same problems in IE7. I'm using the latest
    version of everything (Spry 1.6.1 and javascript file version 0.12)
    and at first I was having the problem on my drop down menus
    appearing horizontal with all the correct styles but when I changed
    the rule ul.MenuBarHorizontal ul to position: relative; the drop
    downs appear vertical now but I have no beige border around the
    whole ul anymore and I'm getting white space inbetween list items.
    http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
    so if anyone has any advice I'd much appreciate it. Also i'm
    using 1px width on my borders no decimals.

  • Nube needs help inserting a JQuery horizontal menu bar into my site-help.

    Please forgive the ignorance of my questions but I am new to Mobile site design and Dreamweaver.
    I am trying to build a responsive web site for my company that can be viewed on multiple platforms, but am having trouble inserting a responsive menu and responsive slide show.
    This post is in regard to the  menu bar, which I have created using JQuery on a seperate page. I have managed to get the layout to work but still can't figure out how to create mouse overs for the links
    or how to insert it into my site. 
    Please help.
    Why can't I see the nav bar in the site when I paste in?
    All I see is the text and no images. I know I am pasting the code in the wrong place.
    Where do I insert it?
    Below is the code for the site and below that is the code for the menu bar.
    Where do I insert it? Help.
    Thank you in advance for any help you can provide.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="css/master.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="LayoutDiv1">
        <div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
      </div>
      <div id="navbar">ul#navlist { font-family: <span class="navfont">sans-serif</span>; }
    ul#navlist a
    font-weight: bold;
    text-decoration: none;
    ul#navlist, ul#navlist ul, ul#navlist li
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    ul#navlist li { float: left; }
    ul#navlist li a
    color: #ffffff;
    background-color: #<span class="navmainbg">003366</span>;
    padding: 3px;
    border: 1px #ffffff outset;
    ul#navlist li a:hover
    color: #ffff00;
    background-color: #<span class="submenubg">003366</span>;
    ul#navlist li a:active
    color: #cccccc;
    background-color: #003366;
    border: 1px #ffffff inset;
    ul#subnavlist { display: none; }
    ul#subnavlist li { float: none; }
    ul#subnavlist li a
    padding: 0px;
    margin: 0px;
    ul#navlist li:hover ul#subnavlist
    display: block;
    position: absolute;
    font-size: 8pt;
    padding-top: 5px;
    ul#navlist li:hover ul#subnavlist li a
    display: block;
    width: 10em;
    border: none;
    padding: 2px;
    ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
    Read more: How to Make a Rollover Drop-Down Menu | eHow http://www.ehow.com/how_8569816_make-rollover-dropdown-menu.html#ixzz2WZQ3IDmU</div>
      <div id="slideshow">
      <div id="slideshow">
        <div align="center">
          <!-- Begin DWUser_EasyRotator -->
    <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
    <div class="dwuserEasyRotator" style="width: 1225px; height: 400px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, randomize:true, autoplayDelay:3000, autoplayStopOnInteraction:false, autoplayPauseOnHover:false, audio_controllerLocation:'br', lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-77-97-99-50-47-68-111-99-117-109-1 01-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-11 2-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-erName="slideshow rotator" data-erTID="{hg3ysjwkx61418058007631}">
              <div data-ertype="content" style="display: none;"><ul data-erlabel=>
              <li>
                        <img class="main" src="_images/Site Objects/fades how/lrg_images/image09-turn.png" />
                        <img class="thumb" src="_images/Site Objects/fadess how/lrg_images/image09-turn.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/fades how/lrg_images/image08-ss.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image08-ss.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
              </li>
              <li>
                        <img class="main" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
                        <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
              </li>
    </ul>
    </div>
              <div data-ertype="layout" data-ertemplateName="NONE" style="">                              <div class="erdots" style="overflow: hidden; margin: 0; position:absolute;right:0;top:9px;width:300px; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans', Arial, _sans; color: #FFF;" data-erConfig="{showText:false}" align="center">
                                            <div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left"> <!-- modify the float on this element to make left/right/none=center aligned. -->
                                                      <span class="erdots_btn_selected" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: default; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
                                                      </span>
                                                      <span class="erdots_btn_normal" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_35.png) top left no-repeat;">
                                                      </span>
                                                      <span class="erdots_btn_hover" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
                                                      </span>
                                            </div>
                                  </div>
                                  <div class="ercats erFixCSS3" style="position:absolute; left:0; right: 320px; top: 0;" style_real="padding: 4px 8px; font-family: 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, _sans; font-size: 11px; color: #333; wasmargin: 0 50px 10px 50px; wasborder-radius: 6px; wasbackground-color: #EEE; wasborder: 1px solid #E0E0E0; overflow: hidden;">
                                            <div align="center">
                                              <!-- <div style="float: left; padding: 6px 18px 3px 0; font-weight: bold;">Title text!</div> -->
                                    </div>
                                            <div class="ercats_btn_selected erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; background-color: #FFF; box-shadow: 0 0 2px #999; wasborder: 1px solid #CFCFCF; color: #555; margin: 3px 9px 3px 0; cursor: default;">
                                              <div align="center">Title1 </div>
                                      </div>
                                            <div class="ercats_btn_normal erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; color: #666; cursor: pointer; margin: 3px 9px 3px 0;">
                                              <div align="center">Title2 </div>
                                            </div>
                                  </div>
                                  <div class="erimgMain" style="position: absolute; left:0; right:0; top:40px; bottom:0;" data-erConfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
                                            <div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
                                                      <div class="erimgMain_slide">
                                                                <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
                                                      </div>
                                    </div>
                                            <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
                                            <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
                        </div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
                                  This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
                                  <br /><br />
                Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds.
                                  <br /><br />
                                  <a style="color:#FFF;" href="#" class="erabout_ok">OK</a>  
                        </div>
                        <noscript>
                                  Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com.  Please enable JavaScript to view.
                        </noscript>
                        <script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
              </div>
    </div>
    <!-- End DWUser_EasyRotator -->
          <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
        </div>
    <!-- End DWUser_EasyRotator --></div>
      </div>
      <div id="body">
        <div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
      </div>
      <div id="footer">
        <div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
      </div> 
    </div>
    </body>
    </html>
    Below is the code for the JQuery menu with sub and secondary sub menus:
    <!DOCTYPE html><!--[if IE 7]>
    <html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
    <html lang="en" class="ie8 oldie"></html><![endif]-->
    <!-- [if gt IE 8] <!-->
    <html lang="en">
      <!-- <![endif]-->
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>FlexNav - Flexible, Device Agnostic Navigation</title>
        <link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
        <link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
        <style type="text/css">
        body,td,th {
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              font-size: 14pt;
        body {
              background-color: #FFF;
        a:link {
              color: #FFFFFF;
              text-decoration: none;
    a:visited {
              color: #FFF;
              text-decoration: none;
        a:hover {
              color: #F00;
              text-decoration: none;
    a:active {
              color: #900;
              text-decoration: none;
        </style>
        <script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
      </head>
      <body bgcolor="#FFFFFF" vlink="#FF0000" alink="#990000" class="home-page">
      <script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
      <script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
        <div class="container">
          <header id="site-header">
            <div class="menu-button">Menu</div>
            <nav>
              <ul data-breakpoint="800" class="flexnav">
                <li><a href="HOME">HOME</a>
                <li><a href="About Us">ABOUT US</a>
                <li><a href="Products">PRODUCTS</a>
                  <ul>
                    <li><a href="Bound Products">Bound Products</a>
                      <ul>
                        <li><a href="Booklets">Booklets</a></li>
                        <li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
                        <li><a href="Newsletters">Newsletters</a></li>
                        <li><a href="Presentation Books">Presentation Books</a></li>
                        <li><a href="Manuals">Manuals</a></li>
                      </ul>
                    </li>
                  <li><a href="Brochures">Brochures</a></li>
                    <li><a href="Business Cards">Business Cards</a></li>
                    <li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
                    <li><a href="Copies">Copies</a></li>
                    <li><a href="Corp. ID">Corporate ID</a></li>
                    <li><a href="Flyers">Flyers</a></li>
                    <li><a href="Forms">Forms</a></li>
                    <li><a href="Menus">Menus</a></li>
                    <li><a href="Photo Collages">Photo Collages</a></li>
                    <li><a href="Photo Enlargements">Photo Enlargements</a></li>
                    <li><a href="Postcards">Postcards</a></li>
                    <li><a href="Rack Cards">Rack Cards</a></li>
                    <li><a href="Wide Format">Wide Format</a>
                      <ul>
                        <li><a href="Banners">Banners</a></li>
                        <li><a href="Posters">Posters</a></li>
                        <li><a href="Signs">Signs</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="Services">SERVICES</a>
                  <ul>
                    <li><a href="Litigation">Litigation Services</a></li>
                    <li><a href="Creative">Creative Services</a></li>
                  </ul>
                </li>
                <li><a href="FAQs">FAQs</a>
                <li><a href="Contact Us">CONTACT US</a>
              </ul>
            </nav>
          </header>
          \ </div>
        <script type="text/javascript">$(".flexnav").flexNav();</script>
    </body>
    </html>

    Ok, I managed to place the menu within the site, but I still don't have a horizontal menu. All I can see is the unordered list. 
    (see below).
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="UTF-8">
    <title>Home Page</title>
    <meta name="view" name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9 />
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="css/master.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
    <style type="text/css">
    img {margin:6px; border:solid 2px #FFF;}
    img:hover  {background: #666;}
    </style>
    <link href="styles/navbar stylesheet new.css" ref="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="LayoutDiv1">
        <div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
      </div>
      <div id="navbar"><script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
      <script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
        <div class="#"
            <div class="menu-button"></div>
            <nav>
              <ul data-breakpoint="800" class="flexnav">
                <li><a href="HOME">HOME</a>
                <li><a href="About Us">ABOUT US</a>
                <li><a href="Products">PRODUCTS</a>
                  <ul>
                    <li><a href="Bound Products">Bound Products</a>
                      <ul>
                        <li><a href="Booklets">Booklets</a></li>
                        <li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
                        <li><a href="Newsletters">Newsletters</a></li>
                        <li><a href="Presentation Books">Presentation Books</a></li>
                        <li><a href="Manuals">Manuals</a></li>
                      </ul>
                    </li>
                  <li><a href="Brochures">Brochures</a></li>
                    <li><a href="Business Cards">Business Cards</a></li>
                    <li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
                    <li><a href="Copies">Copies</a></li>
                    <li><a href="Corp. ID">Corporate ID</a></li>
                    <li><a href="Flyers">Flyers</a></li>
                    <li><a href="Forms">Forms</a></li>
                    <li><a href="Menus">Menus</a></li>
                    <li><a href="Photo Collages">Photo Collages</a></li>
                    <li><a href="Photo Enlargements">Photo Enlargements</a></li>
                    <li><a href="Postcards">Postcards</a></li>
                    <li><a href="Rack Cards">Rack Cards</a></li>
                    <li><a href="Wide Format">Wide Format</a>
                      <ul>
                        <li><a href="Banners">Banners</a></li>
                        <li><a href="Posters">Posters</a></li>
                        <li><a href="Signs">Signs</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="Services">SERVICES</a>
                  <ul>
                    <li><a href="Litigation">Litigation Services</a></li>
                    <li><a href="Creative">Creative Services</a></li>
                  </ul>
                </li>
                <li><a href="FAQs">FAQs</a>
                <li><a href="Contact Us">CONTACT US</a>
              </ul>
            </nav>
          </header>
          </div>
        <script type="text/javascript">$(".flexnav").flexNav();</script>
      </div>
      <div id="body">
        <div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
      </div>
      <div id="footer">
        <div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
      </div> 
    </div>
    </body>
    </html>

  • Spry Horizontal Menu problem in Safari Mac/Windows

    Hello! 
    Has anyone run into a problem using a horizontal spry menu and it showing up corectly in Safari?  The menu is centered but I cannot get the table to center underneath.  I then wrapped the table in a div and center aligned it, after addeding a <br/> (just trying stuff to no avail.)
    Here is a link to a site I am working on.
    http://tesibridal.com/NEW/index.html
    So far I have found it does not work in Safari 3.2.1/Mac & Safari 3.2.2 and gives me a whole new set of spacing problems in Explorer (which I will address all of those next).
    Thank you in advance for your time.
    ~TMC
    P.S. - Here is the CSS for the menu:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    padding: 0;
    list-style-type: none;
    cursor: default;
    width: 55em;
    margin: 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: 11px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        position: relative;
        text-align: center;
        cursor: pointer;
        width: 8em;
        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: 11px;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        z-index: 1020;
        cursor: default;
        width: 10.1em;
        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: 10.1em;
    /* 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:#000000;
        border-style:solid;
        border-width:1px;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #FF0000;
        color: #000000;
        text-decoration: none;
        border:#000000;
        border-style:solid;
        border-width:1px;
        padding-top: 1em;
        padding-right: 0em;
        padding-bottom: 1em;
        padding-left: 0em;
    /* 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: #FF0000;
        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: #FF0000;
        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;
    /* 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: #FF0000;
    Message was edited by: TMCDesign
    Message was edited by: TMCDesign

    Hi clead16,
    What do you mean by "do not load properly in internet
    explorer"? I checked the site in IE6 and IE7 and it the menus
    render OK.
    You may want to also take a look at the
    Menu
    Samples and
    centering
    a horizontal menu
    on Adobe labs.
    -- Florin

  • Spry Horizontal Menu not displayed correctly in Internet Explorer 6

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

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

  • Spry Horizontal Menu Problem / Template

    When I'm editing the multi-level horizontal spry menu in my
    template (which is not an editable region in my documents), if I
    make the mistake of not clicking off the menu bar control panel -
    when I switch over to an html file that is based on that template,
    the menu is open with no ability to close it within the open file.
    I have to go back to the template, make sure I click on an
    editable area (thus having my cursor off the menu altogether), and
    then go back to working in the html file to continue what I was
    doing. This hasn't happened in earlier versions of DW that used
    spry menus.

    Hi clead16,
    What do you mean by "do not load properly in internet
    explorer"? I checked the site in IE6 and IE7 and it the menus
    render OK.
    You may want to also take a look at the
    Menu
    Samples and
    centering
    a horizontal menu
    on Adobe labs.
    -- Florin

  • Spry Horizontal Menu problem in IE

    I am a new Dreamweaver user and utilized the Spry horizontal
    menu in a site that I am redesigning. The menus look great in
    firefox, but do not load properly in internet explorer. I am hoping
    to be able to resolve this problem as the menus look so good in
    firefox.
    You can view the page at
    http://www.greenlevel.abcchicagolimo.com

    Hi clead16,
    What do you mean by "do not load properly in internet
    explorer"? I checked the site in IE6 and IE7 and it the menus
    render OK.
    You may want to also take a look at the
    Menu
    Samples and
    centering
    a horizontal menu
    on Adobe labs.
    -- Florin

  • How can I get a horizontal menu widget to display at 100% width?

    I have created a horizontal menu with uniform spacing and have stretched it out to each side. I can't get the red indicator line to show up on the left side, but it does show on the right. No matter what I do, the menu continues to show up short on the right side of my screen in preview mode.
    Does anyone know how to do this properly? Has anyone else had issues with it?
    Thanks!

    Hi,
    We are aware of this limitation with the Menu and Panel Widgets and hope to address the same in future.
    Thanks,
    Vikas

  • How do I change vertical menu to a horizontal menu in Dreamweaver CS5?

    Doing a website (my first) for a friend of mine. Followed the Adobe tutorial for a lot of it (with Paul Trani) and have everything done but now my friend wants the menu bar to be horizontal instead of vertical. (I have other questions but this is the big one for now) I do have a CSS file that is linked to all 4 pages. I have hunted and searched to no avail. The page started out as a template (2 column fixed, left sidebar, header and footer). I am hoping I just have to paste some code into it and have found a few suggestions on the web but nothing seems to work. I did get it to the point with a list with no bullets  with no background but can't get it to go horizontal. Then code started showing up on my design page and I gave up and turned to this forum. I would hate to start over. I do not even see a template that has a horizontal menu on it for one of the choices. Any help would be greatly appreciated.

    I think you are confused about how to differentiate between horizontal navigation and vertical navigation.
    In HTML, both are exactly the same. You use a list. So both will be just like you describe them:
    <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    </ul>
    Now, there's your navigation. Done. So how do we do an horizontal nav? Well we tell web browsers to format our HTML code in a style sheet, called a Cascading Style Sheet, or CSS. So let's give the <ul> a tag that tells the browser that it's not just a simple unordered list; it's special and has to be set up a certain way:
    <ul id="nav">
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    </ul>
    Now, let's go to our style sheet and create the style for the id "nav." And remember, anything with an ID on a web page must occur only once. If you're going to have several "nav" tags on your page, you have to make a class. The difference (in CSS) between a class and an id is the use of a hash "#" for an id and a dot "." for a class.
    So here's the CSS for the horizontal navigation:
    #nav {
              width: 100%;
              float: left;
              margin: 0 0 3em 0;
              padding: 0;
              list-style: none;
              background-color: #f2f2f2;
              border-bottom: 1px solid #ccc;
              border-top: 1px solid #ccc;
    #nav li {
              float: left;
    #nav li a {
              display: block;
              padding: 8px 15px;
              text-decoration: none;
              font-weight: bold;
              color: #069;
              border-right: 1px solid #ccc;
    #nav li a:hover {
              color: #c00;
              background-color: #fff;
    Here you're floating both the list and the list items left. Floating the list items left is what pulls them into a nice horizontal row, stacking the items from left to right. However, because of how floats behave, the containing list will collapse to a height of zero unless it is also floated left.
    And that wouldn’t be a major problem, except the list has a background color and if the list collapses, that background color won't show. This way, it’ll fill up the entire width of the page (or of its container, if it’s in a container with a width set).
    Additionally, the only margin you see will be the bottom one, so the list items will make their own margins and behave themselves. The list-style is set to “none,” which removes the bullets.
    Now all navigation will certainly be a link, so I style the list items that are links (#nav li a) with padding that will space them out, get rid of the default underline, setting the text decoration to none, making them bold and creating a thin right border. Then I change the color on the nav for a hover.
    Now, vertical is the default for a list.
    Here's the difference:
    You keep list-style: none;
    You get rid of your floats.
    You get rid of the 100% width, unless you have it corralled in a containing div, like a left or right sidebar.
    Boom! you're done.
    -Mark

  • Spry Horizontal Menu Bar not working in IE

    Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
    I appreciate any help I can get with this as I have tried everything I know.
    This is the link to my site: www.digitaldesignsbymargee.com

    Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
    w@charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0px;
        padding: 0px;
        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: 0px;
        padding: 0px;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 14em;
        float: left;
        border-color: white;
        border-left-style: solid;
        border-left-width: 1px;
        border-right-style: none;
        border-right-width: 1px;
    /* 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: 14em;
        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: 14em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: 0 0 0 99%;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 0.9em 0.75em;
        color: white;
        font-size: 14px;
        font-weight: bold;
        font-family: Arial, Helvetica, Verdana, sans-serif;
        text-decoration: none;
        color: white;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 10px 85%;
    /* 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
        b/ackground-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 10px 85%;
    /* 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
        b/ackground-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;
           /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
    ul.MenuBarHorizontal a:visited { color: white;}
    ul ul a { background-color: #436d9c; }
    ul a.MenuBarItemHover { background-color: #19385a; }
    ul .MenuBarItemSubmenu ul li a { border: none; }
    ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
    ul.MenuBarSubmenuVisible li { border: none; }
    I appreciate any help I can get with this as I have tried everything I know.

  • Horizontal Menu Bar Help Needed

    Hi there, I am somewhat new to web design but I've been helping a friend update his business's page recently.  We use Dreamweaver CS3 and our hosting is thru GoDaddy. 
    My problem appears when I try to insert a horizontal menu bar (Insert>Spry>Menu bar) so that a dropdown menu will appear when I hover over an option, much like the top menu on the GoDaddy homepage, among others.  It works correctly when I preview my page in a browser from Dreamweaver, (Firefox, IE) but when I actually upload my page to the GoDaddy servers and view it, it shows up not as a bar with hidden options, but as a long unformatted vertical list. 
    The site in question is here: http://www.notyouraveragebookkeeper.com/indextabs
    I thought it might be a problem with CSS, but I made sure that all of the style sheets are properly uploaded to the servers, and I made sure that my browser accepted any Javascript applets.  I've also tried it with my Dreamweaver CS5 trial.  Like I said, I am an amateur in every sense of the word and I'm still learning technical terms for things so some of my jargon may be a bit flawed.  I have done a good bit of online research in forums and otherwise, and I've tried solutions that have been given to similar problems. Maybe someone could view the source code and find out where I've gone wrong, or suggest tips to identify problems in Dreamweaver. I feel like the problem lies within the Spry framework, but I have very little knowledge on how it works or what it does.
    Any assistance in this regard would be extremely helpful and appreciated.

    Neither SpryMenuBar.js and SpryMenuBarHorizontal.css can be found by your online site.
    Possibly these have not been uploaded or uploaded to a wrong location.
    Gramps

  • Horizontal Menu Bar - Not displaying correctly in Internet Explorer

    My issues are occuring in Internet Explorer 8 and 7, haven't tested earlier versions.
    I am currently using DW CS5, Spry 1.6.1
    The website (not yet complete) is at www3.sympatico.ca/mitchell.richard/
    The menu bar as viewed in Firefox is correct. In Internet Explorer the menu bar is left justified, hides visited links, and lists horizontal menu items in reverse order.
    I work for a Women's Shelter in Canada, as the Information Systems Manager. We don't have the funds to hire someone to build a website and it was decided and I quote "You know computers, you can buld the website". I couldn't get them to understand the analogy that just because a Neurosurgeon can use a scalpel he isn't a Cardiothoracic Surgeon... needless to say, I am floudering on this menu bar. Any help would be greatly appreciated.
    Below is the source for my menubar
    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: 12pt;
        cursor: default;
        width: inherit;
        font: calibri;
        font-family: Calibri;
        font-weight: bold;
        background-color: #4F91CD;
        /* [disabled]height: 27px; */
        /* [disabled]border-bottom: 1px solid #A7C9E5; */
        /* [disabled]border-top: 1px solid #A7C9E5; */
    /* 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
    .em;
        float: right;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #4F91CD;
        padding: 0.2em 0.75em;
        color: #FFF;
        text-decoration: none;
        border-bottom: 1px solid #A7C9E5;
        border-top: 1px solid #A7C9E5;
    /* 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: #A7C9E5;
        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: #A7C9E5;
        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
        /* [disabled]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
        /* [disabled]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
        /* [disabled]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
        /* [disabled]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 ifram=e
        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
      <tr>
        <td colspan="10" class="navbarrepeat"><ul id="navbar" class="MenuBarHorizontal">
          <li><a href="contact_us.html">Contact Us</a>        </li>
          <li><a href="helpful_links.html" class="MenuBarItemSubmenu">Resources</a>
            <ul>
              <li><a href="helpful_links.html">Helpful Links</a></li>
              <li><a href="community_agencies.html">Community Agencies</a></li>
              <li><a href="of_interest.html">Of Interest</a></li>
    </ul>
          </li>
          <li><a href="checklist.html" class="MenuBarItemSubmenu">Safety</a>
            <ul>
              <li><a href="safety_checklist.html">Safety Checklist</a></li>
              <li><a href="things_to_bring.html">Things to Bring</a></li>
              <li><a href="child_safety_plan.html">Child Safety Plan</a></li>
    </ul>
          </li>
          <li><a href="signs.html" class="MenuBarItemSubmenu">Abuse</a>
            <ul>
              <li><a href="what_is_abuse.html">What is Abuse?</a></li>
              <li><a href="signs.html">Signs of Abuse</a></li>
              <li><a href="characteristics.html">Characteristics</a></li>
              <li><a href="why_women_stay.html">Why Women Stay</a></li>
              <li><a href="donate.html">Survivors Speak</a></li>
            </ul>
          </li>
          <li><a href="donate.html" class="MenuBarItemSubmenu">Support Us</a>
            <ul>
              <li><a href="donate.html">Donate</a></li>
              <li><a href="events.html">Events</a></li>
              <li><a href="volunteering.html">Volunteering</a></li>
              <li><a href="statistics.html">Statistics</a></li>
    </ul>
          </li>
          <li><a href="join_us.html">Join Us</a>        </li>
          <li><a href="our_story.html" class="MenuBarItemSubmenu">About Us</a>
            <ul>
              <li><a href="residential.html">Our Services</a></li>
              <li><a href="our_mission.html">Our Mission</a></li>
              <li><a href="our_story.html">Our Story</a></li>
              <li><a href="board_of_directors.html">Board of Directors</a></li>
            </ul>
          </li>
        </ul></td>
        <td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
      </tr>

    /* 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
    .em;
         float: right;
    The red coloured line causes your menu to be displayed the wrong way round in FF. IE shows the menu as you have listed it with Contact Us as the first item.
    Advice:
    change the float to left so that the listed items start on the left hand side
    change the listed items in the order that you want them to appear.

  • Horizontal menu bar mac to pc

    Recently created this page:   http://musicnotes.net/MNI/SPRY.html using Dreamweaver CS3 but it does not look the same in all browsers.
    It starts out with the table width set for 100% and then hard sets the
    column widths to force the complete heading to something like 1600 pixels
    wide.  The cell widths should be allowed to set themselves.
    In IE 6.0, and probably IE 7.0, the mouse over point to change colors is a
    narrow strip between the links.  Results in white flashes as you move down.
    In IE 8.0, which is now similar to FireFox, the mouseover color changes work
    okay but the secondary panels overlap the primary column.  It's workable but
    doesn't look quite right.
    Except for being forced super wide and too big, everything seems to work
    okay in Firefox.
    Does anyone know if these issues are resolved using CS4.

    Thanks Gramps, will take a look and get sorted!
    Date: Mon, 14 Feb 2011 19:00:03 -0700
    From: [email protected]
    To: [email protected]
    Subject: I am having problems with my spry horizontal menu bar defaulting to the top of page in IE
    The structure of your document needs fixing. You will be able to get a lot of information from here http://www.adobe.com/devnet/dreamweaver/css.html
    After you have fixed the structure start with a fresh copy of SpryMenuBar. Read this before making any changes http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
    Gramps
    >

  • Another SPRY horizontal menu problem with IE7

    I posted this before, with no responses, but I think
    I've narrowed it down to a CSS response problem with IE7.0. If you
    view the attached link in Firefox or Opera, the menu background
    color responds correctly on the drop downs. In IE7, the
    background-color is ignored, causing the menu to be translucent
    and, uh, ugly. Has anyone else had an issue with the
    background-color CSS attribute in the SPRY horizontal menu css not
    working?
    HELLLLLP! and, uh, Thanks,
    Karl
    Prototype
    link using spry, css, ajax sprites and other magic.

    >>
    Regrettably, the silence from the forum has been deafening.
    I'm not sure if folks are just wary of SPRY and AJAX issues right
    now because they're so new or if it's the summer heat
    >>
    guess it´s all of that :-) But folks visiting these more
    "general" Dreamweaver forums are not necessarily Spry experts
    respectively might not even be interested in that -- you´ll
    certainly get more response when posting Spry related questions in
    the
    Spry
    forums @ Adobe Labs

Maybe you are looking for