Spry Submenus in Firefox

My submenu works fine in IE; However, Firefox only shows the
LAST submenu item. The rest of the items are not visible. It seems
as though the previous menu items are collapsed.
Any idea what might be going on?

Hi,
so I can see your SpryMenubar in my FF:
Ok, we can see the sub menus, but very readable the aren't in my opinion. If you will keep your concept you have to scroll down your "slideshow".
Therefore I suggest to use an Accordion Panel, as narrow as possible, and adjust the rest to the width of your website.
Hans-Günter

Similar Messages

Horizontal Spry submenus error in IE6

I have searched every horizontal menu post on this forum for
this answer. I have also edited every line in the CSS to see if it
was causing this problem. I don't know enough CSS to think up my
own CSS but have attempted some new things. My site is live and
getting about 300 visitors a day. About 60% of them are still using
IE6 so they are seeing my embarrassing disaster. I desperately need
help.
I designed and debugged my spry menu for Firefox and IE7.
But they are not working on IE6. My horizontal menu at
www.pocatellocvb.com pushes
the page content down. I need to fix it ASAP.
Here is my CSS:
/* 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: 14px;
cursor: default;
width: 760px;
white-space: nowrap;
/* 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;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
width: auto;
white-space: nowrap;
padding-top: 0;
padding-right: 2;
padding-bottom: 0;
padding-left: 2;
/* 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
background: #FFF;
border: 1px solid #000000;
width: 210px;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
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
color: #C40000;
/* 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
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-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-repeat: no-repeat;
background-position: 95% 50%;
Thanks so much! Ann

Hi,
Sorry because I can't understand very well English and
perhaps I will answer something that ... you know...
But I tried your code, all like you have on your web, but
adding the "BROWSER HACKS: the hacks below should not be changed
unless you are an expert", and it works on IE6, IE7, FF2. Yes,
without that, on IE6, the page breaks.
You only need to add the last fragment that I understand you
have deleted. It works without any other modification on css. You
can update your version 1.4 to 1.6 too.
I hope that I have understood all well.

Spry Submenus Not Visible on RHS only

My spry submenus work totally fine except for the very far
right hand side of the page where the submenus are cut off. I can
see the very beginning of the submenu but the rest of it with the
text is hidden once it goes past the edge of the page. Clicking on
the small part which is visible works, but users still need to see
the entire submenu. This is a problem only in Firefox (3.0.7) and
Safari (3.1.2). IE7 works fine where the submenus on the RHS are
clearly visible as I hover and they extend past the right hand edge
of the page. Thanks for any input.

I could see it on Safari.. it has a Beatles poster on the Home page and then others on the other pages...
Some flucky things happen with these browsers.
Peace,
Glen
iMac G3, G4, G5 Powerbook Mac OS X (10.4.4) iPods

Spry submenus not working while Included with SSI

I have customized and created my horizontal spry menu bar with the help of some tutorials on here, and I have pasted it onto a page without any html, head, or body tags. I have linked to the CSS files and javascript files in both the page being included and the page containing the include. But the Spry submenus wont work on the page with the include on it. But they work on the page being included.
I tried only referencing the javascript file with the page containing the include, and vice versa to no avail. Again, everything else works except the expansion of the submenus.
I am new to all of this, I only know what I have learned from doing tutorials and reading forums on this fabulous website. Has anyone encountered this problem or have a remedy? Thanks in advance.

I'm confused. The submenus in the spry menu on the included page work when I don't reference the external style sheets or the javascript in the page containing the include. Based on the explanation given by David Powers on this thread about how to use SSI with Spry, I thought all pages had to include the link to the javscript and style sheets:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
Problem solved? Or if anyone has an actual explanation for this, I will leave this question unanswered.
Sorry to be so quick to post...

Spry Submenus falling all over themselves

What property do I need to adjust to space out my spry submenus?
I have submenus that need to have more then 5 or 6 words, they are both piling up on top of each other and expanding past the bounds of the background.
Help! please
Thanks.

It's hard to say without seeing what you're trying to do.
It's always best to provide a link to your page - upload *all* the files to a server and post a link.

Spry submenus overlap menu in Internet Explorer

Hi, I'm working on a spry menu, and it looks exactly how i want it in Firefox, but in Explorer my submenus shift to the left and overlap my menu a lot.
Also on my horizontal menu, the whole menu shows up shifted to the left and to the top in Explorer
Here's the website
http://myareasbest.com/MI%20cities/Traverse-City.html
Heres my code for the vertical menu
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
    cursor: default;
    width: 12em;
    border: 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
    list-style-type: none;
    font-size: 12px;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 12em;
    font-family: Verdana;
    font-style: normal;
    font-weight: bold;
    border: 2px solid #003399;
    height: 1.5em;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
/* 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
    list-style-type: none;
    font-size: 12px;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 12em;
    left: -1000em;
    top: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 75px;
    font-family: Verdana;
    font-style: normal;
    font-weight: bold;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 12em;
    left: 75px;
    top: 5px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: none;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #01ACE2;
    color: #ffffff;
    text-decoration: none;
    height: 7px;
    width: 12em;
    padding-top: 0.5em;
    padding-right: 0;
    padding-bottom: 0.5em;
    padding-left: 0em;
    font-size: 100%;
/* 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: #003385;
    color: #FFF;
/* 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: #003385;
    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;
/* 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;
Code for horizontal menu
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    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: 0px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 160px;
    float: left;
    left: 200px;
    top: 0px;
    height: 30px;
/* 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: 160px;
    position: relative;
    left: -1000em;
        top: 0px;
/* 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: -200;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 10em;
/* 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: 0;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 0;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #01ACE2;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border: 2px solid #003399;
/* 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: #003385;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #003385;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

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 submenus disappear on hover with jquery in IE6 only

Help: I thought I had everything working perfectly until trying this site in IE6:
www.fstflorian.com/biolabs.html
Things work perfectly in firefox 3, 3.5, IE7, google chrome, and IE8. IE6 causes the menu to disappear on rollover. I've worked on this for probably 10 hours since discovering the problem, adjusting z-index, etc etc to no avail, so I thought I would ask the experts. The problem does not exist when jquery / supersized is not running. I also discovered that changing from absolute positioning in the standard spry IE hack area begins to change whether/not the submenus disappear but the menu arrangement turns into a huge mess.
I know my syntax isn't perfect... just trying to make things fully operational (site has gone live at least in limited function to meet deadline). Later I will look for help on cleaning things up a bit.
Thank you!

Moderators: Could you please remove this; it looks like I posted in the right place afterall. I don't see a way to delete.
Duplicate post is located here: http://forums.adobe.com/thread/516522?tstart=0
Very sorry for this.

Spry Panels and FireFox issue

I can't get my spry panels to position correctly in Firefox but are fine in the other browsers. Can someone please advise??
Thanks!
Janie
http://0000uhy.previewcoxhosting.com/Pages/ourservices.html

Hello,
In the sprymenubarvertical.css file, try changing position:
static; to
position: relative;
in the ul.MenuBarVertical li style.
Also, you should get rid of the link to test.css as it's an
html page in a
css file.
Take care,
Tim
"Striker" <[email protected]> wrote in message
news:fqkk1e$sak$[email protected]..
> Sorry Spry menus, and they show up in the top right in
FF
> .
> "Striker" <[email protected]> wrote in message
> news:fqkcfj$ki6$[email protected]..
>> www.scottmertens.com
>>
>> Any of the submenus on this site work fine in IE7,
but in Firefox the
>> submenu is positioned in to top left corner
partially off the screen and
>> not readable or clickable. Any ideas what is wrong?
>

IE displays spry submenus (incorrectly) at top of screen

I apologize for asking this question, as it looks like it has been asked before, but I've spent hours trying to get my spry navigation bar to display correctly in Internet Explorer with no luck. My project for school is due tomorrow and this is the ONLY thing that is preventing me from completing my project. I'm practically in tears!
I use a horizontal spry menu and the submenus don't drop down like they are supposed to. They show up as separate navigation menus at the very top of the screen.
What additional information do I need to provide? My mentor was unable to help me because he uses a Mac and he can't test it.
http://katiemieher.tripod.com/aychihuahuarescue
Details below.
Thanks!!
Correct:
Messed up by Internet Explorer:
CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    padding: 0;
    list-style-type: none;
    cursor: default;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-variant: small-caps;
    text-align: center;
    line-height: normal;
    white-space: normal;
    margin-top: 0;
    margin-right: 100;
    margin-bottom: 0;
    margin-left: 0;
/* 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: 120px;
    float: left;
    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: auto;
    position: absolute;
    left: -1000em;
    float: right;
/* 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
    float: none;
    width: auto;
/* 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;
    padding: 0.5em 0.75em;
    color: #F0F0F0;
    text-decoration: none;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
/* 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;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
/* 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;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
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(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
/* 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(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
/* 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(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
/* 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(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
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;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
/* 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-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;

Hi Katie,
I understand. Here is a revised style sheet. I cannot verify it because I do not have version 1.4 on my computer. Please try it, make sure you keep a copy of your own style sheet in case. After installation please give me your feedback.
@charset "UTF-8";
ul.MenuBarHorizontal
    padding: 0;
        margin: 0;
    list-style-type: none;
    cursor: default;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-variant: small-caps;
    text-align: center;
ul.MenuBarActive
    z-index: 1000;
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 120px;
    float: left;
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 120px;
    position: absolute;
    left: -1000em;
    float: right;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
ul.MenuBarHorizontal ul li
    width: 120px;
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #F0F0F0;
    text-decoration: none;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    color: #FFF;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
        filter:alpha(opacity:0.1);
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
Ben

Spry Submenus Rolling Up in Multiple Broswers

Hi!
I'm trying to implement the spry menu on a website but it wont work for me. When you hover over the submenus they flicker and a submenu disappers. Here's a link to a page with this happening:
http://celebrationsphotography.us/contact_test.html
Thank you for your assistance!!!
hdksmith07

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 displaying in Firefox & Safari, but not in IE

Ok, so I was trying to replicate one of the demos: http://labs.adobe.com/technologies/spry/demos/rssreader/index.html
Except that we're running on a LAMP platform which meant I had to rerwite the ColdFusion into PHP. I'm hoping the PHP isn't the issue, seeing as this wouldn't be the forum for correcting that problem.
Here's the page I'm working on: http://www.darton.edu/ol-or/new.php
It works just fine in Firefox & Safari, but when I get to IE, I get the "Failed to load feed items!" error.
I can read the feeds in IE, but for some reason it won't display them.
The core of the feeds.php I wrote:
$xmlstr = trim(file_get_contents('LiveFeeds.xml'));
$mydoc = new SimpleXMLElement($xmlstr);
foreach($mydoc->feed as $feed)
if($feed['id'] == $id)
   $url = $feed['url'];
   $curl_handle=curl_init();
   curl_setopt($curl_handle, CURLOPT_URL, $url);
   curl_setopt($curl_handle, CURLOPT_HTTPGET, TRUE);
   curl_setopt($curl_handle, CURLOPT_HTTPHEADER, array ("Content-type: text/xml; charset=utf-8"));
   /*$buffer = */ return curl_exec($curl_handle);
   curl_close($curl_handle);
   //return $buffer;
Firefox and Safari aren't having a problem at all, everything is processing correctly. I thought, after reading some in the forum that the Headers were the issue, but as far as I can tell, the cURL HTTP Header feature is working as it's supposed to.
I feel like I'm beating my head against a brick wall at this point.
I just need guidence at this point, at least a shove in the right direction would be helpful.
Many thanks in advance.

The XML file seems to be in order.
I do notice that IE has a problem with SpryData.js which points to interference from other JS. For a start, place xpath.js after SpryData.js.
If this does not solve the problem, try placing both of the above files before any other JS files.
Gramps

Images in IE Render over Spry SubMenus

I've developed a Spry Menu Bar, but in IE when you open the
submenu under the 'about us' link - any image thats in the content
of the page renders over the submenu. Works fine in firefox though.
See www.genicaassist.co.uk for this example.
I've searched the net and am yet to find an answer. I need to
force IE to somehow display the menu in front of the images.

The IE has numerous bugs related with the z-indexing
therefore we usually don't advise people to use this kind of
styling in their web pages unless they really have no other choice.
To fix the bug you hit you should add for the element with
the id "left_column_container" a z-index of 1010.
Regards,
Cristian

Spry.Data.HTML Firefox .vs. IE

Hi,
I have a relatively simple page with two HTML table data
sources.
ds1 = Flashcontent.html and ds2 = PDFcontent.html and their
respective tables, FlashDemoContent and PDFDemoContent.
I'm using a Spry Tab widget that contains two tabs, and Spry
repeats in each tab to show the content from
the tables above.
It all works just great on IE. HOWEVER, on Firefox (2.x and
3.x), I get the error:
Spry.Data.HTMLDataSet: 'PDFDemoContent' is not a valid
element ID.
Data shows up on the first tab (FlashContent) but not on the
2nd tab.
Any thoughts? I'd be happy to share the code if need be.
thanks for any pointers.
mike

Hi,
Thanks for replying. I really appreciate it. Unfortunately, I
don't have a URL handy that I can publish to. (Behind the corp
firewall with no access to my home server)
However, I think I might have figured it out. When
referencing the column names (ie: {FullName}, {Directory}), if you
are using the same name more than once, you should reference as
follows:
{ds1::FullName}
{ds2::FullName}
etc...
Once I clarified that, it worked well in both IE7 and Firefox
(3.0).
I dare say, this has been enjoyable! Thanks again for
replying. I'd appreciate if someone could verify my findings.
mike

Spry submenus horizontal

I'm have successfully implemented spry horizontal menu but
now I want to use spry horizonatl menus where the submenu is also
horizontal. And, I can't seem be able to modify the
SpryMenuBarHorizontal.css to get the submenu to be horizontal in
both IE and Firefox. Anyone have a solution to this problem?
Thanks

Hi,
Sorry because I can't understand very well English and
perhaps I will answer something that ... you know...
But I tried your code, all like you have on your web, but
adding the "BROWSER HACKS: the hacks below should not be changed
unless you are an expert", and it works on IE6, IE7, FF2. Yes,
without that, on IE6, the page breaks.
You only need to add the last fragment that I understand you
have deleted. It works without any other modification on css. You
can update your version 1.4 to 1.6 too.
I hope that I have understood all well.

Spry Submenus won't appear on one page, but they will another

I have used Spry menu bars on sites before, but this is the
first time I have had a problem like this. I make the spry menu bar
on its own page and then use it as an include in a div tag on my
site. When I preview the Spry Menu Bar in its own page, it works
fine, and submenus work also. But when I have it in the page,
everything works except the submenus will not come out. Any ideas?
I attached the spry menu bar code (which works on its own), and my
own page, where the spry is not working.

Hi Rustyintegrale,
A couple of questions...
1. Does the unit immediately kernel panic when power from the bus hits the drive?
2. Does it happen in multiple users?
3. If you startup, interrupt the boot process and boot to the startup manager (by holding option on startup) and then plugin the SuperDrive does it kernel panic there as well?
When a peripheral causes a unit to go into this state, there's little that can be done to troubleshoot from a software perspective. Especially if your answer to all three questions above was "yes." You can certainly try resetting the PRAM & SMC, to see if there is any change. But, I think the next best step might be to bring the machine and this optical drive to see a qualified technician.

Spry Submenus in Firefox

Similar Messages

Maybe you are looking for