Editing CS3 Spry widget

Hi,
I have created a accordion menu using a spry widget built
into Dreamweaver CS3. However I want to amend this so that the menu
is collapsed until the user clicks on a category.
Do I have to amend the CSS or the javascript to make it
collapsed to begin with?
Any help would be appericated.
Thanks
Gary

When you hover your mouse over the spry collapsible panel you
will get a blue tab, click it. The properties panel will give you
the widget controls. There you can set the default state as
closed.

Similar Messages

CS3 DW, CSS templates, Spry widgets

Hello--I'd appreciate any comments/advice. I created a new
website using CS3 templates with CSS that came with the application
and used the Spry widgets, horizontal navibar and tabbed panels.
The site loads in all of the browsers fine; but, it sometimes does
not allow movement from one navibutton to the next...like the
navibar gets stuck on the previous button and/or the browser
crashes (IE). Any thoughts? Thanks!

Post a link to one of these pages, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ARCCHARI" <[email protected]> wrote in
message
news:glas3n$81l$[email protected]..
> Hello--I'd appreciate any comments/advice. I created a
new website using
> CS3
> templates with CSS that came with the application and
used the Spry
> widgets,
> horizontal navibar and tabbed panels. The site loads in
all of the
> browsers
> fine; but, it sometimes does not allow movement from one
navibutton to the
> next...like the navibar gets stuck on the previous
button and/or the
> browser
> crashes (IE). Any thoughts? Thanks!
>

Dreamweaver CS4 Errors, Spry widget not working. Please Help!

I am redesigning a website and downloaded an html file from the present contact page. I opened it in Dreamweaver and I started to have this errors. The html file I opened has some JavaScripts in it and I believe, the the scripts got a conflict with Dreamweaver CS4. I already deleted these files I tried to open and still I'm encountering these errors.
These are the errors I'm getting:
1. When I open the Dreamweaver, this message pop-ups:
   "While executing onLoad in RecordsetFind.htm, the following JavaScript error(s) occured:
    In file "RecordsetFind"
    findRs is not defined."
2. I click OK. Then I'm getting this message:
   "While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
    In file "Design Notes_onOpen"
    onOpen is not defined."
3. I just click OK. Then, when I open an html file to edit or create a new one, this error pops up again:
   "While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
    In file "Design Notes_onOpen"
    onOpen is not defined."
4. I will again just click OK, then this error appears:
   "The following translators were not loaded due to errors:
    Coldfusion.htm: has configuration information that is invalid.
    SpryWidget.htm: has configuration information that is invalid."
5. Then, I will just click OK again. Then, when I'm working with the projects or creating a new project with Spry, it is not working properly anymore. I have to go the code and update the Spry list or content manually.
6. When I close Dreamweaver, I'm always having this error:
   "While executing onLoad in TeamAdminTempDelete.html, the following JavaScript error(s) occured:
    In file "TeamAdminTempDelete"
    delTempFile is not defined"
I tried uninstalling the Dreamweaver and installing it again, but it did not work.
What should I do to make the spry working again and to remove all these annoying errors? By the way, all my Spry widgets are not working and these errors I'm encountering in all of the Sites I'm working on. How can I make it work again? I tried looking for troubleshoot in CS4, but I could not see one, only in CS3.
Please help.

See if the following helps (found in Dreamweaver FAQ)
JavaScript and other unexpected errors
Mark A. Boyd
Keep-On-Learnin' :-)
This message was processed and edited by Jive.
It shall not be considered an accurate representation of my words.
It might not even have been intended as a reply to your message.

Spry Widget Issues - Deactivating after a while

Hi there,
I'm using Spry Widgets in DW CS3 and have been experiencing
the following strange issue.
When I insert a widget everything functions fine, the widget
is outline in blue, the little blue title appears when I roll over
it and the eye appears (for the Collapsible or the Accordion for
example) and allows me to close or open it with DW.
All in all, everything works sweet... I can edit it fine in
the Properties box etc.
And then after a while the widget just stops working. What I
mean is that there is no blue outline when rolling over it, there
is no Properties panel, there is no "eye", but the object is still
there, just not functioning.
I have obviously gone over the code as best I can. I've
created a new page within the same site and inserteda widget and
compared the code from one page to another and cannot find anything
off kilter.
Note that the CSS still woks fine, it just seems to lose its
Javascript capabilites (...)
This has happened with several different widgets in different
sites on different machines...
Any help would be much appreciated.
Thanks in advance

Here is a screenshot of a site I'm building atm. Please bear
in mind that I am not a coder and am building exclusively using
Design Mode.
LINK TO SCREENSHOT:
http://flickr.com/photos/7512606@N04/492179644"
>
-When I first inserted the Tabbed Panels widget, it
functioned fine...
-Now, something has happened and the widget is not editable
(other than going into the code) and the Panels are just displayed
one below the other.
-The widget functions normally when the page is previewed in
a browser, but I have lost my Design Mode editing capabilites.
-Now if I were to enter a new widget, it would start off
straight away in "non-editable" mode
-This has happened every time I have tried to use widgets.
Starts off fine and then loses editibility and/or functionality.
It's obviously something that I'm doing that is "breaking"
the widget, but any help would greatly appreciated.
Below is the code for that particular page:
<!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>Sisters, Pearls & MIssion Girls -
Info</title>
<style type="text/css">

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

</script>
<link href="../css/films.css" rel="stylesheet"
type="text/css" />
</head>
<body onload="MM_effectAppearFade('infoContainer', 2000,
0, 100, false)">
<div id="infoContainer">
<div id="infoTitle"><img
src="images/info/sisters_logo.png" alt="sisters_logo" width="195"
height="90" /></div>
<div id="infoCredits"><span
class="textDefault">Directed by David Batty<br />
Produced by Jeni McMahon</span><br />
<br />
<span class="textSmall">A Rebel Films Production<br
/>
Financed by Film Finance Corporation of Australia<br
/>
Produced with the assistance of the Australian Broadcasting
Corporation<br />
© Rebel Films and Film Finance
Corporation</span></div>
<div id="infoLinks"><img
src="../images/buttons/imdb.png" alt="imdbButton" width="195"
height="20" /></div>
<div id="panelProcontaioner">
<div id="panelContainer">
<div id="filmsPanels" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
</ul>
<div id="panelContent" div
class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><a
href="../veiled/index.html" target="_top"><img
src="../../images/tabbed_nav/veiledPanel.jpg" alt="veiledPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../rodeo/index.html" target="_top"><img
src="../../images/tabbed_nav/rodeoPanel.jpg" alt="rodeoPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../inventions/index.html" target="_top"><img
src="../../images/tabbed_nav/inventionsPanel.jpg"
alt="inventionsPanel" width="195" height="175"
border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="index.html" target="_top"><img
src="../../images/tabbed_nav/sistersPanel.jpg" alt="sistersPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../thatsaustralia/index.html" target="_top"><img
src="../../images/tabbed_nav/taPanel.jpg" alt="taPanel" width="195"
height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../taylor/index.html" target="_top"><img
src="../../images/tabbed_nav/taylorPanel.jpg" alt="taylorPanel"
width="195" height="175" border="0"/></a></div>
</div>
</div>
</div></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Add Spry Widgets to Dreamweaver Insert Bar Spry Group

Hi. I'm trying to work out how to add Spry widgets to
Dreamweaver's
Insert bar.
I downloaded Spry for Ajax 1.6 and copied the the contents of
the
SpryTooltip Folder.
I did a search in Adobe Dreamweaver's program folder for
everything Spry.
I pasted SpryTooltip everywhere in Dreamweaver that Spry
references
exist. I even created a .png icon for Spry ToolTip in:
Adobe Dreamweaver CS3\configuration\Objects\Spry
I opened Dreamweaver and there it was in my insert bar! My
icon for Spry
tooltip!
I tried to insert it into a blank age and got the message:
"Trigger
event missing" or something like that.
I'm sure there must be a way to add these new widgets to
Dreamweaver's
insert bar in the Spry group.
Can someone please tell me how to do it. Starting with
SpryTooltip.
and...
I might as well go ahead and ask how to add new Spry Effects
to
Dreamweaver's behavior panel as well. Let's say "Pulsate" for
an example.
PS. I've already asked this at the Spry Forum. No one has
replied yet.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1312010&enterthread=y
Thank you!
Dameon

hey,
I am a newbie to Spry too. I asked a similar question in the
Spry Forum.
It seems that you can not get the widgets into the Insert Bar
or on theBehavioral Panel.
To get the widgets to work, you only have the option to link
to them from your spry folder.
Spry is exciting, yet, it is still a new method, so the
WYSIWYG interface thing is still developing. Unfortunaly, if you
want to use Spry, you need to get dirty with the code stufff.
So, I too, use Spry sparingly.....
Hope that helps.

Can't add spry widget to page created from dreamweaver template

Please help! I have created a template in Dreamweaver and
from that template I have created an html page. I want to add
different tabbed and/or accordion spry widgets to multiple pages
however I keep getting an error when I try to add a widget to an
editable region. I can add the widgets to the dwt file, but I do
not want the same widget on all pages created from that template.
Please advise!
Thanks
cycleguy

If that's all that's on the child page you are in trouble.
Anyhow, it appears to me that the template has not been
properly created
since I do not also see an editable region around the
<title> tag in your
code. Please read my previous post and follow the
instructions.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cycleguy" <[email protected]> wrote in
message
news:fu01pk$s7k$[email protected]..
> Thank you for your reply.
> I started with one of the built-in templates offered in
Dreamweaver then
> added
> additional div's and formatting then saved it as a dwt
file and created my
> html
> page from that template. I did not start the page from
scratch. Below is
> my
> source code from the child page.
>
> <!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>Untitled Document</title>
> <style type="text/css">
> <!--
> body {
>

Add Spry Widgets to Dreamweaver Insert Bar

Hi. I'm trying to work out how to add Spry widgets to
Dreamweaver's Insert bar.
I downloaded Spry for Ajax 1.6 and copied the the contents of
the SpryTooltip Folder.
I did a search in Adobe Dreamweaver's program folder for
everything Spry.
I pasted SpryTooltip everywhere in Dreamweaver that Spry
references exist. I even created a .png icon for Spry ToolTip in:
Adobe Dreamweaver CS3\configuration\Objects\Spry
I opened Dreamweaver and there it was in my insert bar! My
icon for Spry tooltip!
I tried to insert it into a blank age and got the message:
"Trigger event missing" or something like that.
I'm sure there must be a way to add these new widgets to
Dreamweaver's insert bar in the Spry group.
Can someone please tell me how to do it. Starting with
SpryTooltip.
Thank you!
Dameon

For the dreamweaver related questions, i think u have more
luck ( & faster awnser) asking it in the Dreamweaver forum
selection that can be found here;
http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=12

Multiple Spry Widgets not functional on one page

I've installed 3 Spry widgets (CS3) & have run into the documented issue where they don't all work together on the page. Below is a link to my testing page, can anyone tell me where the problem lies? Are these browser issues?
Thanks!
http://www.designscrespo.com/widget_test

Start by validating the code.
That page is riddled with errors, including a missing opening <body> tag.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.designscrespo.com%2Fwidget_test&charset =%28detect+automatically%29&doctype=Inline&group=0

Centering spry widgets

Does anyone know where there is a good tutorial for centering
spry menu bars? Can this be done by changing rules in the spry menu
.css file, or do I have to add code in code view? thanks!

"mek113" <[email protected]> wrote in
message
news:fbruuf$56$[email protected]..
> I'm new to Spry Widgets and before I start in on
learning how they work,
> I'd
> like to know how compatible they are with all browsers.
Will user's need
> to
> download anything? Will they get the ActiveX message
like javascript and
> flash
> components? In other words, why would I want to use Spry
Widgets rather
> than
> Flash or javascript?
Spry widgets are nothing more than DHTML (JavaScript). They
work the same as
any other DHTML. If you like the way they work in your target
browsers and
the ease of which they are able to be made and modified
inside Dreamweaver,
then, by all means, use them. There is, however, nothing
really unique about
them beyond that they are simply new Javascript behaviors
included with
Dreamweaver CS3. I believe they will work well in most modern
browsers, but
to so well in some older browsers such as IE5.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Iframes and spry widget issue

PLEASE HELP!
I am building a website for my company using Dreamweaver for the very first time. I have a spry accordian menu on my page (that probably has nothing to do with my issue).
Next I added an iframe in the page to hold a vertical spry menu (since it will appear in other pages and I only want to edit it once. The menu was working fine until I did this.
Now that I embedded it in the iframe it is opening behind other things on the page. What can I do? Code is below:
<!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>Arkansas Bankers Association</title>

<style type="text/css">
</style>
<link href="Dec28.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<style type="text/css">

</style>

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

</head>
<body onload="MM_preloadImages('Images/HeaderHover_Files/images/aboutus_hover.png','Images/Head erHover_Files/images/education_hover.png','Images/HeaderHover_Files/images/banking_hover.p ng','Images/HeaderHover_Files/images/government_hover.png','Images/HeaderHover_Files/image s/products_hover.png','Images/HeaderHover_Files/images/partnership_hover.png','Images/Head erHover_Files/images/fraudcenter_hover.png','Images/HeaderHover_Files/images/consumer_hove r.png','Images/HeaderHover_Files/images/home_hover.png','Images/HeaderHover_Files/images/c ontactus_hover.png','Images/HeaderHover_Files/images/sitemap_hover.png','Images/Header_htm landimages/images/home_hover.png','Images/Header_htmlandimages/images/contactus_hover.png' ,'Images/Header_htmlandimages/images/sitemap_hover.png')">
<div id="wrapper">
<div id="header">
    <div align="center" "top">
     
<table id="Table_01" width="980" height="81" border="0" cellpadding="0" cellspacing="0" bgcolor="#2B4E74" >
<tr>
<td rowspan="2">
   <img src="Images/header_and_search/images/logo.png" alt="" width="597" height="81" border="0"></td>
<td>
   <img src="Images/header_and_search/images/home.png" alt="" width="250" height="33" border="0"></td>
<td>
   <img src="Images/header_and_search/images/contact-us.png" alt="" width="65" height="33" border="0"></td>
<td>
   <img src="Images/header_and_search/images/site-up'.png" alt="" width="68" height="33" border="0"></td>
</tr>
<tr>
<td colspan="3" valign="middle" background="Images/header_and_search/images/search-box.png" border="0"><form name="form1" method="post" action="">
    <label>
          <input name="search" type="text" id="search" value="Search by Keyword(s)" size="35">
    </label>
    <label></label>
              <label>
              <input name="submit2" type="image" id="submit2" src="Images/header_and_search/images/arrow.png" border="0" align="bottom">
          </label>
     </form> </td>
</tr>
</table>

    <a href="www.arkbankers.org/aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Images/HeaderHover_Files/images/aboutus_hover.png ',1)"><img src="Images/HeaderFiles/images/aboutus.png" name="Image21" width="76" height="37" border="0" id="Image21" /></a><a href="education_training.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Images/HeaderHover_Files/images/education_hover.p ng',1)"><img src="Images/HeaderFiles/images/education.png" name="Image22" width="133" height="37" border="0" id="Image22" /></a><a href="www.arkbankers.org/banking_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','Images/HeaderHover_Files/images/banking_hover.png ',1)"><img src="Images/HeaderFiles/images/banking.png" name="Image23" width="99" height="37" border="0" id="Image23" /></a><a href="www.arkbankers.org/government_relations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','Images/HeaderHover_Files/images/government_hover. png',1)"><img src="Images/HeaderFiles/images/government.png" name="Image24" width="141" height="37" border="0" id="Image24" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','Images/HeaderHover_Files/images/products_hover.pn g',1)"><img src="Images/HeaderFiles/images/products.png" name="Image25" width="130" height="37" border="0" id="Image25" /></a><a href="www.arkbankers.org/partnership_opportunities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','Images/HeaderHover_Files/images/partnership_hover .png',1)"><img src="Images/HeaderFiles/images/partnership.png" name="Image26" width="158" height="37" border="0" id="Image26" /></a><a href="www.arkbankers.org/fraud_center.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','Images/HeaderHover_Files/images/fraudcenter_hover .png',1)"><img src="Images/HeaderFiles/images/fraudcenter.png" name="Image27" width="94" height="37" border="0" id="Image27" /></a><a href="www.arkbankers.org/consumer_connection.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','Images/HeaderHover_Files/images/consumer_hover.pn g',1)"><img src="Images/HeaderFiles/images/consumer.png" name="Image28" width="149" height="37" border="0" id="Image28" /></a></div>
</div>
</div>
<div id="body">

<table width="860" height="auto" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
   <td width="3" rowspan="3" valign="top">       </td>
<td height="53" colspan="4" valign="top">
<div align="center"><img src="Images/education_images/education_top.png" alt="Education and Training" width="805" height="150" /></div>
</td>
<td width="29" rowspan="2" valign="top"><table width="20" border="0" cellspacing="5" cellpadding="2">
<tr>
    <td> </td>
</tr>
</table>
<br />
</td>
<td width="144" rowspan="2" valign="top"><img src="Images/Ads/ababannerad.jpg" width="140" height="325" /><br />
    <br />
    <img src="Images/Ads/Link_LiveEvents2010_CoverPic.jpg" width="144" height="186" /><br />
    <br />
    <img src="Images/Ads/SponsorshipBrochure2010_Link.gif" width="144" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top" background="Images/bg_department_details.png"><table width="771" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
              <td width="135" valign="top">
              
            
            
            <iframe src="EducationMenu.html" width="145" height="auto" frameborder="0" scrolling="no"> </iframe>
            <br />
            <br />
                          <br /></td>
            <td width="616" valign="top"><div align="left">
              
              <div id="Accordion1" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">ABA LIVE EVENTS</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Live.png" width="150" height="110" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in a variety of formats to make   training as convenient, timely and cost effective as possible.<br />
                    <a href="educ_liveevents.html">View All Live Events</a> <a href="educ_liveevents.html"><img src="Images/more_arrow.png" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">ABA WEBINAR LIBRARY</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinar_Library.png" width="150" height="124" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in<br />
                    a variety of formats to make   training as convenient, timely and cost effective as possible. We   encourage you to explore all the training options available to you.<br />
                    <a href="Jan5_2.html">View Webinar Library <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /><br />
                      </a><br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">COMPUTER BASED IN-HOUSE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/ComputerBasedInHouse.png" width="150" height="110" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in a variety of formats to make   training as convenient, timely and cost effective as possible. <br />
                    <a href="Jan5_2.html">View Computer Based In-House Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">WEBINARS & PODCASTS</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinars_Podcasts.png" width="150" height="110" align="left" /><br />
                    A webinar is an enhanced telephone seminar. The audio portion is delivered by speaker phone. You may also view a corresponding PowerPoint presentation by PC.
                    &A. You will receive a PIN, materials and instructions prior to the seminar.<br />
                    <a href="Jan5_2.html">View Webinars & Podcasts <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">SELF-PACED ONLINE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/SelfPacedOnline2.png" width="150" height="104" align="left" /><br />
                    ABA eLearning includes over 60 courses and 200 hours of training in the retail,   small business, personal trust, compliance, and
                    management development areas.<br />
            <br />
            <strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001">Register/Enroll/Take   a Demo - </a></strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001" target="_rpbrowser"><strong>Take the Demo   Now</strong></a><strong> </strong> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
            <a href="Education/ABA_eLearning_Price_and_Credit_List%20Jan_10.xls" target="_rpexternal">Brochure & Pricing</a> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
            <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">INSTRUCTOR LED ONLINE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/InstructorLedOnline2.png" width="150" height="110" align="left" /><br />
                    Your instructor posts weekly assignments which includes a reading (either textbook or online) and   homework is submitted through the discussion board or via email. You complete each at your convenience   and take a weekly quiz.   Exams (proctored midterms and/or   finals) are all taken online. Your instructor is available to provide   feedback and answer questions. <a href="Jan5_2.html">View Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>ANNUAL CONVENTION</strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Convention.png" width="160" height="106" align="left" /><br />
                    New Rules, New Opportunities, New Banking Environment<br />
                    <br />
                    <strong>121st Annual Arkansas Bankers Association Convention & Tradeshow</strong><br />
The Peabody Hotel & Statehouse Convention Center, Little Rock, Arkansas<br />
May 4-6, 2011 - <strong><em>Brochure Coming Soon!</em></strong><br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>BANK MANAGEMENT SEMINAR</strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/BankManagementSeminar.png" width="124" height="106" align="left" />Open to our Bank Members, Associate Members and non-members, this annual event will be held at Hilton Branson Convention Center in Branson, Missouri.<br />
                    <br />
                    <strong>2011 Bank Management Seminar</strong><br />
Hilton Branson Convention Center, Branson, Missouri.<br />
August 4-6, 2011<br />
<br />
</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>E<strong>MERGING LEADERS LEADERSHIP CONFERENCE</strong></strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/LeadershipConference.png" width="160" height="106" align="left" />Make plans to join us for the 2011 conference in order to network with your peers, further your education and leadership skills, and accelerate your banking career!<br />
                      <br />
                          <strong>2011 ELS Leadership Conference</strong><br />
                      Doubletree Hotel and Robinson Center, Little Rock, Arkansas<br />
                      July 21-22, 2011<br />
                    <br />
                  </div>
                </div>
              </div>
              <br />
              <br />

              <div align="left"></div>
                <p align="left""top"> </p>
                <p> </p>
              </div></td>
          </tr>
          </table>
          
          <script type="text/javascript">

</script>
          <br />        </td>
    </tr>
</table>
<p> </p>
</div>

</div>
<div id="footer">
<table width="800" border="0" align="center" cellpadding="2" cellspacing="5">
    <tr>
      <td>Footer Contents Here</td>
    </tr>
</table>
<br />
</div>
</body>
</html>

I frame should not be used in this situation because its contents are not in the same flow as the main document.
You are far better off using serverside includes as per following article http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps

CS3 Spry css question

I know basic tableless css, my question is instead of a regular navigation bar I need to use the spry widget for a dropdown navigation bar on an exisitng html page. I'm able to insert the spry in the correct spot on the .html page and get it to work but I have a css sheet already attached to the page I need to know if I can just select all the css from the spry css page and insert it inside my attached css page?
Any help?

Yes, you can move the styles, but in my opinion, it is safer to maintain the Spry CSS assets in their own file, safe from inadvertent deletion or harm. There is an inherent logic to the order of styles in the Spry CSS sheets, and you might lose the wisdom of the comments not to mention the orderly consistency as well.
You may link many style sheets to your .html pages...you are not limited to one per page.
By using several CSS files attached to one page, you can also have a separate style sheet for different media: one for the Screen, one for Print, one for a Handheld device. There's no reasonable way to keep all these varying uses for different style sheets all one ONE sheet. The Printer will look for your main style sheet AND at the overriding styles in the print style sheet, for instance, so you don't need to print the nav bar when what you want is a print of the content.
Z
You do, of course, need to NAME the CSS files with distinct names, for instance, global.css, print.css, handheld.css.
Message was edited by: Zabeth69

Spry Widget - Tooltip

Excuse me for sounding like a wuss, but it seems that the new
widgets like Tooltip include a bunch of instructions about how to
add the container and the constructor script in Code View. Isn't
one of the main points of the included widgets to use the WYSIWYG
interface of Dreamweaver so you don't have to code everything.
I would have thought that when Adobe came out with new
widgets, they would have done so in a way that worked like
extensions, where there were properties to set for things to work.
Not where you would copy files into directories, and then use
sample code to learn syntax.
This is not the reason that people purchase Dreamweaver. I
have just spent 45 minutes learning code for a Spry tooltip widget,
where I could have purchased an extension to do the same thing. I
did not buy Dreamweaver CS3 so I can spend my days coding pages
every time I want a tooltip to show up.
I would rather use Spry. I am just confused as to why the
original Spry widgets are so user friendly, and the new ones are
not simply something updated within the program having their own
toolbar buttons.
Any ideas or suggestions?
Thanks!

Hi Bubba,
Allow me to explain.
While related, the DW deam is separate from the Spry team.
The Spry team designs and releases features and widgets on their
schedule. DW has a much longer schedule than Spry and also, the
work involved in getting first class widget support takes a long
time. It has to be built and tested and that can take many weeks.
The DW team is busy building the next version and they don't
have the bandwidth to keep up with the Spry team as far as widget
support. So there will always be a lag between the widgets that
Spry has and the widgets that DW supports.
That being said, we, along with many of you, do not like this
widget disparity. We are taking steps to solve this, but I can't
say exactly what those plans are or when you will see the results,
but we are doing some cool widget work on the DW side that you can
look forward to.
And, there is nothing wrong with learning a little code!
Hope this helps.
Donald Booth
Adobe Spry Team

DW CS3 Spryアコーディオンについて

DW CS3のSpryアコーディオンの設定ですが、デフォルトでは、クリックをすると、ウィンドーが開きますが、マウスオーバーでウィンドーを開くにはどのようにすればよいでしょうか？

SpryAccordion.js の283行目（spry1.4の場合）
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
を
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabClick(e, panel); }, false);
に変更すれば可能です。
"click"を"mouseover"にすればよいわけです。
私もあまりJavascriptはよくわかりませんが、こうやってすでに２サイトで導入してます。

Spry Widgets compatibility

I'm new to Spry Widgets and before I start in on learning how
they work, I'd like to know how compatible they are with all
browsers. Will user's need to download anything? Will they get the
ActiveX message like javascript and flash components? In other
words, why would I want to use Spry Widgets rather than Flash or
javascript?

"mek113" <[email protected]> wrote in
message
news:fbruuf$56$[email protected]..
> I'm new to Spry Widgets and before I start in on
learning how they work,
> I'd
> like to know how compatible they are with all browsers.
Will user's need
> to
> download anything? Will they get the ActiveX message
like javascript and
> flash
> components? In other words, why would I want to use Spry
Widgets rather
> than
> Flash or javascript?
Spry widgets are nothing more than DHTML (JavaScript). They
work the same as
any other DHTML. If you like the way they work in your target
browsers and
the ease of which they are able to be made and modified
inside Dreamweaver,
then, by all means, use them. There is, however, nothing
really unique about
them beyond that they are simply new Javascript behaviors
included with
Dreamweaver CS3. I believe they will work well in most modern
browsers, but
to so well in some older browsers such as IE5.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

My VerticalTabs Spry widget not working - help

My HTML file:
<!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>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/01-akcija-popust-seva-obelezavanje.png','images/01-Bezbe dnosno-obelezavanje.png')">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" top="0px">
<tr>
    <td>
    <div class="container">
<div class="sidebar1"> </div>
<div class="content">
<div id="wrap">
<div id="apDiv2" style="position: inherit; left: 151px; top: 0px; width: 1100px; height: 145px; z-index: auto"><img src="images/01-poslovno-obelezavanje-header.png" width="1100" height="145" alt="poslovno obelezavanje header"></div>
<div class="apDiv7" id="apDiv7" style="position: inherit; left: 135px; top: 145px; width: 1100px; height: 53px; z-index: auto"><a href="SEVA-PORTAL.html">ŠEVA-PORTAL</a> | <a href="#" target="_self">Početna strana</a> | <a href="O-nama.html">O nama</a> | <a href="01-Reference.html">Reference</a> | <a href="Kontakt.html">Kontakt</a> | <a href="01-Kako-do-nas.html">Kako nas naći</a></div>
<div id="TabbedPanels1" class="VTabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0"><img src="images/01-Glavni-spoljni-natpis.png" name="Image2" width="240" height="163" border="0" id="Image2" /></li>
      <li class="TabbedPanelsTab" tabindex="10"><img src="images/01-Spoljni-putokazi.png" name="Image3" width="240" height="163" border="0" id="Image3" /></li>
      <li class="TabbedPanelsTab" tabindex="20"><img src="images/01-Centralna-INFO-tabla.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="30"><img src="images/01-Spratna-INFO-tabla.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="40"><img src="images/01-Unutrasnji-putokazi.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="50"><img src="images/01-Obelezja-prostorija.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="60"><img src="images/01-Oglasne-table-i-vitirine.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="70"><img src="images/01-Ostale-oznake.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="90"><img src="images/01-Bezbednosno-obelezavanje.png" width="240" height="188" /></li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
        <div id="apDiv1" style="position: fixed; left: 661px; top: 209px; width: 361px; height: 51px; z-index: auto"><img src="images/02-Glavni-spoljni-natpis.png" width="361" height="51" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake" /></div>
      </div>
      <div class="TabbedPanelsContent">
        <div id="apDiv1" style="position: fixed; left: 698px; top: 211px; width: 287px; height: 40px; z-index: 1"><img src="images/03-Spoljni-putokazi.png" width="287" height="40" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake, srbija" /></div>
      </div>
      <div class="TabbedPanelsContent">Content 3</div>
      <div class="TabbedPanelsContent">Content 4</div>
      <div class="TabbedPanelsContent">Content 5</div>
      <div class="TabbedPanelsContent">Content 6</div>
      <div class="TabbedPanelsContent">Content 7</div>
      <div class="TabbedPanelsContent">Content 8</div>
      <div class="TabbedPanelsContent">Content 9</div>
    </div>
</div>
</div>
</div>
<div class="sidebar2">
</div>
</div>
    </td>
</tr>
</table>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
and my modified SpryTabs CSS file is:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     clear: none;
     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
     margin: 0px;
     padding-left: 10px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
     position: relative;
     float: left;
     background-color: #FFF;
     list-style: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     cursor: pointer;
     width: 240px;
     margin-bottom: 10px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
     background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
     background-color: #EEE;
     border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
     color: black;
     text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
     clear: both;
     border-bottom: solid 1px #CCC;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     background-color: #EEE;
     padding-left: 11px;
     height: auto;
     width: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
     overflow: hidden;
     padding: 0px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
     background-image: url(../images/01-Pocetna-strana_23.png);
     background-repeat: repeat-y;
     background-position: left top;
     height: auto;
     width: auto;
     padding-left: 11px;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
     overflow: hidden;
     zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
     float: left;
     width: 240px;
     height: auto;
     background-color: #FFF;
     position: relative;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
     float: none;
     /* [disabled]border-top: none; */
     /* [disabled]border-left: none; */
     /* [disabled]border-right: none; */
     height: auto;
     width: 240px;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
     background-color: #FFF;
     width: 240px;
     height: auto;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
     clear: none;
     float: left;
     padding: 0px;
     width: auto;
     height: auto;
/* Styles for Printing */
@media print {
.TabbedPanels {
     overflow: visible !important;
.TabbedPanelsContentGroup {
     display: block !important;
     overflow: visible !important;
     height: auto !important;
.TabbedPanelsContent {
     overflow: visible !important;
     display: block !important;
     clear:both !important;
.TabbedPanelsTab {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
I got preview in any browser OK, like I wanted but clicking on tabs not working and they not switching content per each tab. I maked tabindexes: 0, 10, 20,30, 40, 50, 60, 70, 80, 90 and nothing works.
Where is problem?

But the tabs do work and the content does show!
Clicking the first two tabs causes the content to fly over to the right, outside of the content panel, exactly as the style rules tell it to.
Clicking the other 7 tabs causes the content to show aligned to the left within the content panel, again as per the style rules.
The total height of the tabs is 882 px including the bottom margins.
The height of the content panels varies with the content, in case of the first two tabs there is no content contained within the content panel thus the height is zero; of the remaining content panels the height is about 1.5x the height of one line.
In other words there are no surprises except for the fact that it would have been better not to have used the SpryTabbedPanels widget for this.
Of course I am supposing that you have changed the personality of the TabbedPanel widget on purpose.
If this is not the case then a good start will be
to get rid of the modified SpryTabbedPanels.css and re-instate the original.
to get rid of the all of the apDiv's including those inside the content panel.
to reduce the overall height of the tabs to a manageable height by reducing the height of the images.
Gramps

Editing CS3 Spry widget

Similar Messages

Maybe you are looking for