Spry Horizontal Submenu Bar Issues in IE6

Hey there,
I've been struggling with this issue for a while now, and I was hoping that I might be able to get a little help from the community to resolve it. I've built a site which looks absolutely fine in all browsers except for Internet Explorer 6. In IE6, the sub menu bars jump around all over the place for no apparent reason, and I can't figure out why... The site in question is www.flexyoffice.co.uk.
Now, in most browsers, the submenu appears above the menu bar. This was my intention. Unfortunately, in IE6, if you hover over a menu item containing a sub menu, the submenu will either appear over the menu item, below the menu item, or next to the menu item. Additionally, once you try to actually hover over the sub menu, the sub menu itself moves, leaving the user to chase the submenu around the page in pursuit... Not ideal...! Looking at the page in IE 6, it almost seems as if the submenu opens up to the right of the menu bar, which results in everything else being thrown out. I could be wrong though.
I'm relatively new to these forums, so if there is any specific information which I can provide which would possibly help to identify the issue, please do let me know. If there are any suggestions out there that are worth giving a go, I would really appreciate any thoughts that you may have.
Thanks very much guys,
Chris

Hi Chris,
I tried your page in IE6 and it crashed the browser! To be honest, most people should have upgraded from IE6 ages ago, I was redirected to MS website to upgrade the second time I started the browser.
As I couldn't even get the page to load, I can't suggest what could be wrong.
One thing I did notice wrong that made your menus appear jumpy at first was that you are not preloading the images needed to display the menu bars.
you have the Javascript function in the correct place - function MM_preloadImages() {
But you have not selected to preload any images in the body tag.
Should look something like this -
<body onload="MM_preloadImages('images/buttons/contactOver.gif','images/buttons/aboutOver.gif', 'images/buttons/loginOver.gif','images/buttons/case_studiesOver.gif','images/buttons/newsO ver.gif','images/buttons/fundingOver.gif','images/buttons/eventsOver.gif','images/buttons/ homeOver.gif')">
These are obviously not the images you want to preload (taken from one of my sites), replace the images with the images used in your menu and your menu will operate much smoother as the images will be ready to use.
Hope this helps (a little!)
Chris

Similar Messages

Spry Horizontal Submenu Bar Problem in Internet Explorer

I follow all the directions for adding a Horizontal Spry Menu Bar and the submeanu keeps dropping in the upper left
corner of the browser in Internet Explorer. Please help to fix this problem. It looks great in all other browsers, but not
in Internet Explorer.
I have the width for the parent menu and the child menu equal at 132 px.

Thanks For Your Reply.
I finally got the spry menu to act right. How, I don't know??? Trail and error. Trail and error. I prefer to know what I am doing. So any help would be appreciated. The menu look good in Mozilla, but ust okay in Internet Explorer. My website is www.theexecutivevip.com and here is the code that now says is causing an "expanding box" problem. I have adjusted the ul, li, etc. and it is still a problem. Help please. Thanks again.
<ul id="MenuBar1" class="MenuBarVertical MenuBarActive">
          <li><a href="index.html" class="">Home</a>          </li>
          <li><a href="aboutus.html" class="">Extend Your Brand</a></li>
          <li><a class="MenuBarItemSubmenu MenuBarItemSubmenuHover" href="#">For The VIP</a>
            <ul class="MenuBarSubmenuVisible">
              <li><a href="wine.hrml" class="">The Wine Connoisseur</a>              </li>
              <li><a href="confections.html" class="">Gourmet Confections</a></li>
              <li><a href="ipad.html">Made For iPad/iPhone</a></li>
              <li><a href="laptopacc.html">Laptop Accessories</a></li>
              <li><a href="clocks.html">Clocks</a></li>
              <li><a href="timepieces.html">Fine Timepieces</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Bags & Luggage</a>
            <ul class="">
              <li><a href="checkpointbags.html" class="">Checkpoint Laptop Bags</a></li>
              <li><a href="luggage.html">Business Luggage</a></li>
              <li><a href="ladytraveler.html">The Lady Traveler</a></li>
              <li><a href="travelacc.html">Travel Accessories</a></li>
              <li><a href="golf.html">The Golf Enthusiast</a></li>
              <li><a href="organifitness.html">Organization & Fitness</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Brand Promotion</a>
            <ul class="">
              <li><a href="promotional.html">Promotional Products</a></li>
              <li><a href="writing.html">Writing Instruments</a></li>
              <li><a href="drinkware.html">Drinkware</a></li>
            </ul>
          </li>
          <li><a href="purchase.html" class="">How To Purchase</a></li>
          <li><a href="contact.html" class="">Contact Us</a></li>
        </ul>

Spry Horizontal Submenu IE bug

The Spry Horizontal submenu bar does not display correctly in
Internet Explorer. Everything appears to be working correctly in
Firefox.
The Submenu on the navigation bar keep dropping down from the
top of the browser window instead from it's corresponding parent
menu bar.
I've updated my Spry files to the latest versions, from
Adobe's site. Since the submenu works correctly in Firefox, it
makes me think this is a bug correction, not something wrong with
the css.
Do you have any suggestions on how to correct this? I've seen
this question asked alot on other Dreamweaver forums.
Thank you!!!!!!!!

***SOLVED***
Hi There,
Cheers for replying. I took a look and the labs one seemed to
work correctly. From here, under the CSS Styles tab I selected the
SpryMenuBarHorizontal.css group and deleted them all. I then
cleaned out my code of the references to the menu and reinsterted
the menu (I had this problem before updating to Version 1.6.1 from
1.4).
From my own error here I would suggest justice49 deletes the
menu completely (backup first) and reinserts his/her menu. from
here, each time a change is made, preview the menu to make sure the
change doesn't break the menu. this worked for me. Also check that
your spry menu is at V1.6.1. There is a forum entry about updating
if necessary:
UPDATING
SPRY
Hope this helps.

Spry Horizontal Menu bar - submenu position

I'm new to spry so apologies in advance if this has been
posted before.......
I'm putting together a new site using the spry horizontal
menu bar - I've managed to put together a CSS format which works
well in both FireFox and IE7 EXCEPT for the position of the
sub-menus below the main menu bar. IE7 seems to position the sub
menu relative to the top right corner of the parent menu item.
Firefox seems to position it relative to the bottom left corner -
and I can't find a solution which works for both browsers. Any
ideas?

You must have fixed it in the meantime as I see no problem.
Gramps

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.

Spry Vertical Submenu Bar Appears Behind iFrame

In IE and Chrome, the Spry vertical submenu bar appears properly on every page of the website, except for the one page that has iframes.
In IE, the submenus appear behind the iFrames
In Chrome, the submenus appear in front of the iFrames but with an incomplete border
In Firefox and Safari, the submenus appear as they should (in front of the iframes and with a complete border)
I've scoured this forum and tried several fixes that seemed to work for others with slightly different conditions but didn't work for mine.
I've included my SpryMenuBarVertical.css for referece; if you can offer a fix for this particular issue, I'd be forever grateful. Thank you!
—Lisa
@charset "UTF-8"; /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT: box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed-width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-sty le-type: none; font-size: 100%; cursor: default; width: 245px; } /* 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 are same fixed width as parent; position children relative to this container */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 245px; } /* Submenus are initially off the left side of the screen (-1000em) and then, on hover, appear slightly overlapping to the right and up with a higher z-index */ ul.MenuBarVertical ul { margin: -5% 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 12em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 12em; } /******************************************************************************* DESIGN: color scheme, borders, fonts *******************************************************************************/ /* Outermost menu containers have no borders */ ul.MenuBarVertical { border-bottom: 0px solid Gray; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { border: 1px solid Gray; } /* Menu items are a mustard yellow block with padding and no text decoration */ ul.MenuBarVertical a { display: block; cursor: pointer; background-color: #E6DC8F; padding: 0.5em 1em; color: #333; text-decoration: none; border-top: 0px solid Gray; } /* Menu items that have hover or focus display with a dark green background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #275936; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a dark green background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #275936; color: #FFF; } /* Active top-level menu items display a branch */ body#home a#homeNav, body#forsale a#forsaleNav, body#clubhouse a#clubhouseNav, body#falmouth a#aboutfalmouthNav, body#faqs a#faqNav, body#directions a#directionsNav, body#calendar a#calendarNav, body#partners a#partnersNav { background-image: url(NavBranch.gif); background-repeat: no-repeat; color: #FFF; padding-left: 50px; } /* Active top-level menu items with a submenu display a branch and a white arrow */ body#aboutridgewood a#aboutridgewoodNav, body#floorplans a#floorplansNav, body#contactrealtors a#contactNav, body#videos a#videosNav { background-image: url(NavBranchArrowWhite.png); background-repeat: no-repeat; background-color: #275936; color: #FFF; padding-left: 50px; } /******************************************************************************* 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 use a green background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(NavArrowGreen.gif); background-repeat: no-repeat; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and use a white background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(NavArrowWhite.gif); background-repeat: no-repeat; } /* Current menu items that have a submenu display a branch graphic to the left and a white arrow to the right */ body#story a#aboutridgewoodNav, body#story a#storyNav, body#neighborhood a#aboutridgewoodNav, body#neighborhood a#neighborhoodNav, body#structure a#aboutridgewoodNav, body#structure a#structureNav, body#green a#aboutridgewoodNav, body#green a#greenNav, body#maplewood a#floorplansNav, body#maplewood a#maplewoodNav, body#birchwood a#floorplansNav, body#birchwood a#birchwoodNav, body#sprucewood a#floorplansNav, body#sprucewood a#sprucewoodNav, body#aspenwood a#floorplansNav, body#aspenwood a#aspenwoodNav, body#cedarwood a#floorplansNav, body#cedarwood a#cedarwoodNav, body#oakwood a#floorplansNav, body#oakwood a#oakwoodNav, body#contactrealtors a#contactNav, body#contactrealtors a#contactrealtorsNav, body#lenders a#contactNav, body#lenders a#contactlendersNav, body#owners a#contactNav, body#owners a#contactownersNav, body#videoOverview a#videosNav, body#videoOverview a#videoOverviewNav, body#videoTour a#videosNav, body#videoTour a#videoTourNav, body#videoLender a#videosNav, body#videoLender a#videoLenderNav { background-image: url(NavBranchArrowWhite.png); background-repeat: no-repeat; background-position: -1% 50%; background-color: #275936; color: #FFF; padding-left: 50px; } /******************************************************************************* 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } }

Long answer = z-index
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Nancy O.

SPRY Horizontal Submenu Appearing in Top Left in IE

Hi -
I've read through almost every post relating to SPRY
Horizontal Submenu issues in IE - and have done a number of things
- including upgrading to 1.6. However - nothing seems to work and
I'm at wits end. Can someone please help? The page to reference is:
www.bswiftdesign.com/millennium/claimants/index.html
The drop down menu is under "Structured Settlements". I
really appreciate anyones help!

Hi bswiftdesign,
It looks like you are trying to center menu items in the
menubar and submenus. Have you seen these samples?
http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml
--== Kin ==--

*Help* Spry Horizontal Menu Bar wont show and cant seem to center it with rest of content

Hey,
I am a newbie to Dreamweaver and was wondering if someone can
help me with the Spry Horizontal Menu Bar....
http://www.djdanmatthews.net
1) After moving mouse over diffrent areas of Spry menu bar
the text seems to disapear or not show up?
2) I can't seem to center content of Spry menu bar with rest
of website?
3) How do I ad a image (where also can I get it) to the Spry
menu bar so it looks more professional &3d?
Thanks so much,
Dan

*Bump

Spry Horizontal Nav Bar not working in IE7

I'm currently working on a website for South Jersey MOM
Magazine (www.southjerseymom.com). The header layer contains a
graphic and a Spry horizontal menu bar for navigation. The
navigation works properly in Firefox. However, when I go to open up
the page in IE, it originally shows the navigation bar, along with
a Information Bar menu asking if I want to allow active script to
run. When I click "yes" to allow the content, then the bar
disappears and doesn't work. Any suggestions?

I'm currently working on a website for South Jersey MOM
Magazine (www.southjerseymom.com). The header layer contains a
graphic and a Spry horizontal menu bar for navigation. The
navigation works properly in Firefox. However, when I go to open up
the page in IE, it originally shows the navigation bar, along with
a Information Bar menu asking if I want to allow active script to
run. When I click "yes" to allow the content, then the bar
disappears and doesn't work. Any suggestions?

Spry Horizontal Menu Bar in IE

Hello,
I had looked at the forums for a possible solution to this, and none of the answers I have found work for me. I have a spry horizontal menu bar with a background image. It works in Safari, Chrome, and Firefox but on IE the background image does not show. There is only a white background. I have changed ul.MenuBarHorizontal li.MenuBarItemIE to have a background image but it still doesn't show in IE.
This is the website: fwmedpeds.net
I am very new to this and any help is appreciated.

If you go to your online SpryMenuBarHorizontal.css which can be found here http://fwmedpeds.net/SpryAssets/SpryMenuBarHorizontal.css, you will see the last few lines as I have previously quoted.
You will also see what Ken Binney has said
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
/* 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: #000;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
font-weight: bold;
Gramps

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.

Spry Horizontal submenu hidden behind image

This is driving me nuts. I am using Dreamweaver CS4. I have created a horizontal menu bar just above an image. When i hover over the main menu item the submenu is hidden behind the image. I have not been able to figure this one outy. i am very new to CSS and Dreamweaver. This is a template that i want to use across my entire site. You can goto http://www.gray-wolf.net/MainPages.html.
@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: auto;
width: 800px;
font-family: Arial, Helvetica, sans-serif;
background-color: #008080;
height: 40px;
float: left;
top: 100px
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* 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: 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: #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;
width: auto;
/* 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;

Your unexpected (and undesired) wolf call on entering that page scared the begesus outta me. Most people don't take kindly to such surprises!
You do realize that the page you linked to is a TEMPLATE page, but it is named with an HTML extension, right? You did that just to show us the template?
Also, it appears that you have built your entire site inside of the Templates folder -
<a href="Templates/pgpage1.htm" title="Page 1 of my Photo Gallery">
That's improper. Nothing should be in the Templates folder other than the template files themselves.
Finally, your use of absolute positioning as a primary page layout method is going to get you into serious trouble. Please read this -
http://apptools.com/examples/pagelayout101.php
Now - here's the problem:
You have applied a style of 'overflow:hidden' to div#nav. Remove that. With that in place, the submenus cannot flow OUT of div#nav.

CS3 Fix for Spry Horizontal Menu bar/drop boxes positioning bug in IE?

I have searched threads to see if there is an "easy" solution for the incorrect positioning of horizontal menu bar drop boxes in IE browser older versions(mine showed up at the top of the screen and mysteriously included the word "false" in older IE ONLY). Is there a downloadable patch or quick fix for this problem at this point in time? I saw an available download for a newer version of Spry but seems like overkill for this small issue. I am not an experienced web designer or computer geek, but can follow specific directions I am given. The horz bar with drop boxes showed correctly in Firefox and other browsers but not in older(?) IE. For now, I've simply removed the drop boxes to make the page look respectable, but boy did it look good with those boxes. I am hoping somebody can talk to me without lots of teckkie terms. Though I appreciate and love all of you tecs out there.

You really should install the Spry update as it fixes some IE issues that the earlier versions of Spry had. Then use the Dreamweaver Command menu to update your Spry files within your site and you should have the latest and be ready to go. If you're still having issues you may want to also check out the Spry forum: http://forums.adobe.com/community/labs/spry
Let us know if the update doesn't solve your particular problem.

Spry horizontal submenu does not hide in IE

My spry horizontal submenus stay displayed in IE. What should
I do.
I am using vista with DW cs3.
James

Without seeing what has been changed it is hard to say. One
suggestion I can make without seeing the code is to make sure your
Spry is up-to-date. To find out your current Spry version, look at
the SpryMenuBarHorizontal.css file in the SpryAssets folder. At the
top it will say "SpryMenuBarHorizontal.css - version 0.# - Spry
Pre-Release 1.#.#"
If you are not running version 0.6; Pre-release 1.6.1 then
you are not using the latest version. If this is the case head to
the site below which is the official Spry website. There you will
find a link to the official Spry forums as well as the Spry updater
package. Inside this package is a bunch of samples, demos and an
Extension. Install the extension and then re-start DW. Once
restarted, under the Sites menu you will see a new option to Update
Spry. Click on this and your Spry will be updated to the latest
version.
If you are still having issues after doing this you will need
to post either a link to your page or the code from your page so we
can see what you have modified to the Spry script.

Spry Horizontal Menu Bar width problem in IE and Safari

Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

Spry Horizontal Submenu Bar Issues in IE6

Similar Messages

Maybe you are looking for