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
Similar Messages
-
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 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 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 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. -
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 -
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! AnnHi,
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 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 data region to display multiple data sources
I'm developing an interactive menu using the Spry and Ajax framework that lists the menu items on the left (in a Spry accordion) to a corresponding image and description on the right. I have the basic functionality working, however, my menu items are broken into sub categories, and I can't seem to get my detail region to display attributes for more than 1 ds.
My current status is here: http://bit.ly/PUG1y
As you can see, my menu is broken into sections; i.e. Tapas, Pizzas, Entrees...etc. The Tapas secion works perfectly, and the Pizza section appears correctly on the left. However, I cannot get the detail region on the right to link to both Tapas and Pizzas. Right now I am trying to use separate XML files for each category, but could see my XML looking like this:
<?xml version="1.0" encoding="UTF-8"?>
<menu>
<tapas>
<item>
<name>Fresh Tilapia Dip</name>
<title>Fresh Tilapia Dip</title>
<image>../one0one/images/food/crab_cakes.jpg</image>
<desc>Mesquite Smoked Fresh Fish w/ Tortilla Chips and Pickled Jalapenos $6.99</desc>
</item>
<item>
<name>Jamaican Jerk Chicken Satay</name>
<title>Jamaican Jerk Chicken Satay</title>
<image>../one0one/images/food/satay.jpg</image>
<desc>Served with Pineapple Chutney w/ 101’s Spicy Tartar. $9.99</desc>
</item>
</tapas>
<pizzas>
<item>
<name>Pizza1</name>
<title>Pizza1</title>
<image>img.jpg</image>
<desc>description</desc>
</item>
</pizzas>
</menu>
I do not know how to set up the Spry regions to get this to work. This seems like it should be pretty straightforward, but I have not had a lot of experience using Spry. What is the easiest/best practice method to get this to work correctly? Thanks for your help.I feel your pain... I was JUST running into the same issue and debated on using a similar menu for the restaurant site I did.
Anyhow, here's how you do it. I solved it with this answer here: SOLVED: Multiple Data Sets (renamed)
You can reference the source code here. Data Set Shell with Accordion
The skinny version goes like this: You take your multiple data sets and combine them into one "Shell" using SpryDataSetShell.js
Copy that to your Spry Assets folder and link to it alnog with your Accordian JS files.
<script src="../../includes/SpryDataSetShell.js" type="text/javascript"></script>
create a shell of all your datasets.
var DATASET_2 = new Spry.Data.HTMLDataSet("../link_to_dataset", "Event_Table");
var NEW_DATASET_SHELL = new Spry.Data.DataSetShell(dataMay);
Then substitute your NEW_DATASET_SHELL in your code for the detail on the right
<div spry:detailregion="NEW_DATASET_SHELL" class="YourContainer">
Create an OnClick call in your accordian menu on the left...
<div class="AccordionPanelContent" spry:region="DATASET_1"><p spry:repeat="DATASET_1" spry:setrow="DATASET_1" onclick="NEW_DATASET_SHELL.setInternalDataSet(DATASET_1, true);">{item} {item}</p></div>
Do that for each of your accordian panels... Good Luck. Let me know if you need anything else. -
Custom Spry Validation... Multiple Select
http://www.mredkj.com/tutorials/tutorial005.html
I am trying to have a 'multiple' select box where the user would enter answers to a trivia question. It is the same concept as the example in the link.
1. User types answer in textfield
2. Hit "add"
3. javascript adds a new option in multiple select box with new answer.
Would it be possible using spry to validate that a user at least enters 1 answer? Max of 3? I appreciate any direction or suggestions on a new approach!http://www.mredkj.com/tutorials/tutorial005.html
I am trying to have a 'multiple' select box where the user would enter answers to a trivia question. It is the same concept as the example in the link.
1. User types answer in textfield
2. Hit "add"
3. javascript adds a new option in multiple select box with new answer.
Would it be possible using spry to validate that a user at least enters 1 answer? Max of 3? I appreciate any direction or suggestions on a new approach! -
Spry Submenus Don't Disappear On Click
I am trying to use Spry menus, but the submenus do not
disappear on click. When a user selects a submenu item, the submenu
stays open even after the user has made a selection. The user has
to move the mouse away from the drop down menu in order for it to
disappear. This is clumsy.
What can I do to get around this? Any ideas?If it was designed that way, I think it is a design flaw.
Once you click a selection on a submenu, you are done using
the submenu, and it should go away. That is how most desktop
software is designed.
I'm using items on the menu as links to another page that
appear in a DIV. The problem is, the submenu covers the top part of
the DIV, and the user cannot see if it worked or not.
How can we tell the Spry developers that submenus should
disappear on click to make them more user-friendly? -
I redid my web page design and layout and decided to add a
spry menu with submenus. I have messed up somewhere and have
searched for hours for a fix but haven't had any luck. My submenus
were opening as white boxes with a false message. Now the submenus
will not open at all. What do I need to fix? I am new to all of
this CSS and am just learning as I go. Any help would be wonderful!
http://www.allforuphotography.comI am unable to connect to my emails
-
Horizontal Spry submenus not dropping
I created a horizontal spry menu for this site just as I have always done. but the dropdown submenus are not working. I have tried commenting out other "functional" pieces of code. I even put a spry meny into a blank document and uploaded it. I cannot figure out what I've done wrong. Any help would be great.
You can see the page at http://www.rimshotcreative.com/test/web.html
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rimshot Creative…Web Design, E-Commerce, Custom Web Development. Helping you find your groove.</title>
<link href="RC.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="wt-rotator.css"/>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family: Verdana, Geneva, sans-serif;
h4 {
font-size: 40px;
color: #FFF;
body,td,th {
font-family: Verdana, Geneva, sans-serif;
h1 {
color: #C00;
body {
background-image: url(Images/Secondary-backgrounds_01.jpg);
background-repeat: repeat-x;
</style>
</head>
<body>
<div class="container2">
<div class="Shadow">
<div class="header"><a href="default.html"><img src="Images/RC-header_03.jpg" width="401" height="83" alt="Rimshot Creative Logo - web design, print design, social networking, marketing, seo, printing, & photography"></a><img src="Images/RC-header_04.jpg" width="291" height="83" alt="Rimshot Creative - "><img src="Images/RC-header_05.jpg" alt="Rimshot Creative - Free Consultation, call now (615) 482-5182" width="324" height="83"></div><!-- end .header -->
<div class="main-image">
<img src="Images/Exceptional-Design.png" width="631" height="293" alt="Exeptional Web Design"> </div>
<div class="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="default.html" title="Home Page">home</a> </li>
<li><a href="web.html" title="web services" class="MenuBarItemSubmenu">web services</a>
<ul>
<li><a href="web.html" title="web design services">web design</a></li>
<li><a href="seo.html" title="search engine marketing">seo</a></li>
<li><a href="social.html" title="social media consultation">social media</a></li>
<li><a href="email.html" title="email marketing">email marketing</a></li>
<li><a href="hosting.html" title="web/email hosting">hosting</a></li>
</ul>
</li>
<li><a href="print.html" title="print design services" class="MenuBarItemSubmenu">print services</a>
<ul>
<li><a href="print.html" title="print design services">print design</a> </li>
<li><a href="printing.html" title="printing services">printing</a></li>
<li><a href="marketing.html" title="marketing services">marketing</a></li>
</ul>
</li>
<li><a href="photography.html" title="photography">photography</a></li>
<li><a href="gallery.html" class="MenuBarItemSubmenu">galleries</a>
<ul>
<li><a href="web_gallery.html" title="See Some of the Web Sites We've Built">web gallery</a></li>
<li><a href="print_gallery.html" title="See Some of Our Print Design Work">print gallery</a></li>
<li><a href="photography_gallery.html" title="See Some of Our Photography">photo gallery</a></li>
</ul>
</li>
<li><a href="#" title="rimshot blog">blog</a></li>
<li><a href="resources.html" title="resources">resources</a></li>
<li><a href="testimonials.html" title="testimonials">testimonials</a></li>
</ul>
</div>
<div class="right_column">
<p><a href="Contact Form.html"javascript:void( window.open('http://form.jotform.us/form/21766576593165', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))</a><img src="Images/Free-Consultation-Button.png" width="252" height="57" alt="Request a Free Consultation from Rimshot Creative"></a></a><a href="http://www.bnitennessee.com/tn-middle-tennessee-(nashville)-focused-around-business-succes s/"><img src="Images/proud-member-grey.jpg" width="131" height="131" alt="Proud Member of BNI Focused Around Business Success Chapter - Columbia TN"></a></p>
<p><a href="http://www.thumbtack.com/tn/brentwood/print-designers/#sort=popularity&hilite=3h88FmCa:V9o kA" title="Web & Print Design Services" style="background: url(http://cdn-1.thumbtackstatic.com/media/elite_1.png) no-repeat; color: #a5a196; padding: 195px 0 0; border:0; font-size: 13px; font-family: Georgia, 'Times New Roman', Times, serif; text-align: center; text-decoration: none; display: inline-block; width:120px; line-height:15px;"><img src="http://cdn-1.thumbtackstatic.com/media/elite_1.png" style="display: none;" />Web Design, Print Design, Photography, Brentwood, Columbia, Franklin, Spring Hill, TN</a><br />
</p>
<h2>Follow or Share…<br />
<a href="http://www.facebook.com/pages/Rimshot-Creative/251035548260903" target="_new"><img src="Images/facebook button.png" width="32" height="32" alt="Follow Rimshot Creative on Facebook" longdesc="http://www.facebook.com/profile.php?id=100002963257842" /></a><a href="https://twitter.com/rimshotcreative" target="_new"><img src="Images/twitter button.png" width="32" height="32" alt="Follow Rimshot Creative on Twitter" longdesc="https://twitter.com/#!/belleforest" /></a><a href="http://www.linkedin.com/in/rimshotwebdesign" target="_new"><img src="Images/linkedin.png" width="32" height="32" alt="Join Rimshot Creative on Linked In"></a><a href="http://pinterest.com/rimshotcreative/" target="_new"><img src="Images/pinterest.png" width="32" height="32" alt="Start Pinning with Rimshot Creative on Pinterest"></a><a href="https://plus.google.com/101386322992063777741/posts" target="_new"><img src="Images/googleplus.png" width="32" height="32" alt="Join Rimshot Creative's circle on Google Plus"></a><a href="http://youtu.be/75_xggIkLyk?hd=1" target="_new"><img src="Images/YouTube button.png" width="32" height="32" alt="Check out Rimshot Creative videos on YouTube"></a><!--<img src="Images/flickr.png" width="32" height="32" alt="See Rimshot Creative projects on Flickr">-->
<p>
<a href="https://plus.google.com/106267434027606674910/about?gl=US&hl=en-US" target="_new"><img src="Images/Google-Review-Button-No-Shadow.png" width="188" height="47" alt="Leave a review for Rimshot Creative on Google Places" /></a>
<a href="http://local.yahoo.com/info-14947707"><img src="Images/Yahoo-Review-Button-No-Shadow.png" width="188" height="47" alt="Leave a review for Rimshot Creative on Yahoo Local" /></a></h2>
<p>Rimshot Creative helps businesses find their groove through web design, print design, social networking, marketing, search engine optimization, printing, web and email hosting and photography in Nashville, Brentwood, Franklin, Thompsons Station, Spring Hill, Columbia, Mount Pleasant, Lewisberg, Hoenwald, Hampshire and all over Middle Tennessee.<br>
<br>
</p>
<hr size="1">
<p><strong><br>
Rimshot Creative</strong><br>
3313 Booker Farm Road<br>
Mount Pleasant, TN 38474<br>
Phone: (615) 482-5182<br>
Fax:
(615) 752-5956<br>
<br>
</p>
</div>
<div class="left_column">
<h1> Get Your Groove On!</h1>
<p>Helping businesses find their groove is exactly what we try to do every day.</p>
<h2>Layout</h2>
<p>Since this is a one-column layout, the .content is not floated. </p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
</div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .content --></div>
<!-- end .shadow -->
</div>
<div class="addthis_bar addthis_bar_vertical addthis_bar_medium" style="top:200px;left:25px;">
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<span><a class="addthis_button_preferred_1"></a></span>
<span><a class="addthis_button_preferred_2"></a></span>
<span><a class="addthis_button_preferred_3"></a></span>
<span><a class="addthis_button_preferred_4"></a></span>
<span><a class="addthis_button_compact"></a></span>
</div>
</div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script>Thanks for your help.
It is not even on my local files. I would have thought that Dreamweaver would have created that in my local files. I can copy it over from one of my other sites.
1. Do you have any idea why it would not have been created?
2. What would be a way to resolve this if I didn't have this file on some of my other sites?
3. How did you determin that the file was not found on the server. I haven't seen any errors with any of the tools that I've used to analyse the site. -
Target Spry RowID on page with Multiple data sets from another page
Hi all,
I am trying to target a specific data item, on a page with
multiple data sets, from a link on another page. (I also have to
pass the link through Flash, but lets start with the simple
part...)
You can take a look at the site in progress here:
http://www.3andband.com/TestSite/iframeTest3.html
From the Home page I want to link to specific news or concert
items on the News page
I have been trying to get SpryURLUtils to do it but I can't
seem to get it working.
Any help would be greatly appreciated.
Thanks!
Bendid u try if it even passes the row value?? with a simple
alert? alert(params.row)
Also maby u need to reorder the scripts to this;
<script src="../SpryAssets/SpryURLUtils.js"
type="text/javascript"></script>
<script src="../SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryCollapsiblePanel.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
and your js script
var params = Spry.Utils.getLocationParamsAsObject();
var dsConcerts = new
Spry.Data.XMLDataSet("includes/concerts.xml", "Concerts/concert");
dsConcerts.setColumnType("image", "image");
var dsNews = new Spry.Data.XMLDataSet("includes/news.xml",
"News/item");
//Set an observer so that when the data is loaded, we update
the current row to the url param value
dsNews.addObserver({ onPostLoad: function(ds, type) {
dsNews.setCurrentRow(params.row); }
function MM_effectBlind(targetElement, duration, from, to,
toggle)
Spry.Effect.DoBlind(targetElement, {duration: duration,
from: from, to: to, toggle: toggle});
So url params get loaded before the data
Maybe you are looking for
-
Rich Domain Model and Local JNDI Lookups
Hi, I'm sure this is a problem a lot of other people have come across but there seems to be very little coherent discussion on the issue, so I'd very much appreciate any views people might have on the matter. The problem is whether or not you comprom
-
How to use txt files in jar file
Hi all I just made a program that uses a text file, but I havent managed to work it correctly, program runs without jar correctly, but when I packaged all files into a jar, it couldnt find txt file, so I can only run it when I create another text fil
-
Cannot sync ATV1 Purchased Movies with iTunes
I have recently purchased 5 movies via my ATV1. I cannot sync or get my purchased movies into itunes. They are not in my itunes folder and I have no available downloads. They used to always automatically appear in my iTunes folder, but not anymore.
-
8520: problem to update OS 5
Hello No possible to move my 8520 to OS5 Desktop offers me only OS4-6 or older version the same when I try updating online thank you for any help or tutoriel or information
-
How to create restore cd or recovery cd for macbook pro
how to create a recovery cd or factory cd of macbook pro