Spry Menu Giving the Blues with IE

I'm having trouble with my horizontal spry menu. I have added
it and it looks great in Firefox. No problems at all, exactly how I
like it. But when previewed in Internet Explorer it doesn't show at
all. There's nothing. I've inserted the "mark of the web." Nothing.
I don't really know where I'm going wrong. I'm relatively new to
Dreamweaver and am using CS4. Can someone please help? My .css for
the spry is:
/* 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;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
background-color: #4F004F;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
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;
background-color: #4F004F;
/* Menu item containers, position children relative to this
container and are a fixed width */
ul.MenuBarHorizontal li
margin: 1;
padding: 0;
list-style-type: none;
font-size: 10px;
position: relative;
text-align: center;
cursor: pointer;
width: 9.6em;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFF;
background-color: #4F004F;
white-space: nowrap;
/* Submenus should appear below their parent (top: 0) with a
higher z-index, but they are initially off the left side of the
screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 10em;
position: absolute;
left: -1000em;
background-color: #4F004F;
/* 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;
background-color: #4F004F;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
background-color: transparent;
float: none;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
background-color: #4F004F;
/* 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;
background-color: #4F004F;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
background-color: #4F004F;
width: inherit;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #4F004F;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
white-space: normal;
/* 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: #4F004F;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
/* 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: #4F004F;
color: #FFF;
ul.MenuBarHorizontal a.MenuBarItemHover {
background-color: #690;
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%;
background-color: #4F004F;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFF;
font-weight: bold;
/* 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%;
background-color: #4F004F;
/* 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%;
background-color: #690;
/* 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%;
background-color: #690;
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);
width: auto;
/* 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: none;
f\loat: left;
background: #FFF;

I posted this message also in another forum. The menu bar seems to work fine in IE8, and other Firfox , Opera, Google Chrome but not in Internet Explorer 6 or 7. When you click on the drop down, it goes up instead of going down. The main page is at http://www.nchampion.com
Thank You for any assistance anyone can provide

Similar Messages

I clicked on the angled arrows in upper right corner and lost my top menu bar, the one with the apple. How do I get it back?

I clicked on the angled arrows in the upper right corner of my screen in Safari and then lost my top menu bar, the one with the apple. How do I get it back?

Restart your computer.

The flash clip is always in fron of my drop down spry menu. How can i bring my spry menu to the front?

Hi, Can someone pls help. I could get my dropdown spry menu to be shown as current when it pop outs, it goes behind my flash clip. How can i bring the spry menu to the front?

well this is the embedded code:
<object width="400" height="301">
          <param name="wmode" value="transparent">
          <param name="allowfullscreen" value="true" />
          <param name="allowscriptaccess" value="always" />
          <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=***&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" />
          <embed src="http://vimeo.com/moogaloop.swf?clip_id=9959732&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" width="400" height="301" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"></embed>
        </object>
So I think that's ok? For the rest, all I changed in the spry menu is that I multiplied the z-index twice (menu and submenus) by 10. But that can't be the problem...

How to fix Spry Menu bar and Firefox with a Mac

The spry menu bar does not properly display in Firefox (Version11&12) on a mac. Have looked at a number of different ways to fix this. Included is a copy of css for menu bar. Would appreciate any suggestions.
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 11em;
          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: 11em;
          left: -1000em;
          position: relative;
/* 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: 11em;
          float: none;
/* 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
          /* [disabled]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: #FFFFCC;
          padding: 0.5em 0.75em;
          color: #4F8627;
          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: #FFFFCC;
          color: #4F8627;
/* 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: #FFFFCC;
          color: #4F8627;
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;

Change
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: relative;
to
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: absolute;
Gramps

How to make 1 spry menu for the entire site? but not on each page

i have a website that i wish to have multiple pages available all form the same menu and late and probably at regular intervals add more tabs to the menu
is there a way to create a spry menu speratley that the page some how references, something like a frameset but without using framesets?
im sort of new to webdesigning and unsure of the correct terminology, so i am finding it difficult to look up stuff that i don't know the name for, but will gladly go read someting if you point me in the right direction.
regards
for now
wayne

You can do this with PHP or ColdFusion
These are "server side" scripting languages so you will have to test your website after you upload to you web hosting account.
Or if you set up a local server. Without the local server you will get errors when you open them in firefox.
To use the following what you do is "Cut" the part you want to be on all pages out, "Paste" it into a seperate document and in its place on your page you put one of the following suitable tags.
You will also have to rename your main file to .php or .cfm as opposed to .html
Again, whatever page you put one of these tags on, their extention must change match the type of tag used.
First Method (PHP):
PHP is the more common method -
<?php @ require_once ("yourMenu.html"); ?>
Require_once is basically a safeguard so that you don't add the menu twice onto a page.
This will only work for PHP 4+
This method would work for older versions of php too -
<?php @ include("yourMenu.html"); ?>
Second Method (ColdFusion):
This will only work if your host has ColdFusion installled -
<cfinclude template="bla.html">
eg index.html
<html>
<head>
<title>Stuff</title>
<head>
<body>
<?php @ require_once("SpryMenu.html"); ?>
</body>
</html>
SpryMenu.html
<ul id="menubar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
            <li><a href="#">Item 1.1</a></li>
</ul>

Color of the menu on the blue version?!

Hi,
I´ve bought a 5800 XM Blue, but the menu isn´t blue, it´s all "standard" grey?!
The firmware version says: 21.0.025.C03.01
Shouldn´t it be any with blue inside?
I´ve tried a re-install of the firmware and a Hard-Reset but no change?!

Almost all unbranded 5800's only have one theme preinstalled, even the UK version. Operator branded versions and certain country variants may differ.
The colour of the theme depends on the colour of the handset.
What appears to have happened here is that your phone has got the update for the black/grey model instead of the blue one. The most common cause of this is that it was previously modified by the retailer (often to add extra languages), but it could also just be a simple mistake.
The only way to find out for sure what has happened is to visit a nokia care point. They will be able to see if it's a mistake or if it's been previously modified (which could also affect the warranty).
Care points/service centres and repair info:
UK • Europe • Asia-Pacific • USA •
Canada • Middle East and Africa
Elsewhere: Click here, select your country, go to the support section, then select repair.

Spry Menu Bar (horizontal) - Problems with uneveness (height variance) between adjacent items

Hello:
Like many I will confess that I am new to the spry experience and attempting to catch up. I am trying to design a horizontal menu bar that employs a background image (repeating GIF gradient bar repeated along the the x-access) to create a beveled/rounded edge effect. I have another with a different hue that is used on focus and mouse over, etc. While this works well with the drop downs, there appears to be a "boxiness" between adjacent top level menu items and they appear to have slightly different height. This seems to be determined by the text forms the content of any link or menu item. In effect it creates other differences in appearance as the outer most (top and bottom edges) of the GIF appear to be cut off from one menu item to the next. This leaves a very undesirable look to the page as it juts up and then falls back as it the top level item moves across the web page.
The other point I should make is that this problem, although it exists in all browsers to some extent, is most pronounced in IE6 and below. Unfortunately many of the anticipated visitors to this site are forced by their IT department to use IE6.
My question is: can you set a variable that overrides or determines the height of the background of the menu items? Alternatively is there some other way of addressing the problem so that I can get a uniform look as the menu items transition to each other.
Thanks in advance for any help that can be offered.
Steve.

Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Your question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.

Spry menu response time problems with IE

We implemented the spry vertical menu for showing the
categories of a products catalog. It has almost 1400 categories
organizad at about 5 levels, some categories have about 20
subcategories. These categories are in a coldfusion session
variable.
It works perfect in mozilla, but in IE7 and IE6 in some
computers, present this problem:
- The response time is slow when you change from one category
that has subcategories to ahother. If you see the Windows Task
Manager of the computer while you use the menu, the processor use
go up to the top level.
And the effiecience of the menu decrease.
See in
http://edit.panamericana.com.co/
Thanks,
Alejandro

mdr4win wrote:
i dont think you understood my question, wasnt about body background, but abut the spry image slideshow to work properly in IE
I was not talking about body background, but about having markup that screws up your document when using a browser. Body background just happened to be there. Perhaps you would do well to have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flittletreats.org%2F.
I have noticed that you ignored my solution; your document still shows two bodies.
Perhaps I should have mentioned that I tested in IE6 through to IE9 using IETester and the above was the only thing stopping IE from performing properly.
How did you determine that the slideshow was not working correctly in IE and which versions of IE?
Grumps

The most insane thing started happening out of the blue with my Macbook.

I can barely type two or three letters without, all of a sudden, totally randomly, the dashboard coming up on screen. I don't click anything, I have no mouse...it just comes out of nowhere.
It's making me insane.
I've looked online and can't find any solutions. Help, please, before I lose my mind.

Try going to your System Preferences, Keyboard & Mouse>Keyboard Shortcuts> find the Dock, Expose, Dashboard and click on the little triangle. You should see the different Keyboard shortcut for different functions. Un-check the Dashboard and see what happens.
Adam

Accordion Spry shows a strange blue glow when clicked on... And the tabs jump a bit...

I am having a problem on the page below.
I was able to make the TEXT stop glowing blue when in focus, but can't manage to get this blue-glow outer line wrapped around the spry object. I have no idea how to fix it.
Here's the page where the issue happens- http://www.fci.tv/home/casestudies.html
Here's a link to the page's CSS file- http://www.fci.tv/home/css/style.css
And a link to the Accordion CSS- I've modified it a little to get rid of the ugly default setup, but still see this blue glow around the spry.... http://www.fci.tv/home/spryassets/spryaccordion.css
Lastly, when you click on any of the three spry-menu options, the panels slide with a strange jump. Can you please provide any insight to this problem?
Thank you!
Hugo

Hello there.
Thank you very much for your input. This worked perfectly.
Thank you!
Hugo

Dreamweaver trouble with Spry Menu

It must be getting late, as I can't seem to get this to work.
I am experimenting with a spry menu for the school I work at.
The site I made earlier is www.wmes.ca
The school would like to have the site updated, so I figured I would do so by using a spry menu in place of the one I did in photoshop with the drop downs (see above link). Personally i liked this method and found it quite easy, however, it is now a depracated feature.
As said already, I am working with just a goofy template I've made to see if I can make the spry menu work on a site that is 760 px wide. The menu appears to work, but it is not 760 px long. Also, in IE, the drop down menus span horizontally on the page instead of vertically. I can't explain this either.
The last thing my tired eyes can't detect is the place to make the text on rollover bold.
The current site can be viewed at www.prestigeinteractive.com/wmems
I would appreciate a fresh set of eyes.
Thanks for your time,
Greg
files are attached

The Spry menu customisation tutorial that David wrote may be of help to you: (this takes you to the width customisation page - but start at the beginning to understand all the style rules that apply to the menu).
http://foundationphp.com/tutorials/sprymenu/customize3.php
You need to specify a width in three places, so that IE doesn't show the submenus horizontally instead of vertically - explained in the tutorial link above.

Printing Problems with Spry Menu. Help?

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

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

Is there a fix for IE window resize with Spry menu?

I have a spry menu that works fine in all browsers, the only issue I have is when a window in IE is resized, the spry menu does not move with the rest of the content. The menu does reposition itself once the mouse moves into the navigation area.
Is this a display bug with IE or is there a css hack that will fix this behavior in IE?

I am having trouble with Firefox loading some pages....

Problem with spry menu bar position:fixed?

Hello technical heros,
I'm having trouble with my website's spry menu bar... here is the site.
As you can see, when you scroll down, the spry menu overlaps the header fixed block, which the rest of the content smoothly scrolls under. How do I tell the spry object to do the same?
I also want the sidebar 2 (menu bar) to be a fixed block like my header and footer. I know how to do this, but when I change the css, it throws my spry menu over to the left of the page, ontop of my sidebar 1.
Help, please!!

Hi,
Have a look here: http://www.w3schools.com/Css/css_positioning.asp
I hope this helps.
Ben

ERROR with Horizontal Spry Menu & IE 7 ONLY!

I created a new website with CS3 adding a horizontal Spry Menu across the top of the page. I am having a problem with this menu in Internet Explorer 7 ONLY! I don't have this problem with Firefox, Chrome or Safari. I wouldn't care so much but IE is the dominant browser. The site is: http://www.sunscapesolar.net. The problem is that when you mouse over any of the top-level menu titles that have sub-menus below like: PRODUCTS, SYSTEMS, INCENTIVES, etc., the body text shifts down and I get a white box popping up that says "false." I've checked everything I know but since DW created the javascript code, I don't know where to go. I have posted this problem three times and nobody has responded! Someone has to know what's wrong! Please help... I don't want to create the site from scratch. . .
Thanks in advance...
Mike

fixed it myself - please ignore

Spry Menu Giving the Blues with IE

Similar Messages

Maybe you are looking for