Accordion Menu & Firefox

I am using Dreamweaver CS3 along with Spry 1.6.1
I am using an accordion menu with 4 tabs and they transition
fine in IE7 but in Firefox there is a problem. The menu works fine
but it expands the site as if all 4 panels are open at one time.
Then when I click on the accordion menu the site collapses back
together.
If I change the height under the .AccordionPanelContent class
in the CSS file it helps but that affects the menu in IE if I do it
that way.
Any ideas why it would cause the web page to spread apart
when first loaded up in Firefox?
Thanks!

Do you have a sample URL that demonstrates the problem?
--== Kin ==--

Similar Messages

Wobbling image under accordion menu

So the saga continues :)
I am using an accordion menu (about 150px x 300px) on the
right hand side of my page. It has three items when each one opens
downward they contain separate links within. Directly beneath this
accordion menu is a simple jpeg image. The problem is when I use
the accordion menu the image underneath it (not a background image,
it's positioned under the menu) wobbles as the accordion effect
animation of opening takes place. It looks almost as though the
accordion effect is coming out from the top of the image (which it
is not because the image is placed some distant from the bottom of
the menu.
Is there a way I can prevent this from happening?

Well it seems this anomaly only occurs in Safari. What I have
noticed in Firefox though is a white dotted border goes around the
spry accordion menu after it's been activated, presumably because
it's Ajax. I'm not sure how to prevent that from happening.
So far I'm not terribly satisfied with this spry
widgets.

Spry 1.4 accordion menu issues with IE

Hi everyone, I've been checking around for an answer to this
but havent found anything so if you know where on the dreamweaver
database the answer is PLEASE send me a link. Now for the problem,
I am using dreamweaver cs3 on a mac. i build an accordion menu that
i'm pretty happy with, i changed up the css to make it match my
site. I didn't change much except for the colors and background
images. I though it was perfect and ready to launch but after i did
one final test on ie i discovered it was WAY Messed up. To see what
I mean visit:
https://www.sendoutcards.com/cgi-bin/trncustomer.pl?static_new_system_training_webinars
in firefox/safari/opera the visit it in IE.
it is a perl page with an area designated for html. in this
html area is where i linked to the css and javascript for the
accordion and NOT in the actual head of the page. I spent a day
cussing at IE so if you have any answers or suggestions I'm very
open!
Thank you,
Travis

Hi everyone, I've been checking around for an answer to this
but havent found anything so if you know where on the dreamweaver
database the answer is PLEASE send me a link. Now for the problem,
I am using dreamweaver cs3 on a mac. i build an accordion menu that
i'm pretty happy with, i changed up the css to make it match my
site. I didn't change much except for the colors and background
images. I though it was perfect and ready to launch but after i did
one final test on ie i discovered it was WAY Messed up. To see what
I mean visit:
https://www.sendoutcards.com/cgi-bin/trncustomer.pl?static_new_system_training_webinars
in firefox/safari/opera the visit it in IE.
it is a perl page with an area designated for html. in this
html area is where i linked to the css and javascript for the
accordion and NOT in the actual head of the page. I spent a day
cussing at IE so if you have any answers or suggestions I'm very
open!
Thank you,
Travis

Accordion menu spry link not working

I built an accordion menu spry using Dreamweaver CS5. I noticed that the navigation labels on the accordion menu cannot be linked to pages. Please see the Overview link on the accordion menu and notice that it does not not go to 'overview.html' as I added in the code. What am I doing wrong?
Thanks. Any help is greatly appreciated.

I see this in your spry css file - you might try removing the two user-select entries
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
     background-color: #FFF;
     border-bottom: dotted .5pt gray;
     margin: 0px;
     padding: 6px;
     cursor: pointer;
     -moz-user-select: none;
     -khtml-user-select: none;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 9pt;
     background-image: url(../images/mykcurve_expand.gif);
     background-position: right;
     background-repeat: no-repeat;

Horizontal Accordion Menu

Hey,
I really need this..and would extremely appreciate the help.
A horizontal accordion menu for one of my pages.
Example (its Javascript, I need AS)
TGI Friday
Menu
Please help.
Thanks,
Steven

What specifically are you concerned about?
Works fine here in IE8 and Firefox.
The only comment I would make is that it's not obvious that the text "Lyndon Hall Stables...etc" are clickable buttons. I thought they were plain text since there's no visual prompt that they're buttons and the cursor does not change to a hand on mouseover.
Took me a while to realize what I was looking at. I actually had to check the source code to see where the accordion is.

Is there a way to expand all the options in the accordion menu?

I would like to have all the tabs in the accordion menu expanded. Is there a setting or button to have all the options expanded? Thanks.

thanks trying to help out people if i can, if you put all the years into one accordion rather than a series of accordions then you could open/close the whole lot at once, what about grouping the years into three accordions, 1998-2003, 2004-2009, 2010-2015, so at least theres a good chunk of information available / visible initially?

Where can I find a horizontal accordion menu tutorial

I have googled all day looking for a horizontal accordion menu for javascript and haven't found an actual tutorial. I have found downloads, but I want learn how to make one.

Just to clarify, Accordions are collapsing panels (not a menu system per se).
Spry Accordion Panels Widget
http://labs.adobe.com/technologies/spry/articles/accordion_overview/
Working with Spry Horizontal Drop-Menu widget
http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
Making a JQuery Mega Menu
http://www.sitepoint.com/make-a-mega-drop-down-menu-with-jquery/
jQuery Superfish Menus
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Using an image as label in Spry Accordion Menu

I was wondering if it was possible to use an image instead of
text in the spry accordion menu. I have replaced the text that is
there with a roll-over image link however I'm unable to label it
since it uses the text as the label and therefore can't set the
default panel I want opened. Is there a way to do this? Thanks for
your help.

Stefaan Lesage wrote:
Is this possible with Pages 09 ? And can I achieve this ?
Is it possible to look at the Help or at the Pages User Guide
In the English one, page 17, we may read:
• Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32)

Spry Accordion Menu Tab Link css - totally confused

Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Photo Gallery</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="PhotoGallery.html">Gallery 1</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Unit Newsletters</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="Newsletter.html">February 2010</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Forms</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="">Joining Instructions</a></li>
    <li><a href="">Enrolment</a></li>
    <li><a href="">Next of Kin</a></li>
    <li><a href="">Volunteer Blue Card</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="WhatsOn.html">Whats On</a></li>
    <li><a href="PSG.html">Parent Support Group</a></li>
    </ul>
    </div>
    </div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;

Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;

Accordion menu HELP - sorry, very urgent

Good afternoon, first I would like to say that I'm a completely newbie in this things, sorry for that. I'm trying to expose my question in the most simple way:
I want to make a Accordion menu, where in the content boxes appears no only one space to work and put a link and images, but more, how many as I want. Is correct putting a table inside the content box and make rows? Is there any other way to build this correctly? I tried the Vertical Menu Spy, but I don't like it because I want this to work like the accordion... don't know if I make myselfe clear, sorry the bad english. Hope some one can help! Thanks
PS: there goes an image to explain better

DW Sprys and Accordions are difficult for experts to use. If you don't have a good knowledge of HTML, CSS and JavaScripts yet, you may be better off using a commercial product.
Project Seven Accordion Panel Magic 2
http://www.projectseven.com/products/tools/accordion2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Missing options of "Enter Private Browsing" "Open new tab" and "Open new window" when right click (right context menu) firefox icon on taskbar

Missing options of "Enter Private Browsing" "Open new tab" and "Open new window" when right click (right context menu) firefox icon on taskbar.
i already tired complete uninstall and reinstall, but the options are still missing.
print scr: http://www.freeimagehosting.net/9znkp
Thank You in advance for help. Best regards

Hello,
''jstavene wrote:''
can find nothing under the tools menu for private browsing?
Then it's not the same issue.
If Firefox is set to '''Never remember history''', then you're in “permanent private browsing” mode, in which case the menu item ''Stop Private Browsing'' will be grayed out. Perhaps that's the case, and you don't find the menu item easy to see?
* [[Settings for privacy, browsing history and do-not-track]]
If that's not the case, then menu items can be hidden using the userChrome.css file. Check if it exists, and if it's there, rename it, then restart Firefox.
* http://kb.mozillazine.org/UserChrome.css
In Firefox Nightly (what will become Firefox 20), per-window private browsing has been added, so the menu item under the Tools menu is gone. It's been replaced by New Private Window under the File menu. I don't suppose it's very likely that you're using such a cutting-edge test version of Firefox though.
If that doesn't solve the problem, since it's a different issue, it would be best if you would ask a new question.
* https://support.mozilla.org/questions/new

Accordion menu widget behavior and contents

I'm working on an accordion menu that is then used in a DPS folio created in InDesign.
The accordion menu resides on the Master Pages of the articles/documents, 6 articles total.
When the label is tapped, the accordion menu expands open >
The label is also a link that takes the reader to a page within the folio while expanding (using the navto://documentname#page formatting) >
Inside the content area of each label are subtopics that also navigate to different pages within the folio (also using the navto://documentname#page formatting).
My desire is that when a label is tapped and expands, the reader can then click on each subtopic and go to that page without the accordion menu collapsing as it goes to the page.
I'm finding that 99.9% of the time, the menu is collapsing. Other times I get the exact performance I desire.
I'm Ok with the menu collapsing as each label is tapped, but not the subtopics.
I've played around with setting the accordion properties by unchecking "Collapse All" and unchecking "Edit Together", but can't seem to edit these sections or the text boxes individually. It either sets ALL items in the accordion menu to Collapse All or not. No mixing of the two settings.
Is there a way to get the desired functionality, outlined above, with the accordion menu widget?
TIA,
Hunter

You can either use separate accordions for sub topic or you would need to go with unchecked collapse all and then manually edit all contents.
Thanks,
Sanjit

Accordion Menu to display image

Hey guys,
I am in desperate need of some knowledgeable direction. Many thanks up front for any help!!!!!
Situation: I am designing my company's resume page: 3 or 4 names within 6 different departments in an accordion menu.
Currently: I have a two level accordion menu on the left (department and then names within the department.) and a anchored DIV tag on the right.
Goal: When the user clicks on "Bob Example" text link in the "Engineering" department tab (accordion menu), I would like for it to open a picture of "Bob Example" on the right hand side.
Problem: I've named the anchor DIV tag, "biopic" and targeted the link the same name, however, when I click on the "Bob Example" text link - it opens the picture in a separate window. I have played around with targeting so much my brain is now mush.
Can anybody shed some light on why the "Bob Example" pic won't open on the right hand side?

That link isn't much help.
All the assets are pointing to files on your local Z drive instead of the site folder.
<script src="file:///Z|/Desktop/NEW WEBSITE/SpryAssets
/SpryAccordion.js" type="text/javascript"></script>
If your site is properly defined in DW, that shouldn't happen.
Setting Up Local & Remote site folders in DW
http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ff e.html
Nancy O.

Accordion Menu - Submenu position issue

Hello,
I've created an accordion menu that resides in the top right corner of my website. I seem to be getting various undesired results when previewing the site.
Desired layout: Build mode
Undesired Result: Page Preview
Undesired Result: Site Preview
The top level sites work fine but when I move the submenu to the left of the menu using the X position, then preview the page or site, the submenus show up either right over the menu or way off to the left of the site, almost completely off the page. I have no idea why, please help.
Jeff

Hi Sanjit, thank you for your reply.
The first image is a from the Design View, the second is a page preview in browser and the final image is a site preview in browser. My default browser is Safari (also testing in Chrome however).
If I leave the menu with default settings, the submenus appear off the site's live area and when I preview they do not show up at all. Presumabley they are off to the right side of the site.
The menu is and has been set to "All Pages" and not manually throught my build. Other than plaving the vertical menu widget within the accordion widget, it is more or less default with exeption of some styling.
I will try to rebuild the menu and see if the problem is still occuring. If you have any further sugestions I would be happy to hear them.
Thnaks again

Accordion Menu - need to control which panel opens

I have an accordion menu that works fine but when I put it
into action
on the site, I realized that I needed the accordion to open
up a
different section on each new page.
Since I have the accordion menu in an SSI (server side
include) I don't
want to have a different spry asset for each page. However, I
think
setting a session variable would work to control which
section is opened.
Anyone done this? What would it look like?

quote:
Danilo Celic wrote:
Try this page:
http://foundationphp.com/tutorials/spry_url_utils.php
Thanks a lot. This web page gave some answers, but now I have
a new problem:
When I test my accordion menu in a normal html page
everything works fine. When I put this accordion menu to my DW
template it stops working. The result is that every accordion's
panels are open!
Why? Can you assist me?
In template head I have this code:
<link href="../SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
And in template end just before </body> tag I have this
code:
<script type="text/javascript">

</script>

Accordion Menu & Firefox

Similar Messages

Maybe you are looking for