Spry accordian problems in IE

I have created a website that uses the Spry accordian effect that has been modified to be used for sections for the site.
I have tested it on all browsers however found out that the spry accordian doesn't work in Internet explorer.
I have noticed there seems to be many problems regarding spry and IE, but not come across any that have definitive answer for my problem.
www.slicedesign.co.uk
Is there anybody who could shed some light ont his for me?
nathanslice

Hi,
I've looked at your site on IE7 / IE6 and Firefox 3.0.1 on my PC.
I suspect some of it might be down to the following bit of styling in your accordian CSS
.Accordion {
    overflow: hidden;
    height: 640px;
IE6 incorrectly interprets height as min height.
Try changing it to
.Accordion {
     overflow: hidden;
     min-height: 640px;
/* for IE6 and below */
* html .Accordion {
height: 100px;
Also you have repeated IDs when they should be unique within webpage and you have not closed various tags properly. Visit http://validator.w3.org/ and fix the markup errors and then let's see what your page then looks like. Internet Explorer is very fussy about closing tags properly and can stop rendering the page when it finds an error where as Firefox etc are more tolerant and can still rneder the page properly.
Cheers
Phil

Similar Messages

Spry Accordian Problem

Hi
I created a spry accordion in Dreamweaver CS4,
http://www.corpclean.com.au/faqs/index.htm
which works perfectly in Safari. However, Firebox and IE, once it
is click on, the whole thing seems to highlight a light blue color.
When you click to the side, it returns to normal.
Any help to stop this color change would be appreciated?
Thanks.

You should edit the SpryAccordion.css file to comment/remove
those colors:
Find these rules in the css file:
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;
Then, you can safely comment the color properties:
.AccordionFocused .AccordionPanelTab {
/*background-color: #3399FF;*/
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
/* background-color: #33CCFF;*/
As a final touch (to remove that annoying border when the
accordion is
focused), you can add this simple rule at the end of the
file:
.AccordionFocused{
outline:none
HTH
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
"afeedback" <[email protected]>
escribió en el mensaje de
noticias news:gk123h$2mf$[email protected]..
> Hi
> I created a spry accordion in Dreamweaver CS4,
>
http://www.corpclean.com.au/faqs/index.htm
which works perfectly in
> Safari.
> However, Firebox and IE, once it is click on, the whole
thing seems to
> highlight a light blue color. When you click to the
side, it returns to
> normal.
> Any help to stop this color change would be appreciated?
Thanks.
>

Problems with spry accordian widget in CS5

I am updating a client's website and am having problems with the spry accordian widget. I read that it has been replaced with jQuery in the latest version and am told I can modify my existing spry widgets but cannot add new ones. In trying to modify the existing widget I get error alerts. I guess adding a new accordian tab is not considered a modification of the existing widget. I only have CS5 version of DW. What to do? Thanks in advance for your help.

Hi Patricia,
you with your CS5 can continue to use the spry accordian widget BUT it's inopportune. I quote from different contributions of the forum: "Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future.” So I/we recommend you to switch to a jQuery library for your further requirements."
You may have a look here: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm, where you will find a wide range of different menus.
On the other hand - to become closer with your problem - you could send us the link to your website in question.
Hans-Günter

How to apply different styles to multiple spry accordian panels?

Hi all,
I have a website that I'm building that has multiple spry accordian features on it.
I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
I hope all this makes sence below is my source and CSS Code.
I appriciate any help that can be given to help resolve this issue I am running in too.
Source Code
<div id="content">
<p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
<p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
<p class="content_txt"> We have two packages available for our customers;</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
   <p>Text Goes Here</p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
      <div id="Accordion4" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
     <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
</div>
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 {
          border-left: solid 1px gray;
          border-right: solid 1px black;
          border-bottom: solid 1px gray;
          overflow: hidden;
/* 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;
/* 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 1px gray;
          margin: 0px;
          padding: 2px;
          cursor: pointer;
          -moz-user-select: none;
          -khtml-user-select: none;
/* 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;
/* 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: #EEEEEE;
/* 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;
.AccordionPanelOpen .AccordionPanelTabHover {
          color: #555555;
/* 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: #3399FF;
/* 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: #33CCFF;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg1.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg1_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry1.png);}
#Accordion2 .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry1_ro.png);}
#Accordion3 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg2.png);}
#Accordion3 .AccordionPanelTabHover,
#Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg2_RO.png);}
#Accordion4 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry2.png);}
#Accordion4 .AccordionPanelTabHover,
#Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry2_ro.png);}

Okay guys,
I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
However if for some reason you want to put one accordion inside another like I did e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
</div>
</div>
</div>
Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
CSS
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry.png);}
#Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
height:44px;
width:469px;
background:url(../images/packages_spry_ro.png);}
Normally when styling two seperate spry accordions you can just use the following code
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
Hope this helped anyone who was having the same issue I was.

Spry Accordian properties not editable in CS3

Hi all
Long time since I posted here :)
Got a problem with the Spry Accordian in CS3 - the properties
don't show
up so I can't edit the panels (except directly) and can't
stipulate
the default state, like open or closed etc. The only option,
if one can
call it that, is "remove the animated accordian".
Does anyone know if this is a known issue or just something
I've done wrong?
Thanks all,
Judi

Got it sorted thanks - well, on my Vista machine anyway.
"Judi Kruger" <[email protected]> wrote in message
news:fgerba$5ed$[email protected]..
> Hi all
>
> Long time since I posted here :)
>
> Got a problem with the Spry Accordian in CS3 - the
properties don't show
> up so I can't edit the panels (except directly) and
can't stipulate the
> default state, like open or closed etc. The only option,
if one can call
> it that, is "remove the animated accordian".
>
> Does anyone know if this is a known issue or just
something I've done
> wrong?
>
> Thanks all,
> Judi

Spry Accordian and Flash

I'm working on a Spry accordian that will display text and
Flash audio players. Unfortunately, the Flash audio player only
shows within the default tab only-not any of the others. I believe
this is part of Flash trying to conserve system resources. Some
browsers don't give pages and windows that are in the background
(or not visible or "below the fold") any "resources." Only the
visible objects are given resources. So this I think also applys to
accordian windows other than the default. Ordinarily, refreshing a
regular page with Flash audio players scattered about would fix it,
but with a Spry accordian it just reverts back to the default tab.
Hope this makes sense.
Can anyone suggest a workaround?

Hi,
what Spry version do you use? If you have Spry 1.4 we had a
bug for Accordion that was fixed on Spry1.5.
If your Spry version is 1.5 please give us an url to see your
problem.
Thanks,
Diana

Controlling visibility of Spry Accordian

Hi,
I have created 2 spry accordians for my site here :: www.octopusdesign.net/embedded.html and am having a problem with their presentation.
After the page has loaded the spry panels are laid out and then they collapse leaving one visible panel. The problem is that I don't want to see the accordian at all until it has been collapsed. I tried using CSS to set the visibility to hidden initially on creation and then to visible at the end of the onload handler. This is slightly better, but you still see the page become stretched (as the accordian is laid out invisibly) before the page resumes it's correct size and the accordian becomes visible.
Then I tried setting display = none in the CSS with display = block at the end of the on load handler. In this instance the accordians never become visible.
Any advice on how to manage this better would be greatly appreciated. I'm using Dreamweaver CS3.
Thanks for listening,
Chris

Hi,
Depending upon another context attribute condition get th ecolumn ref of the alv field which you want to hide and set the visibility property to none.
data : lt_columns type SALV_WD_T_COLUMN_REF.
Get the column ref
CALL METHOD lo_value->if_salv_wd_column_settings~get_columns
    RECEIVING
      value = lt_columns.
CALL METHOD lr_column->set_visible
        EXPORTING
          value = cl_wd_uielement=>e_visible-none.
Thanks,
Shailaja Ainala.

Lightbox 2 and Spry Accordian

Hello,
Does anyone know if there might be an incompatibility issue
with lightbox 2 and spry accordians with Explorer?
compare these 2 pages in explorer
http://www.pearceco.com/bowdoin_square.html
http://www.pearceco.com/bowdoin_square3.html
click on the one bedroom floorplan link (right hand side) in
each
In Explorer on a pc in the second page (the page with the
accordian) sometimes the page won’t even
open... What is most perplexing is that this all worked
before... go figure.
Please help,
elizabeth

>>>>Any thoughts as to why?
Not without seeing the code.
Can you post a link to the page showing the problem
behaviour?
Regards
John Waller

Incompatibility, Spry Accordians

Hello, Everyone,
Does anyone know if there might be an incompatibility issue
with lighbox2 ans spry accordians using IE?
Please compare these 2 pages in explorer if you happen to
have it (on a pc) :
http://www.pearceco.com/bowdoin_square.html
http://www.pearceco.com/bowdoin_square3html
click on the one bedroom floorplan link (right hand side) in
each
In Explorer on a pc in the second page (the page with the
accordian), sometimes the page won’t even open...
and IE throws a message that the page won’t load and
the operation is aborted. What is most perplexing is
that sometimes the page loads fine and loads fine in all the
other browsers that I have tried.
I have read about this same problem in a blog post where a
woman was trying to combine Lightbox2 and java menus.
Please help, anybody?
Elizabeth

BetsyW. wrote:
> Hello, Everyone,
>
> Does anyone know if there might be an incompatibility
issue with lighbox2 ans
> spry accordians using IE?
> Please compare these 2 pages in explorer if you happen
to have it (on a pc) :
>
http://www.pearceco.com/bowdoin_square.html
>
http://www.pearceco.com/bowdoin_square3html
>
> click on the one bedroom floorplan link (right hand
side) in each
>
> In Explorer on a pc in the second page (the page with
the accordian),
> sometimes the page won?t even open...
> and IE throws a message that the page won?t load and the
operation is aborted.
> What is most perplexing is
> that sometimes the page loads fine and loads fine in all
the other browsers
> that I have tried.
I have Vista 64bit. When I visited the page last night (from
your post in the Spry forum) in the 32bit version of IE, it gives
me that message. If I visit the page in the 64bit of IE, it shows.
I don't know all of the differences between the 32bit and the 64bit
IEs, but I do know that the 64bit IE does not have a Flash player.
Your page has Flash on it, so I'd suggest that you remove the Flash
movie to see if perhaps it's the Flash embedding code and see if
the issue goes away.
In case it matters, on my system, 32bit IE is located at:
C:\Program Files (x86)\Internet Explorer\iexplore.exe
and 64bit is at:
C:\Program Files\Internet Explorer\iexplore.exe
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Accordian Tabs Question

Hi
I'm trying to create a spry accordian menu for a navbar and am having some trouble.
This is the first time I've tried it so I would appreciate any help.
The Client would like the tabs to be:
Home
Students
   High School Students
   College Students
Professionals
Parents/Educators
Seminars
Bio
Q & A Blog
Testimonials
So all they would like High School Students and College Students to be child tabs underneath the parent tabs and all other tabs to be parent tabs.
They asked for a spry accordian.
They want the nav bar to be on the left.
Here is the link to the website online:
http://www.elynncohen.com/index2spry2.html#
and here are my questions:
1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
Any help would be much appreciated!
Thanks!!!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
<meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
"In-transition and considering new opportunities"
"Seeking to make a significant and meaningful career change" />
<meta name="Publisher" content="Your Career Direction, LLC" />
<meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
<meta name="Author" content="Lisa Mark" />
<meta name="Language" content="en-US" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="10 days" />
<meta name="Robots" content="All" />
<link rel="Index" href="index.html" />
<link rel="Site Map" href="sitemap.html" />
<script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body><script type="text/javascript">
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
</script>
<div class="container">
<div class="header">
    <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
    ; display:block;" /></a></p>
    <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
    <p class="clearfloat"> </p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li>
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Home</a></div>
            <div class="AccordionPanelContent">Content 1</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Students</a></div>
            <div class="AccordionPanelContent"><a href="#">High School</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Professional</a></div>
            <div class="AccordionPanelContent">Content 3</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
            <div class="AccordionPanelContent">Content 4</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
            <div class="AccordionPanelContent">Content 5</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Bio</a></div>
            <div class="AccordionPanelContent">Content 6</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Q & A Blog</a></div>
            <div class="AccordionPanelContent">Content 7</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
            <div class="AccordionPanelContent">Content 8</div>
          </div>
        </div>
      </li>
    </ul>
</div>
<div class="content">
<p>Given today's competitive job market, global economy, and changed corporate culture,
we can no longer depend upon others to ensure our professional futures. Choosing or
changing your career direction requires self-reflection, career education and an action plan.</p>
<img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
<ul>
      <br><br><li><strong>Considering your college choices & career options</strong></li>
      <li><strong>Preparing for the world of work after college</strong></li>
      <li><strong>Seeking a new position to further your career</strong></li>
      <li><strong>In-transition and considering new opportunities</strong></li>
      <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
    </ul>
<img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
<br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
<p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
<img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
<div class="sidebar2">
    <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
    <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
     <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
     <p>We provide step by step guidance to ensure your success during the college application, job interview
and decision making process.
</p>
</div>
<div class="footer">
    <div id="footer">
      <h6 align="left"> Your Career Direction, LLC • 96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
    </div>
    <p> </p>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
1. Line 454
<div id="Accordion1" class="Accordion" tabindex="0" style="outline: none;">
2 & 3. Change your code from Line 455 - 491:
<div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Home</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Students</a></div>
            <div class="AccordionPanelContent"><a href="#">High School</a><br/><a href="#" style="margin-top: -30px;">College</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Professional</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Bio</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Q & A Blog</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
          </div>
        </div>
      </li>
    </ul>
</div>
4. Append your HTML for child tabs like this:
<div class="AccordionPanelContent" id="submenu"><a href="#">High School</a></div>
Create a new #submenu css rule in your CSS document and set styling the way you want it.

Spry Accordian with dynamic panels from XML

Hi. I've searched, but haven't seen anybody answer this yet.
I'm trying to build a page that uses a spry accordian to display
data by category. So category 1 is on panel 1 in a spry table with
a link to a spry detail section on the page. Category 2 is on panel
2 in a spry table with a link to the same spry detail section, etc.
I have 2 issues: 1) I haven't figured out how to filter a
single XML data set onto different accordian panels or
2) how to get the same detail region to take links from
different XML data sets on the different panels.
Any help that anybody could give would be VERY much
appreciated.
THANKS!

I did get it working. Please check out..
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=602&threadid=1334877
The key is the Data Set Shell. I use multiple data sets for
each category, in your case department. Then I list the items in
that category to update a detail region. If the above link doesn't
help you please re-post and I can give you some more help.

Spry guru needed! Spry accordian works in ie, safari, chrome but not firefox. Rookie needs help!

Hey guys,
Spry accordian works in every other browser apart from firefox. Clearly I have done something stupid - anyone care to help me out?
URL is :
http://www.recruitercritic.com/bcrwd.htm
Thanks!
jono

G'day Mate,
Just remember the structure for a SpryAccordion.
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
In your case have a look at
    <div class="AccordionPanel">
      <div class="AccordionPanelTab"><img src="http://www.recruitercritic.com/rwdffbox.png" width="425" height="110" border="0" /></div>
      <div class="style21">
        <p align="justify" class="style7"><strong>Flight Centre are committed to providing great travel at the cheapest available price. Their highly trained experts are dedicated to finding the best travel deal for any destination and budget. </strong></p>
        <p align="justify" class="style18"><strong><span class="style7">Simply use RecruiterCritic to find, compare and engage a recruiter or search professional and fill your job vacancy and RecruiterCritic will send you a $1,000 gift voucher as our thanks for you to use for staff travel or as a staff incentive.</span> <a href="Freqflyer.htm">More info</a><a href="Freqflyer.htm"></a></strong></p>
        <p align="justify" class="style18"> </p>
      </div></div>
All you need to do is add the highlighted class
<div class="AccordionPanelContent style21">
Carn the Pies

Spry menu problem - CS6 Dreamweaver

I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.

Also validate the rest of the code in your pages to see if you have any critical errors that need fixing. For example, a missing doc type declaration might explain Spry failures.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices. If you can't get satisfaction with Spry, try jQuery Superfish. It's a better menu system.
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O.

Spry Accordian in navigation

Hi,
I am new to the spry and I am using DW CS 3 from a Mac
(Leopard). It's a cool effect that help designers me who are new to
scripting or no background at all. I am trying to use the Spry
Accordian in my navigation as a vertical menu with sub categories
inside each panel content. My client want to use a specific font so
I cannot use regular fonts inside the accordian. So I am using jpeg
button images as roll over, both inside the panel and panel
contents. I have figured out things like variable heights in
panels, setting default panels etc. and it works well.
However the issue is my client says that on IE on a PC the
whole thing is shaky when navigating, as it jumps around in
transition which I noticed even on my Safari. After searching
through your help forums I saw a similar post and the
recommendation was update the Spry to 1.6. I did that I it seems to
have helped it localy on my computer in Safari. I haven't changed
it on the test site as I wanted an expert from here to look at it
and let me know if I am on the right track or if I need to do
anything else.
You can see what my client is referring to when you are in
OUR PEOPLE category (select a bio) and then try to select OUR
SOLUTIONS (again select a sub category) and the whole accordian
jumps and shifts before settling down the way I want it. Any help
you can give me is much appreciated.. and please note that I am
basically a designer and not a programmer, so my knowledge on
scripts are limited...
Here's the URL to the test site:
http://www.canlanka.com/ignition/company.html

Thanks for your reply.....
The reason I am using images are because the client wants the
corporate font (Antique Olive) at least used on the buttons and
headline. This prevents me using the CSS styles and I am not
proficient enough to find a way to embed this particular font. I
can change the jpegs into giffs as you suggested if that helps. I
am also wondering if the staggered loading is anything to do with
the overflow setting on the panels in the SpryAccordian.css file? I
had to change it to visible in order to go in and change the image
as they are selected, after which I have kept the setting as
AUTO... may be is should be HIDDEN... or it may got n0thing to do
with the issue... but I am running out of options here....

Re: Spry Accordian Panels

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Spry accordian problems in IE

Similar Messages

Maybe you are looking for