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.

Similar Messages

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 ==--

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 Submenu Positioning

I created a spry horizontal menu. my submenus are positioned
differently depending on if it is viewed in IE or Firefox. is this
normal and is there a fix?
edit: what i wanted was my horizontal menu to stretch accross
my entire page so i changed the default width of the menus from
8.2ems to 12.5ems. that is when the display position went all
screwy on me. the only way to change the position was to edit the
ul.MenuBarHorizontal.ul ul margin values. no matter what i try the
submenus position is different between browsers.

Normally the submenus should be positioned the same way in
both IE and Firefox.
I don't think that the solution you tried (extending the
width of the submenus) will do what you want - extending the menu
to the page width.
It is better to take a look first at these
samples
If you still have problems, please provide an URL with a
sample page, what are you exactly trying to do, and on what browser
versions have you tested.

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.

Spry Horizontal Submenu behind DIV in IE

Having problems in IE with this
menu
The menu is is an AP div, and the div that is blocking the
submenu is position: relative; The Z-index is set that this
shouldn't happen. Any help from the community would be greatly
appreciated.
Site
Styles
Menu
Styles

I'm having a similar issue in IE7 in that my
Spry submenus drop down behind the tabs in
the Spry tabbed panels div I created following my navigation div. Any help out there?
Thanks!

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>

The spry horizontal submenu appear on top of screen in IE

why is it that in IE the spry submenu is opened on the top of the screen and not below the menu and how can this be fixed...i have used dreamweaver CS3 and found this to be a major issue but cannot find an answer to it?

In its original form, that is straight out of the box and
unadulterated, the SpryMenuBar is a very well behaved animal. It is
only when a budding web developer starts to mistreat it, it will rear
its ugly head.
So
the answer to YOUR major issue is kill this version of SpryMenuBar off
and start again with a new version. This time make your changes where
you can can see them and keep track of them, meanwhile testing your
markup in your favourite (IE) browser at each step.
I hope this helps.
Ben
Yes I did... but not without your help! Thank you for looking and your response! I did exactly what you said and then some.
I created a new directory with a test html and a new SpryMenuBar and SpryAssets sub-directory. Then I opened up the original version of the SpryMenuBarHorizontal.css file and began to compare it side by side with my already customized SpryMenuBarHorizontal.css by cascading the two windows vertically within DW-CS3... got that idea here I think too...
This way I could see my mistakes and eventually "fix" what went wrong.
One thing extra I had to do was add a new property ( min-height: 30px; ) to the "... a" rule that accommodated for IE7 and down as well as IE8 "Compatibility View" (which was forcing itself to run when I visited my site ???)... the change I added kept my block display from becoming too low and allowing an unwanted transparency in the list between "Items". That's the best I can describe it... ...here is the example below.ul.MenuBarHorizontal a
    display: block;
    cursor: default;
    background-color: #EEE;
    color: #006699;
    text-decoration: none;
    line-height: 30px;
    text-indent: 10px;
    font-weight: bold;
    min-height: 30px;
I don't know exactly where I went wrong but thanks to Ben's previous reply, I was able to put the puzzle back together again... no sweat !
Thank you Ben, Adobe DW and Spry !!!

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

Spry horizontal menu: submenu background problem in IE7

Hello,
I am using the Spry horizontal menu in this website: http://www.isis-papyrus.com
It works perfectly on all current version browsers, but in IE7 the white submenu background only shows behind the actual text for each link and not to the border of the submenu box.
I modified the css to allow for dynamic sizing for each submenu (see below).
Any suggestions would be greatly appreciated.
Best, Oliver
@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: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
    float: none;
background-color: transparent;
    color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* 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: #fff;
color: #339999;
/* 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: #339999;
color: #fff;
/* 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;

Thank you so much for your quick answer Beth!
You solved half my problem!
I added the bg-color to the li and ul styles of the submenus (css below) and now the white background shows correctly in IE7.
The only thing I still would like to resolve: The hover style for the menu items (inverse bg and text colors) only works for the actual text of the link and not for the entire width of the submenu box.
Any suggestions?
Thank you again.
Best, Oliver
@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: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
    float: none;
background-color: #fff;
     color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
background-color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* 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: #fff;
color: #339999;
/* 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: #339999;
color: #fff;
/* 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;

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.

Background images with spry "horizontal menu"

hi again
I am trying to work with the spry: "horizontal menu"
I want to put some background images into the menu bar not into the submenu
and that is the problem: the background images appears overall
what can I do ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
    <ul>
      <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
      <li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and css
ul.MenuBarHorizontal
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
     z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: center;
     cursor: pointer;
     width: 100px;
     float: left;
     height: 10px;
/* 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: 100px;
     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: 100px;
     height: 30px;
/* 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: #FEF3E4;
     padding: 0.5em 0.75em;
     color: #FFF;
     text-decoration: none;
     background-repeat: no-repeat;
     background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
     color: #FF0;
/* 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: #FEF3E4;
     color: #FF0;
     background-image: url(../rot.jpg);
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-color: #FEF3E4;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
     color: #FF0;
/* 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-color: #F99;
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;

Complete page and css code below (scroll down)
All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
/* 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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
Here is the code and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<style type="text/css">

</style>
<style>
ul.MenuBarHorizontal
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
     z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: center;
     cursor: pointer;
     width: 100px;
     float: left;
     height: 10px;
/* 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: 100px;
     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: 100px;
     height: 30px;
/* 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: #FEF3E4;
     padding: 0.5em 0.75em;
     color: #FFF;
     text-decoration: none;
     background-repeat: no-repeat;
     background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
     color: #FF0;
/* 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: #FEF3E4;
     color: #FF0;
     background-image: url(../rot.jpg);
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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
     color: #FF0;
/* 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-color: #F99;
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);
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
    <ul>
      <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
      <li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Horizontal Menu Submenus Won't Appear - Help

OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@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: auto;      padding: 0;      list-style-type: none;      font-family: "Times New Roman", Times, serif;      font-size: medium;      font-weight: bold;      cursor: default;      width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive {      z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      position: relative;      text-align: center;      cursor: pointer;      width: 108px;      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 0 0 50%;      padding: 0;      list-style-type: none;      font-size: 80%;      z-index: 1020;      cursor: default;      width: 108px;      float: none;      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: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      margin: -5% 0 0 95%;      z-index:1030; } /* 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: none;      top: 0;      z-index:1040; } /******************************************************************************* 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: #000;      padding: 5px 5px;      color: #FEFEFE;      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: #323232;      color: #FEFEFE; } /* 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: #323232;      color: #FEFEFE; } /******************************************************************************* 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;      } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body {      font-family: Verdana, Geneva, sans-serif;      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */      padding: 0;      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */      }       .twoColFixLtHdr #container {      width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */      margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */      border: 2px solid #000;      text-align: left; /* this overrides the text-align: center on the body element. */      }       .twoColFixLtHdr #header {            padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */      border: 0px solid #000;             } .twoColFixLtHdr #header h1 {      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */      padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */       } .twoColFixLtHdr #sidebar1 {      float: left; /* since this element is floated, a width must be given */      width: 200px;      font-size:12px;      color:#FEFEFE;      background: #000;      border-top-width: 1px;      border-right-width: 2px;      border-bottom-width: 2px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #000;      border-right-color: #660000;      border-bottom-color: #000;      border-left-color: #000;      padding-top: 1px;      padding-right: 0px;      padding-bottom: 1px;      padding-left: 1px; } .twoColFixLtHdr #mainContent {      margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */      background:#660000;      } .twoColFixLtHdr #videomainContent {      margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      background: #323232;      padding-left:100px      } .twoColFixLtHdr #singleframe {      background: #323232;      }       .twoColFixLtHdr #footer {      padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */      font-size:12px;      color:#FEFEFE;      background:#000;      border: 1px solid #000;            } .twoColFixLtHdr #footer p {      margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */      padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */      clear:both;     height:0;     font-size: 1px;     line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover {      text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{     color:#4C0000;} .w1{font-size:14px;     color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{      float: left; /* since this element is floated, a width must be given */      width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */      padding: 0px 0px 0px 0px; }       .b{font-size:12px; color:#000000; } .topbtmmargin {      margin-top: 20px;      margin-bottom: 20px; } .SidebarPadding {      padding-top: 0px;      padding-right: 10px;      padding-bottom: 0px;      padding-left: 10px; } .FrontImage {      border: 5px ridge #323232;      float: left;      margin-right: 10px;      margin-bottom: 10px;      margin-top: 0px; } .FrontImageFltRgt {      border: 5px ridge #323232;     float: right;      margin-left: 10px;      margin-bottom: 10px;      margin-top: 20px; } .mapRgt {      float: right;      padding-left: 5px;      padding-bottom: 10px;      border: none;       } .sigRgt {      float: right;      padding-left: 5px;      margin-right: 60px;      padding-bottom: 10px;      margin-top: 10px;       } .textfntrgtcol {      padding-left: 200px;      font-size:12px;      color:#000000; } .textfntlftcol {      padding-right: 210px;      font-size:12px;      color:#000000; } .twoColFixLtHdr #container #mainContent ul li {      list-style-type: none;      list-style-position: outside;      list-style-image: url(images/blackbullet.gif); } .leftpicture {      border: 5px ridge #323232;      position: absolute;      z-index: 20;      height: 140px;      width: 180px;      margin-top: 10px;      margin-right: 10px;      margin-bottom: 10px;      margin-left: 210px;      left: 150px;      top: 326px; } img {      border-style: none; } .grooveimg {      border: groove; } #apDiv1 {      position:absolute;      width:200px;      height:115px;      z-index:1;      left: 0px;      top: 0px;      visibility: visible; } #apDiv2 {      position:absolute;      width:155px;      height:123px;      z-index:2;      left: 5px;      top: 4px;      visibility: visible; } #apDiv3 {      position:absolute;      width:335px;      height:122px;      z-index:3;      left: 173px;      top: 3px;      visibility: visible;      color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 {      position:absolute;      width:120px;      height:45px;      z-index:4;      left: 390px;      top: 105px;      visibility: visible; } #apDiv5 {      position:relative;      width:200px;      height:115px;      z-index:5; } .menubarWrapper {      background-color: #000;      float: left;      width: 100%; }

Move the constructor for the menu bar up to read as follows
<script type="text/javascript">

</script>
Gramps

Spry horizontal menu's not displaying right in IE9

Presently I'm using Dreamweaver CS4. I have built a web site and placed a horizontal spry menu at the top of the web page. It is situated on the page just below a smaller non-spry horizontal menu.    In IE9, the menu appears above and to the right of this smaller menu rather than in the location I want it to appear. What's more, in Dreamweaver the menu seems to float the upper right of the screen (I've attached a screen shot).   When I review the web site in IE 7, Firefox, Chrome, Opera, and Safari, the menu is correctly placed.
Can anyone help solve this issue? When I view the web page in IE9 and put it into IE7 mode, all is well. Not so in IE9 (or IE8 for that matter).
I'd appreciate direct email as well as answering it here to help others with my quandry. My direct email address:   [email protected].
Thank you!
This image shows you where the menu appears in Dreamweaver AND in IE9
This image shows you where the menu correctly displays in IE 7 (standard mode), Chrome, Firefox, Opera, and Safari.
The smaller navigation you see "Subscribe to Alerts" etc is controlled by the following code:
#secondarynav {
width: 475px;
margin: 0px 0px 0px 0px;
padding: 0px;
float: right;
/* height:20px; */
The entire page including these menus sits in a container (My Code):
#container {
width: 930px;
height:800px; /* changed from 775px */
margin: 0 auto;
border:1pt solid #c7a9a9;
background-color: #FFFFFF; /* added by WDM, 6/5/2012 to keep container white while page body is gray */
Control for Menu Bar: (My code)
#menubar1 ul{
          z-index:5000;
          margin:40px 20px 0px 0px;
LAYOUT INFORMATION: describes box model, positioning, z-order (Dreamweaver Code)
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
/* margin: 0; */
    margin:-45px 0px 0px 200px;
    padding: 0;
    list-style-type: none;
    font-size: 10pt; /* change from 100%, 12pt */
    cursor: default;
    width: auto;
    float:left;
          z-index: 5000;
/* 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: 9pt; /* change from 100%, 12pt */
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 15em; /* change from 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: 10pt;   /* change from 100%, 12pt */
    z-index: 1020;
    cursor: default;
    width: 13.0em;   /* change from 8.2em/14.2 */
    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: 14.2em;   /* change from 8.2em/14.2 */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 170px; /* change from -5% 0 0 80%; */
/* 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;

I'm not sure where you attached files (I have not seen a way to do that in the Forum), But I will try to speak generally and work with what you have posted.
My suspicion is that the negative top margin you have applied is messing things up a bit.
I also note that it is usually better to apply margins to a CONTAINER of an unordered list (which is what menus are made of), than to apply the margins to the ul itself. So, restore the margin: 0; to the ul.MenuBarHorizontal style selector and create an enclosing element that bears the margin:-45px 0px 0px 200px; though I would still reconsider the use of negative top margin.
It is entirely possible that this simple change will help.
Please post the HTML for the top of the <body> section, including the menu code.
Beth

Spry Horizontal Submenu IE bug

Similar Messages

Maybe you are looking for