Spry submenu not displaying in IE

Hello,
I just finished designing my first site with dreamweave, and am having some problems.I have read some threads and found the advice helpful to my situation, but still have a problem.
My spry menu was not displaying in Internet Explorer when activex is was enabled. I fixed part of the problem; the main Vertical Spry menu displays, but the submenu (for services) and the background rollover are different than what I intended (and what they are in Firefox). Can someone point me in the right direction? I'll upload my vertical .ccs and .js files, please let me know if you need more.
Thanks,
Kalyndra

I've played around with this for a while, but I think there is something in your SpryMenuBar.js file that is not working; or, it is not uploaded to the server.
Additionally, this declaration:
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 150em;     /* THIS WANTS TO BE 150px, NOT 150em but there are bigger issues (see below) */
    left: -1000em;
    top: 0;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
I recommend that you delete this SpryMenuBarVertical and all its associated files and insert it again. If you want to change things in the CSS files, do so carefully (and in the appropriate sections...layout in layout; color and fonts in their own section).
By redoing, your submenu indicators will resume having the correct path (in your file, they are misnamed and improperly pathed), all your javascript and css files will be properly linked, etc.
Beth

Similar Messages

Spry submenu not displaying in Chrome or Firefox

I am having problems with my Spry menu (produced with Dreamweaver CS5). The submenus only appear in IE in compatibility mode and not at all in Chrome or Firefox. The site is at http://www.vectors-meeting.eu and there should be additional items under programme and travel. Any help would be greatly appreciated.

W3C Validator isn't too happy with your menu code.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vectors-meeting.eu%2F&charset=%28detect +automatically%29&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.3+http%3A% 2F%2Fvalidator.w3.org%2Fservices
As Spry is no longer supported, and your menu is so simple, you might also consider switching to a simple HTML/CSS menu
http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
or a JQuery menu.

Spry submenue not displaying correctly on IE

Hello fellows,
I have tested my site on many browsers it looks ok on all
except IE. It's the way the sub menus are displayed in Internet
explorer. If you click on landscape -->getty photos ( the getty
tab is far to the right and is disconnected from the main menu)
I tried playing with the ul.MenuBarHorizontal ul ul but that
affected the look on firefox and safari.
Here is the site:
http://karimsalha.com/
Below is the spryhorizontal.css code
Thanks in advance

I had the same problem and finally just gave up on the Spry
menu and went with a license from Milonic.com.

My vertical Spry is not displaying properly in IE 8

I am working on my first website using Dreamweaver CS4 and my spry is not displaying properly over my flash photo gallery. It looks ok in Firefox (although the borders are missing on my submenu for "sheds tool list") but in IE 8 the submenus can't be seen. How can I correct this?
My website is www.toolshedstudio.com
Here's my css:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 10em;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
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: 8.2em;
    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: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 1px none #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #000;
    padding: 0.5em 0.75em;
    color: #CCC;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #33C;
    color: #000;
    font-size: 100%;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical 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.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;

Hi
You flash movie doesn't have the parameter wmode=transparent. If you set that, the menu bar will be on top.
<param name="wmode" value="transparent">
I hope this helps.
Ben

Spry Widget not displaying properly

Forgive me for what is, I am sure, a simple problem: I'm new to working in DreamWeaver and am making a site for a friend to teach myself.
I have added a vertical spry menu to my webpage. One item from the menu has a few more specific topics and so a few more items have been added as a submenu. I had done something that caused there to be a big space (the same height as the pop out submenu) to appear within the main menu. I fiddled around and now seem to have changed something causing the submenu to display in the main menu along with the rest of the items. How do I make the submenu return to being invisible until the cursor is held over the specific menu item, and then pop out to the right?
As I'm new to all of this, I'm not even entirely sure of what part of the code to show in order for someone to tell what's wrong... Hopefully this is of help. The 5 items (Highland Cattle through to Produce) are intended to be the fly out submenu.
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Our Products</a>
        <ul>
          <li><a href="#">Highland Cattle</a></li>
          <li><a href="#">English Black Sheep</a></li>
          <li><a href="#">Rideau Arcott Sheep</a></li>
          <li><a href="#">Heritage Poultry</a></li>
          <li><a href="#">Produce</a></li>
        </ul>
      </li>
      <li><a href="#">Buying Local</a></li>
      <li><a href="#">Heritage Breeds</a></li>
      <li><a href="#">Photo Gallery</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
</div>
<div class="content">
Thanks! Robyn

As I'm new to all of this, I'm not even entirely sure of what part of the code to show in order for someone to tell what's wrong...
The best approach by far is to upload a page to the web which displays the problem you're facing.
Then post a link to that page here. A link gives us access to every file that we need to inspect.
That way, it's quick and easy for you to post and quick and easy for us to check and diagnose with browser based troubleshooting tools and will gain many more responses here.

On windows 7 only, ie9 and firefox 4 spry bar not displaying correctly?

This website www.colonialstock.com does not display the spry menubar correctly. I need it to go all the way to the right. But when I do a view on IE8 or do the compatibility view on IE9 (which is the same as IE8) it brings the bar too far, making it fall below where it is. I need it to work on both browsers. The same is on firefox 4 and earlier versions. I am guessing this is just a windows 7 issue in all. Also on firefox when i hover on this tab issuer services> annual meeting & proxy the sub sub menu appears farther down than it should it works fine on all ie8/9 versions. Please let me know if you have any solutions.

See here http://forums.adobe.com/message/4002145#4002145
Gramps

Spry HTMLDataSet not displaying in GoDaddy Website Tonight

Hi,
Has anyone tried using Spry with Website Tonight?
I'm displaying a Spry HTMLDataSet on a Spry Tabbed Panel. It's a pretty simple page - you can see it working here: http://www.bigdogrugs.com/Script/TestMDTabs.html. The original Spry scripts are unmodified.
When I embed this code into a GoDaddy Website Tonight template, the tabbed panel works ok but the DataSet is not displaying. You can see the result here: http://michellesirois-silver.com/Gallery.html. The script and style tags are embedded in the HTML body vs. the head as that is a Website Tonight limitation (Website Tonight does have an option to embed script in the page head but that didn't work either.)
This may be a CSS problem. I'm just using the default Spry MasterDetail.css and SpryTabbedPanels.css.
I'm using Spry 1.6.1 and have tested in Firefox 3.5 and IE 8.
Thanks,
Jerry

Hi Jerry,
I suspect this is a case of encountering the cross site scripting security rules. Basically this stops you showing content from one site on another site, as it makes a user vulnerable to script from another site running in their browser.
So in your case you can't show html or xml from another site in your site. You are trying to show content from one site http://www.bigdogrugs.com/Script/Gallery.html on another http://michellesirois-silver.com/Gallery.html and the browser security models prevent this.
var dsHosta = new Spry.Data.HTMLDataSet("http://www.bigdogrugs.com/Script/Gallery.html", "Hosta");
If you place Gallery.html from bigdogrugs into http://michellesirois-silver.com/Script/Gallery.html and change the SpryHTMLDataSet reference then it should all work fine.
Regards
Phil

Spry data not displaying properly (IE Runtime Error)

Built a few pages for a site using Spry to pull in some XML
pages.
They are supposed to update when a certain selection is
chosen and it works flawlessly in Firefox, Opera and Safari but not
in IE.
IE just shows the SPRY placeholders and doesn't push any XML
data into the fields.
I tried to run the browser compatibility and cleaned up
anything that may be affecting it but nothing is showing an error.
The weird thing is, the page has a total of 585 lines but IE
is saying there is an 'Unknown Runtime Error' on the page at Line:
1163 Char: 4.
does the browser continue to count lines as it pulls in
additional information from attached files (like external css,
javascripts, xml, etc.)?
If so, how do I find out where the error is?
i'm pounding my head against the wall trying to solve this,
but i'm not having much luck.
basically, i'm looking for two things:
How to find the error in the code.
How to FIX the code to work in IE.
any help would be greatly appreciated.
I posted this over in the DW forums, but thought it might be
beter solved over here in the SPRY forums.
TIA!

quote:
Originally posted by:
Donald Booth
You can't have spry:regions on <tr> or <table>
Make sure you have then in <div>s or other tags.
You have lots of little regions. You can have a region and a
repeat in the same tag.
Fix that and then try it.
How do I use both detail regions and master regions in a spry
div then?
my whole problem was, I couldn't get the menu items into the
same table as the detail regions.
If I put the whole table into a spry detail region it would
just read the menu items as a detail region and give me static
data. and if I did it as a standard region, the stuff I wanted to
update wouldn't show as a detail region.
I tried to keep them in <span> tags within the table
but I guess IE doesn't like that.
When I try to insert a detail region within an already
existing DIV tagged spry region I get the DW error "
Spry does not support nesting of spry:region blocks.
Obviously, I must be missing something.
it's been a long time since I built sites from scratch
(99-00), but because my company asked, it is now my project.
I have to relearn stuff and am not 100% familiar w/ building
using DIV, SPAN and CSS. I have the basics; just enough to get me
into trouble. maybe it's time to go back through the Spry
Handbook?

Spry submenu not loading correctly in IE

Solved: check out this link
http://forums.creativecow.net/thread/191/857297
QUESTION:
Hi, I am new to spry and this is my first menu.
I cannot for the life of me figure out why the submenu will
not load correctly in IE.
It is loading at the top of the page instead of under it's
parent tab in the horizontal menu.
It is working great under FF and Safari. *links removed
Any help would be great. I tried an IE statement, but
couldn't get it to work in the css. Probably user error.
I found out if I fiddled with the margin numbers of the
following css code that I could get the submenu to drop to it's
spot in IE, but then it would also drop in FF too. What a pain. My
menu is in a table if that makes any difference.
ul.MenuBarHorizontal ul ul
margin: -5% 0 0 95%;
z-index: 1020;
I built a test spry menu from scratch and didn't change any
of the css information and the submenu would still load at the top.
Please, any help would be great. I really would hate to start
another menu from scratch.
Text
question

I had the same problem and finally just gave up on the Spry
menu and went with a license from Milonic.com.

Spry menu not displaying right in IE

Again, I am very new to Dream Weaver, I need help...IE problems...
my site looks fine when previewing in firefox, chrome, safari, when I preview in
IE5.2 there is a small white line appears at the top of the footer and the menu looks fine until I hover the menu bar, it stretches out of the left side-bar across the page.
When viewing in IE on a PC laptop... it's totally mixed up!
Can you help?

I have had a look in IE7and IE8 and do not see any mix-up.
Having said that, there are a number of mods in the CSS that are confusing, such as
ul.MenuBarVertical
margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
cursor: default;
width: 11.75em;
     display: inline;
It may be best if you have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and compare that with your style sheet.

Submenu not displaying properly in IE

My submenu is way off on the right side of the page in IE, and I can't figure out why. I know I've had this problem before, but my previous fix doesn't seem to be working.....assuming I found the correct fix I did the last time. Not sure about that .
I compared the CSS from another site that is working properly in IE, but I can't find the difference, so I need another set of eyes.
The URL is www.veir.net, I'm using CS4.
Thank you!

I guess that puts you in a bit of a dilemma. You have the choice of waiting for Adobe to answer your question or you can try my solution.
To help you in the decision making process, please copy and paste the following code in a new document and view the result in IE. Make sure you do link the document to a virgin copy of SpryMenuBarHorizontal.css
<!DOCTYPE HTML>
<html>
<head>
<meta 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">
<style>
ul.MenuBarHorizontal {
     width: 555px;
     height: 42px;
     font-size: 80%;
     background-image: url(http://www.veir.net/images/nav_bg.png);
     font-weight: bold;
     float: right;
ul.MenuBarHorizontal li {
     width: 16.6%;
     margin: 4px 0 0 0;
ul.MenuBarHorizontal ul {
     width: 15.5em;
     margin-top: 7px;
ul.MenuBarHorizontal ul li {
     margin: 0;
ul.MenuBarHorizontal a {
     color: #FFF;
     text-align: center;
     background-color: transparent;
ul.MenuBarHorizontal ul li a {
     background: #154B84;
     width: 14em;
     text-align: left;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
     background-color: transparent;
     color: #F7E01E;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
     background-color: transparent;
     color: #F7E01E;
@media screen, projection {
     ul.MenuBarHorizontal li.MenuBarItemIE      {
          background: transparent;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="services.html" title="Services" class="MenuBarItemSubmenu">Services</a>
        <ul>
          <li><a href="esa.html" title="Phase I & Phase II ESA">Phase I & Phase II ESA</a></li>
          <li><a href="situ.html" title="SITU Treatment & Remediation">SITU Treatment & Remediation</a></li>
          <li><a href="ust_removals.html" title="UST Removals & Remediation">UST Removals</a></li>
        </ul>
      </li>
      <li><a href="equipment.html" title="Equipment">Equipment</a></li>
      <li><a href="projects.html" title="Projects">Projects</a>      </li>
      <li><a href="clients.html" title="Our Clients">Our Clients</a></li>
      <li><a href="contact.html" title="Contact Us">Contact</a></li>
      <li><a href="index.html" title="Home">Home</a></li></ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Cheers,
Gramps

Spry submenu not showing up on IE6/IE7/firefox

The Horizontalmenu Spry is working good when I create it as a
blank html page. But when I created spryheader as a template, the
submenu is not showing up on hover on IE and firefox. Wonder if its
a z-index problem.
Using spry 1.6.1
Did anybody face the same problem and found a solution?
Working URL (simple html page) : www.ciitech.net/next1/
Templated page :
http://www.ciitech.net/next2/Templates/ciiheaderfooter.dwt

Maybe you tweaked something, but it shows up in Firefox 3 and
IE7 for me. In IE7 though, the menus don't drop straight down, but
I think that might have to do with the widths you have set for you
menu items, but not certain.

Spry Submenu Not Inline With Vertical Menu in Internet Explorer

Please could someone help with advice on my website. The spry
vertical submenu lines up okay in Safari and Firefox but in
Internet Explorer my submenus are shown higher than the the
vertical menu item they link to. I have tried changing all that I
can to find a solution but nothing works. Have a look at
www.jadedlusion.com/Home.html. I have attached my code.

Please address the following first http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmyareasbest.com%2FMI%2520cities%2 FTraverse-City.html

Spry Menu not displaying correctly in IE

Can someone take a look at the following link and tell me why
the spry menu isn't displaying correctly in IE?
http://www.cedarcrossings.com/dev
It's working fine in Safari, Firefox, Opera, Camino, etc.,
but for some reason the sub-menus won't drop below the headings in
IE.
Thanks in advance.

I had the same problem and finally just gave up on the Spry
menu and went with a license from Milonic.com.

Re: Submenu NOT Displaying over Text in IE

Hi Effe909,
Do you have an URL or a sample we can look at?
--== Kin ==--

Issue resolved. Not sure exactly what fixed it but here are
some of the changes in case it was a combination of things. 1st put
a div in then inserted the vertical menu into it (problem still
remained); 2nd changed the background color on the template to
white. Apparently this did it having nothing to do with spry (e.g.
page properties). I think it was set to default/nothing.
Regardless, I'm a happy camper now. Thought I'd post just in case
someone else has this problem.

Spry submenu not displaying in IE

Similar Messages

Maybe you are looking for