Dreamweaver template Spry Accordion displays error on Firefox

Hi,
I downloaded and try to use the template 02 with Dreamweaver CS5 from
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
However, when I try to browse the theme_02_design.html in firebox, the spry accordion is corrupted ( see image) ,
it didn't displays as the way it looks in here: http://www.adobe.com/devnet-archive/dreamweaver/articles/dreamweaver_custom_templates/temp late2/Publish/theme_02_design_from_template.html
I already finished the whole editing to create a new site and it works perfectly fine in google chrome and IE.
I only browse the theme_02_design.html in firebox and it doesn't look right already.
Or is this template doesn't work well with firefox? How should I fix this problem?
Thanks a million for any help, appreciate it.

#1 Validate code with the tools below and fix reported errors.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
#2 Upload your test page and dependant files to a web server space you control.
#3 Come back to the forum & post the URL to your page.
Nancy O.

Similar Messages

Spry Accordion Display Issue

Hi guys
I have tried to implement a Spry Accordion function using DW CS3 to allow me to display current and previous news on a website, however I am having issues with getting it to display properly. You can view the page here: http://www.amiante.co.uk/news.html
When testing the site in various browsers I noticed a glaring issue, underneath the According there is a massive white space, which to me appears to be the space that would be taken up if each panel of the according were to be opened at the same time....
This issue occurs in Firefox 3.5.3, Safari 4.0.3, Opera 10.0 and Google Chrome 3.0.195. It seems to work faultlessly in IE 8, IE 7 and IE 6.
The confusing aspect is that if you zoom in (ctrl +) and zoom out (ctrl -) it seems to remove the white spacing.
If anyone has any idea of what is causing this I would be delighted to hear from you!
Thanks in advance.
Mackenzie

Thank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
the files are under:
images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
Thank you so much, I do greatly appreciate your kind help.
the other one is
The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
Thanks again for helping an newbie, I appreciate it.

Why Is Dreamweaver CS4 Tooltips Not Displaying Properly in Firefox?

Hello,
I used tooltips to provide answers to questions on my "Frequently Asked Questions" page (there are 19 questions).
In IE, the pop up displays in the default setting as each question is moused over.
However, in Firefox, the pop up window stays at the top of the screen. So by time you mouse over question 5, the top half of the pop up is at the top of the page and cannot been seen. As you go further down the page, the pop up cannot be seen at all because it stays at the top of the page.
I would really appreciate any advice on how to make the tooltips display properly in Firefox. Thanks, Theresa

function(){return A.apply(null,[this].concat($A(arguments)))}
Do I need to publish the site before these kind of problems can be resolved?
It's usually the quickest way to get an accurate answer.
You're describing page behaviour which doesn't have an obvious cause since it depends on your code syntax and structure. If we can see what's going on, we can probably isolate the issue.
Showing is always better than telling.

Make all Tabs on Spry Accordion display 'closed'

I used Dreamweaver CS5 to add a Spry Accordian widget to my page. I would like all tabs to display 'closed' when the page is first opened. I am new to web work, and don't know where or how to change the code to do this. Help?!

Okay. I found it.
At the bottom of the code for my page I found:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Product_Line");
</script>
I changed it to:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Product_Line", { useFixedPanelHeights: false, *defaultPanel: -1* });
</script>
When I saved that change and then previewed it, instead of all the Tabs starting out CLOSED - ALL the Tabs displayed OPEN!!
What did I do wrong?

Dreamweaver Template not updating pages error code 2?

Hi All
I wonder if someone can help me - I have a site that i made with Dreamweaver. I then got a new computer (windows 7) and updated my dreamweaver from cs4 to cs5. I have just tried to update my pages and it doesnt seems to be working.
Not sure what information you need - but I have a root folder and within the root site there is a folder with Templates and the templates have the extension .dwt
I have read some posts that say recreate the cache which i have tried - this hasnt worked
I then read another post that says you can update the pages by Modify > templates > Update Pages..
When i tried this I get the update dialog box, but when i try to update the pages i get the following error message:
"error accessing file - (name of the dwt file), file not found, error code 2"
Can i ask the what is the error code 2 - i mean is there any information about the error code which will help me to resolve my templates not being found? as i am bit stuck...
Would appreciate any help on this and thank you in advance
Regards
Lorna

I would like further help with the issue Guy McMickle identified.
When I update links to my two template files I receive the above Error Code 2 message four times. There are 22 page files based on these templates.
The <!-- InstanceBegin template... code does not exist in either of the template files. I does, however, show up in every one of the 21 files that were created from one of the two templates. In these files it shows up in uneditable header code.
Why does the error code only show up four times? If the instanceBegin code is only generated when a file is created based on a template, how can it be avoided or corrected?

Dreamweaver CC Tutorial Site Display Errors in IE11

Hi all
Have recently started getting to grips with Dreamweaver CC through this tutorial:
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
I am something of a beginner here, but I've been doing really well with this tutorial series - that is until I started testing the site in IE11. Up to that point I was using my default browser of Chrome and everything was displaying perfectly. I even went on to start producing my own pages with some success (these pages also displaying in the same way in IE11, can provide details if needed).
I have since tested my own tutorial page builds and the completed pages supplied with the tutorial and when they display in IE11 the navbar appears vertically staggered like a series of steps (see attached screen grab). I've done as much digging as I can, but can't find any solutions. The code looks good (both HTML and CSS) as far as I can tell from a novice perspective, and it displays fine in Chrome, but not IE11.
I'm assuming it's something to do with the CSS code, specifically the float attributes, but would welcome any insight as I really don't know enough to make an informed observation.
I haven't attached any code as everything is available from the tutorial link above.
As an aside, the Adobe Edge Fonts don't seem to load either, but that is a secondary concern at the moment (unless it proves to be part of the same problem).
Thanks.

Unfortuantely sourcelabs.com does not give the option of testing IE11 on windows 7 so I cant be of much help here.
One thing you might want to try is floating the <li> tags - add the below to your css stylesheet.
li {
float: left;
margin: 0;
padding: 0;
list-style: none;
width: 20%;
David Powers is pretty good when it comes to his tutorials and they are usually thoroughly tested. As I say in a simulated windows 8.1 envrionment in IE11 the nav looks fine BUT of course its better to test in the real thing.
EDITED: Try the below combination of css if you have no success finding a solution:
#mainnav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
#mainnav li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 20%;
     background-color: #4D4D4D;
     text-align: center;
#mainnav a {
    display: block;
    width: 100%;
    background-color: #4D4D4D;
    color: #FFFFFF;
    text-transform: uppercase;
    padding-top: 6px;
    padding-bottom: 6px;

Spry menu bar error in firefox....driving me nuts!

First of all, thank you in advance for all your help. I have a problem that I can't fix and it is driving me insane.
I have vertical spry menu bar that shows a scroll bar on mouse over in firefox. Here's what driving me insane. A buddy of mine came to me with this problem on his website http://www.fransky.com a while back and I fixed it. But I can't remember what I did. Now he has a new domain and moved the site to the new location http://www.franskyselfdefense.com The old one is still up and running and works fine in firefox. The new one has the srcoll bar over the buttons on mouse over again in firefox. SpryAssets are the same. Identical pages uploaded to either website will work on the old site - and will not work on the new location. I can't find a major difference in the uploaded folders. I thought it must be a site wide configuration but I can not find anything.
It is getting to me guys, can you please help. I tried everything I could think of and I can't, for the life of me, remember what I did the last time. I know that the site has a lot of trash in the code. Was my buddies first shot and he changed and deleted a lot in the process and there is a lot of resedue in the code. We will start over in time, now that he knows what he wants, but I need to get this working for him. It's his source of income and I don't think I have enough space for him and his family as new roommates :-)
I fixed it before and I am not that smart, obviously or I would remember.
Any idea?
Thanks again,
Max

One more thing that I forgot. We moved the online store to the new location. The better link for the comparison is http://www.fransky.com/shop.html because it has all the sub items too and is just an older version of the http://www.franskyselfdefense.com/index.html with a little bit different content, but no major changes in the menu bar.
I uploaded the new index up to fransky.com as http://www.fransky.com/index75 as comparison and you can see that it works just fine there.

Error accessing file template file not found (error code 2)

We have 3 admins that work on the website so we use the Check In/ Check Out feature of DW. We all have DW CS6.
When I update the template I have no problem (I work on a mac). However, if one of the other admins (Windows) tries he gets the following message: Error accessing file template file "C:\filepath\filename.dwt": file not found (error code 2).
I looked at this thread: Re: Dreamweaver Template not updating pages error code 2? but the only solution offered there is to change the template tag from <!-- InstanceBegin... to <!-- TemplateBegin... If this is the solution, how do you do this?
When I go to the url of the template http://www.christophorushouse.com.au/Templates/chrv-main-template.dwt it says it's been (re)moved or renamed, but then I have a feeling you can't view/access a template this way. All pages of the website feed of this template.
Any help would be appreciated.
Thanks

We have 3 admins that work on the website so we use the Check In/ Check Out feature of DW. We all have DW CS6.
When I update the template I have no problem (I work on a mac). However, if one of the other admins (Windows) tries he gets the following message: Error accessing file template file "C:\filepath\filename.dwt": file not found (error code 2).
I looked at this thread: Re: Dreamweaver Template not updating pages error code 2? but the only solution offered there is to change the template tag from <!-- InstanceBegin... to <!-- TemplateBegin... If this is the solution, how do you do this?
When I go to the url of the template http://www.christophorushouse.com.au/Templates/chrv-main-template.dwt it says it's been (re)moved or renamed, but then I have a feeling you can't view/access a template this way. All pages of the website feed of this template.
Any help would be appreciated.
Thanks

Incontext Editing: Spry Accordion

Editing content in Dreamweaver's Spry Accordion is distorting the functionality of the widget (Version 1.61.) Can this be fixed?

Hello chandra111,
Please elaborate on the behavior you're seeing with the Spry widget and InContext Editing. Can you provide steps the recreate the problem?
Also, please make sure you're using InContext Editing and the Spry widget according to the following tutorial: http://www.adobe.com/devnet/dreamweaver/articles/spry_dynamic_dw_site.html
The fourth page of the tutorial specifically discusses working with the Spry Accordian: http://www.adobe.com/devnet/dreamweaver/articles/spry_dynamic_dw_site_04.html
Best regards,
Corey

CS3 Spry Accordion Link Color

Greetings:
I am attempting to change the link color to "none" within a
Dreamweaver CS3 Spry Accordion navigational element and I am unable
to make the changes I need. I have tried to change the internal
link page properties within my HTML document and also set the "a"
properties in the linked CSS file to "text-decoration: none" and
the link color still remains in the Accordion navigational element.
Do you have any suggestions on how I can fix this?
Thanks for your help!

in your spy accordian css file, put:
a:link
text-decoration:none;
or, even better
.nolinkunderline
text-decoration:none;
and then apply the style to your accordians hyperlinks
i am assuming it's the underline element that you want
removed

Spry Accordion(or Template?) error

I did some validation to one of several pages that occasionally have problems when I update the Master template page to my site(they look like this: http://njsustainingfarms.rutgers.edu/agclass1.html) , and the one error I got was for something in my spry accordion menu(which seems to be working fine):
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
It's telling my contentA is null.
Now, I know next to nothing about javascript, so I am pretty much stumped on how to resolve this.
The one other thing I should note is that in design view, it shows that I have a duplicate head region(which is also editable except for the tags), but that is not so in the master template page.
Any help would be much appreciated, as i've been battling with this issue for some time, and i'd like to try to figure it out once and for all.
P.S.- I'd offer to attach the .dwt file, but I can't seem to find out how to do that on this forum.

codeOutsideHTMLIsLocked="false" -->
That says that anything outside of that area can't be modified, right?
Nope. It says anything outside that area is editable, i.e., it's treated as an editable region. This is the default behavior for a DW template and it allows you to place server scripting or javascript code above the <html> tag, or below the </html> tag in any child page.
Unless you are using server scripting, or are very advanced in your use of DW, you should never mess with this default setting.

Spry Accordion from theme 6 template Adobe, not viewing in browsers?

Hi
I have just be viewing the spry accordion within a Adobe template Theme 6 link below, I would really like to use this but am a little scared as it doesn't seem to work properly in Safari and Firefox?
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates_pt2.html
Many thanks

Actually I figured it out, it turns out that the browsers don't call for the new .css file, so even if you update it in dreamweaver and it looks fine, the browser didn't get the new file. So if you want the browser to update you have to hold down shift and click the refresh button on the browser and ta-da, it looks the same in dreamweaver. Thanks though!
Jacey

Spry accordion works in template, but not pages using that template

So I added a spry accordion to one of my templates and changed the script to default closed. It works great. In the template. But not in any of the pages using that template. Basically I can see the content in the accordion on the page as if there is no accordion at all. And I can see the script and html telling me an accordion should be there. It just isn't. I can see the framework when in edit mode. But in live mode, it's like there's not there but the content.
I'm using Dreamweaver CS6.
Any thoughts?
Thank you for your time!

If the template has been created properly, then the Spry files should automatically be included in the child page(s).
My template looks like
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


</head>
<body>

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
My child page looks like
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


</head>
<body>

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

Columns in Dreamweaver CS3 Template Pages Not Displaying Correctly in IE8

I have a site that has most pages created with a template page that displays three columns below the navbar (counting a small column to the left for the logo at the top the table has four columns). The home page (index.html - not from the template) displays the same colums as the template pages correctly, but all the pages created with the template show the first column as way to wide and the next two columns as far too narrow.
I have trawled the internet to find a solution, but as my knowledge of HTML is limited it is proving near impossible for me to even find a relevant forum topic, let alone a workable solution. All I want is for the template pages with three visible columns below the navbar to display the same widths as those in index.html.
I am working on a mac and the pages all preview fine in Safari, Firefox etc, but not in IE8 on Windows 7 machines.
I have tried rather indelicately to shove various bits of code in to fix the width of the columns and render such commands as table-layout=fixed etc, but with absolutely no effect.
The site is: www.southoverfoods.com
If anyone can help I will be grateful.

You do want to fix these errors -
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.southoverfoods.com%2Fabout.html&charset =%28detect+automatically%29&doctype=Inline&group=0
Most are straightforward.
If you view the page in IE9, and click on the compatibility icon, the rendering looks right. Unfortunately, I cannot force that rendering with any of the accepted meta tag usages!
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
So I'm a little puzzled what to do....

Firefox Spry Accordion widget

Firefox Spry Accordion widget
Hello, I am trying to use Spry Accordion widget. When I click one of the other panels they all turn a strange neon blue color. Anyone know of any fixes?
The below is the index page and below that is SpryAccordion.css
index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Conferences</title>
<script src="SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outside">
<div id="outsideone">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">
<p>Content ssss</p>
<p>lkajsdfl</p>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

<div id="photo"></div>
<div id="contentholder">
<div id="contentsone"> <div id="moreone">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div> <div id="insidecontentsone"></div></div>
<div id="lineone"> </div>
<div id="contentstwo"> <div id="moretwo">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div>
<div id="insidecontentstwo"></div></div>
<div id="linetwo"> </div>
<div id="contentsthree"> <div id="morethree">
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div><div id="insidecontentsthree"></div></div>
</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 1 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { defaultPanel: 1 });
var Accordion3 = new Spry.Widget.Accordion("Accordion3", { defaultPanel: 1 });
</script>
</body>
</html>
SpryAccordion.css
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
overflow: hidden;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-right-color: none;
border-bottom-color: none;
border-left-color: none;
background-image: url(white.png);
background-color: none;
border-top-style: none;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
background-image: url(white.png);
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* 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: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 0px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(white.png);
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
background-image: url(white.png);
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #none;
background-image: url(white.png);
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
background-image: url(white.png);
.AccordionPanelOpen .AccordionPanelTabHover {
color: none;
background-image: url(white.png);
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: none;
background-image: url(white.png);
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: none;
height: 15px;
background-image: url(white.png);
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
background-image: url(white.png);
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-image: url(white.png);

Welcome to the Forum!
If you can upload your page to a server and give us a link, we will be able to look at your page in action. Just seeing the code is not enough.
Is this the first time you have used an Accordion? It is probable that the bright neon blue you are seeing is the default style, which you can change in the CSS file. I believe it was designed that color to highlight the feature you want to change .
Take a look in the Accordion's CSS file (it will show as an associated file at the top of your document window) for color rules, and adjust them to suit your palette (and your palate!). Check out the CSS Styles Panel (use Current mode) for a handy way to know what you are looking at. Click on the Accordion in Design View and the rules will be highlighted in the CSS Styles Panel. (Click the right-hand stair-step icon to see the style cascade.)
Beth

Dreamweaver template Spry Accordion displays error on Firefox

Similar Messages

Maybe you are looking for