Spry jumping in IE

I have just used the standard Spry framework as supplied in Dreamweaver CS3 on one of my employers websites. I modified the CSS to suit, only simple things like fonts and background images instead of the standrad coloured blocks. The site works perfectly in Firefox and Chrome, but in IE the whole Spry stutters and jumps about.
Has anyone else experienced this?
For reference the site is http://www.askprint.co.uk/
Thanks in advance,
Justin

Check your doctype,
Validate your HTML,
Undo your custom change in the Spry file. - I see changes in there that are not in the default Spry files. And you are using the syntax incorrect for Spry 1.6.1
; http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html

Similar Messages

Fixed position header / logo / home link / spry menu dreamweaver cs5

Hi all,
I'm starting a new discussion on this:
I have posted the code below for the header and the spry.
The header with logo and homelink keeps going underneath the spry and the spry jumps to the top of the page, this has only happened when I addded position: fixed;
However I do need this to have a fixed postion as I want to Spry and Header to remain fixed when scrolling, I'm hoping someone can help me with this
Thankyou
HTML:
<div id="header">
<div align="center"><a href="index.html" id="homeLink"></a></div>
</div>
<div id="container">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="../mall.html">MENS</a>
        <ul>
          <li><a href="../mall.html">ALL</a></li>
          <li><a href="../mouterwear.html">Outerwear</a></li>
          <li><a href="../msweatsknitwear.html">Sweats + Knitwear</a></li>
          <li><a href="../mtops.html">Tops</a></li>
          <li><a href="../mshirts.html">Shirts</a></li>
          <li><a href="../mdenim.html">Denim</a></li>
          <li><a href="../mtrousers.html">Trousers</a></li>
          <li><a href="../mshorts.html">Shorts</a></li>
          <li><a href="../mfootwear.html">Footwear</a></li>
          <li><a href="../maccessories.html">Accessories</a></li>
        </ul>
      </li>
      <li><a href="../womens.html" class="MenuBarItemSubmenu">WOMENS</a>
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">Outerwear</a></li>
          <li><a href="#">Sweats + Knitwear</a></li>
          <li><a href="#">Tops</a></li>
          <li><a href="#">Shirts</a></li>
          <li><a href="#">Dresses</a></li>
          <li><a href="#">Playsuits + Jumpsuits</a></li>
          <li><a href="#">Skirts</a></li>
          <li><a href="#">Denim</a></li>
          <li><a href="#">Trousers</a></li>
          <li><a href="#">Shorts</a></li>
          <li><a href="#">Footwear</a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="../footwear.html">FOOTWEAR</a>
        <ul>
          <li><a href="#">Mens</a> </li>
          <li><a href="#">Womens</a></li>
          <li><a href="#">Unisex</a></li>
        </ul>
      </li>
      <li><a href="../accessories.html" class="MenuBarItemSubmenu">ACCESSORIES</a>
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">Bags</a></li>
          <li><a href="#">Wallets + Purses</a></li>
          <li><a href="#">Belts</a></li>
          <li><a href="#">Hats</a></li>
          <li><a href="#">Scarves</a></li>
          <li><a href="#">Sunglasses + Glasses</a></li>
          <li><a href="#">Watches</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="../maccessories.html">Mens</a></li>
<li><a href="#">Womens</a></li>
        </ul>
      </li>
      <li><a href="../about.html">ABOUT</a></li>
      <li><a href="../blog.html">BLOG</a></li>
      <li><a href="../contact.html">CONTACT</a></li>
    </ul>
</div>
<p> </p>
<div id="content">content</div>
CSS:
#header {
          background-color: #FFF;
          background-image: url(LOGO/CHAIN%20logo%20new%2024.png);
          background-repeat: no-repeat;
          background-position: center center;
          height: 200px;
          width: 100%;
          position: fixed;
#container {
          height: 60px;
          width: 100%;
          margin-right: auto;
          margin-left: auto;
          position: fixed;
#homeLink {
          width: 100%; /* set width to width of background image */
          height: 200px; /* set height to height of background image */
          display: block;
          position: fixed;

I'm not 100% sure where you find them in CS5 (I use CS4) I would just add them manually to the container, header and homelink css. All you need to do is open the .css file and add...
top:#px;   /* The # you use defines how close to the top of the window the div sits */
left:#px;   /* The # you use defines how close to the left of the window the div sits */
EDIT: So it would look something like this...
#header {
          background-color: #FFF;
          background-image: url(LOGO/CHAIN%20logo%20new%2024.png);
          background-repeat: no-repeat;
          background-position: center center;
          height: 200px;
          width: 100%;
          position: fixed;
          top:0px;
          left:0px;
#container {
          height: 60px;
          width: 100%;
          margin-right: auto;
          margin-left: auto;
          position: fixed;
          top:100px;
          left:100px;
#homeLink {
          width: 100%; /* set width to width of background image */
          height: 200px; /* set height to height of background image */
          display: block;
          position: fixed;
         top:10px;
          left:10px;
Obviously, use the pixel dimensions you need to position everything correctly.

Jump to a Named Anchor when loading an HTML doc

I have a CollapsiblePanel with a Content Link to a Named
Anchor in info.html and I thought I could use loadURL() to load the
page into the Div "thetext" but it does not work. Can Spry Jump to
a Named Anchor when it loads an HTML doc?
onClick:
Spry.Utils.updateContent('thetext',
'/information2.php#Insurance')
And I also tried:
Spry.Utils.loadURL('thetext', '/information2.php#Insurance')
The Head:
<script src="SpryAssets/SpryCollapsiblePanel.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript"
src="Spry_P1_6_10-01/includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript"
src="Spry_P1_6_10-01/includes/SpryEffects.js"></script>

On 08 Oct 2007 in macromedia.dreamweaver, antonioconte wrote:
> Does anyone know if and how its possible to jump to a
named anchor?
> I need to use the behavior panel to call a page into a
pop up and
> jump to an anchor too - is this possible?
Sure - just make the link to the anchor:
<a
href="page.php#anchor"
onclick="popupscript('page.php#anchor');return false;">
Open my popup window</a>
Making the link attribute (href=) the same as the popup
window means that
people who are visiting your site with javascript turned off
will also
get the information from the page. The 'return false' in the
onclick
event means that the href won't fire if javascript is turned
on.
Joe Makowiec
http://makowiec.net/
Email:
http://makowiec.net/contact.php

Spry Menu Bar jumps off screen-right in CS6

Frustrating little glitch I'm experiencing. When in a NON-LIVE mode in CS6, I have a Spry Menu Bar that I've placed, customized and is functioning properly. It is precisely in the right location in BOTH live mode and in a browser preview, however, when I am editing the site the menu bar jumps off screen right to where I have to scroll right to locate it. The only thing that pops it back in to place is by tweaking a setting like "Float" from right to left then back to right. But once I begin to edit the site again it will jump off the screen. This isn't a massive deal since it remains in place in live and preview modes, it's just annoying for layout purposes while I'm editing. It sort of screws up the aesthetic of the layout. Has anyone found the same problem? Below is my layout.css and my Spry Menu css.
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        6;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    15;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 95.8695%;
    padding-left: 1.0652%;
    padding-right: 1.0652%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#maincontent {
    clear: none;
    float: left;
    margin-left: 2.6785%;
    width: 100%;
    display: block;
#navigation {
    clear: none;
    float: left;
    margin-left: auto;
    width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #300;
    height: 16px;
    top: 5px;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    color: #FFF;
    background-attachment: fixed;
    background-image: url(../bkgdContent.png);
    background-repeat: repeat;
    margin-top: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 91.4836%;
    padding-left: 0.7581%;
    padding-right: 0.7581%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
#maincontent {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 100%;
    display: block;
#navigation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 16px;
#whf-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#donatecontent {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 100%;
    display: block;
#theride-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 49.1712%;
    display: block;
#donate-content {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 49.1712%;
    display: block;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 89.0217%;
    max-width: 1232px;
    padding-left: 0.4891%;
    padding-right: 0.4891%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    color: #FFF;
#maincontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
#navigation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#whf-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
#donatecontent {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 100%;
    display: block;
#donate-content {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#theride-content {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;
#whf-content {
    font-family: Georgia, "Times New Roman", Times, serif;
SPRY CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    float: right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 4.3em;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 4.3em;
    position: relative;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: relative;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #300;
    color: #FFF;
    text-decoration: none;
    font-size: 12px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-align: center;
    height: 16px;
    padding: 0px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #003;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #003;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Design view is not reliable. Learn to work in Code View or Split View with Live View to check your layout.
Spry menus are not responsive so they will not work well in a Fluid Grid Layout. Find a better menu system.
Project Seven Responsive Tabs
http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/index.htm
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
In the meantime,
It's often easier to work with an unstyled HTML page.
To disable CSS, go to View > Style Rendering > untick Display Styles.
Or, use a Design-Time Style Sheet.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.h tml
Nancy O.

How do I make my accordion spry not "jump" or "hiccup" in IE??

Ok, sorry you guys, I'm a newbie.
It seems that no matter what I do, I can't get the accordion to co-operate with Internet Explorer. It has always jumped when tabs are clicked and then settles down. It's rather irritating and I would like to fix it. I've run out of things to try. Can anyone help?
In addition, with attempts to make keep the accordion and background centered I used a div with the position centered, which worked, but only in FF and Chrome. In IE it stays far left. When I had it in a table, I could set a left: px in the class, but never figured out how to center it with a table so it would change position based on the monitor resolution. If there's a better way to do this that IE and other browsers like, please help me. If it's just IE that has the problem is there any way to make it like my code?
If you can help me change the height of the accordion, that would be great. It seems it doesn't want to stretch out, but maybe I'm writing it in the wrong section or the wrong way.
Another minor issue is the IE not doing the transparency I set on the tabs. I heard that they took that feature out. Is that true or is there a way to set it for IE?
Here's what I have so far:
+<!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>Bonnie Praymayer</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<table id="big">
    <tr>
     <td><table width="200" border="1" id="table" name="table">
       <tr>
         <td><div id="Accordion1" class="Accordion" tabindex="0">
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
             <span class="tabContent">Benefiting People Like You
             </span>
             </div>
             <div class="AccordionPanelContent">
                   <div class="panelContent">
                 <p >I specialize in deep tissue massage. As you may know already, massage therapy is the manipulation of soft tissue with the goal to improve well-being and heal injuries. It can involve just about any part of the body, but generally most people have stiffness and injuries in the back and neck. I enjoy using this type of health maintenance to assist people like you. Massage therapy can be used to improve many ailments such as:</p>
                 <p >Muscle Strains, Sprains, Headaches, Migraines, Fibromyalgia, Edema, and High Blood Pressure</p>
                 <p >Beyond "ailments" massage is excellent for treating sore muscles in pregnant women as well as reducing stress in everyone.</p>
                 <p > </p>
               </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                 <span class="tabContent"> Reflexology - An Added Benefit
                 </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >In addition to massage therapy, I am certified to practice Reflexology of the feet. This is a therapy wherein pressure is applied to the feet to encourage the body to heal itself. It's as if the feet are a map to the body with the spine being the edge of what is known as the arch. There are key points such as the heart and lungs, sinuses, kidneys, and intestinal tract. </p>
               <p> </p>Reflexology has been known to also be an indicator to hidden health issues. Many reflexologists can attest to the fact that upon finding sore areas in the feet, the corresponding organ(s) have later been discovered by a physician to be injured or diseased. It is not a replacement for healthcare, but for some, reflexology has proven to be an asset to gain knowledge of the workings of their body.<p></p>
               <p >One thing to note: if you do receive a reflexology treatment it is normal to feel a little dizzy, fatigued, or flu-like if you don't hydrate yourself before and after.</p>
            </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                     <span class="tabContent"> How to Choose a Therapist
                     </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >To be honest, everyone has preferences for what he or she like in a massage, so there is no hard and fast rule. What I recommend is that you decide what you need treated whether it be muscle strain, stiff muscles, stress, poor circulation etc. You can decide what kind of massage you need based on what you decide you want massage to do for you.</p>
               <p >If you need to de-stress, relax and do not have many sore stiff muscles then simple relaxation massage would be good for you. If you have a constant sore shoulder or neck then you really need a therapist that is capable of effectively loosening those fibres.</p>
               <p >You may be able to determine if a therapist is right for you by talking with someone who has had a massage from that person. Otherwise, you can sometimes judge by the type of facility in which they are practicing. Typically a spa is going to give you strictly relaxation, although many therapists are capable of more if you request it. A chiropractor's clinic will often focus on rehabilitation of injured patients; more often than not they have massage therapists that are more than capable of working deep enough to affect injured tissue.></p>
               <p > Communication is the key when it comes to during the treatment in order to customize and optimize your massage experience. Don't be afraid to speak up if you need to adjust the technique or pressure. After all, the massage is all about you!</p></div><p></p>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab"><span class="tabContent">My Practice</span></div>
             <div class="AccordionPanelContent">
                 <div class="panelContent">
               <p>My interest in massage therapy began at a very early age. Although I didn't know it was an actual profession, I started massaging at the age of 8 as I did my best to alievinate my mother's chronic pain from fibromyalgia. I, through time gained a natrual feel for detecting prolblem areas in the muscle and I learned what pressure is appropriate. </p>
               <p>I took my training in 2006 at the Alberta Insitute of Massage for six months to earn a certificate for a 1100 hour program. Though short, it was intensive in the anatomy and physiology portion and very hands-on in the massage classes. It was my privilege to learn from three instructors who had more than 10 years experience as massage therapists and many years teaching it.</p>
               <p>Since my training, I have had the opporutinty to work as a massage therapist for 3 years. I have treated people from all walks of life for countless ailments and injuries. It is my pleasure to do my utmost to see to it that each paitent recieves the treament they deserve and expect.</p>
               </div>
             </div>
           </div>
         </div></td>
       </tr>
     </table></td>
    </tr>
</table>
<script type="text/javascript">

</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
    background-image:url(../Images/WaterLeaf_Exp.png);
    background-repeat: no-repeat;
    background-position:center;
    background-attachment:scroll;
    background-color:#222222;
.panelContent {
    color: #dcd2d2;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 15px;
    margin-top: 20px;
.tabContent {
    color: #333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    padding: 15px;
#big {
    /*background-image*/
    background-repeat:no-repeat;
    border: none;
    top: 0px;
    margin-left: 23.5%;
    position: static;
    height: 800px;
    width: 955px;
#table {
    width: 700px;
    height: 290px;
    /*margin-top: 1%;
    margin-left: 125px;*/
    border: none;
    position: relative;
    z-index: 2;
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - 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: #FFF;
    /*border-top: solid 1px black;*/
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
/* 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: #cccccc;*/
/* 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: #93C;
    filter:alpha(opacity= 50);
    opacity: 0.5;
    -moz-opacity:0.5;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #cccccc;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* 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:hover {
    background-color: #FFF;
    filter:alpha(opacity= 20);
    opacity: 0.2;
    -moz-opacity:0.2;
.AccorrdionPanelOpen:hover {
    filter:alpha(opacity= 90);
    opacity: 0.9;
    -moz-opacity:0.9;
    color:#F00
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #390;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;

You would make this a little easier if you posted a link to the page.
Most of the jump seems to be some extra padding or margin between the tabs when you rollover, but I am not able to find it. Is there any other css that is governing this page? I did remove a couple of <p></p> set of tags you had and it improved the jump, but it is still there.
If the page is live, run it through the validator http://validator.w3.org/ , fix whatever errors it finds, if you still have the jump, post a link to the page and the issue might get found.
Gary

How can I make the spry accordion remember the panel open when I refresh the page or jump to a new page?

How can I make the spry accordion remember the panel open
when I refresh the page or jump to a new page?
I am using the accordion feature on all my pages as a
navigation aid. It has three panels. When you refresh the page the
panel goes back to the default pane... Is there a way of
controlling this so that the browser can remember the pane that is
open (say set a variable, cookie, other?)

Look for "Set the default open panel" on the following page:
http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html
Keep in mind you would need to change that bit of code on
every page. The only way to do it more dynamically would be to
include a custom javascript or PHP/ASP style script in order to
change the value.

I cannot locate the Jump Menu under Insert/Form. I am looking for a way to replacve the Spry menu I used previously

I need to modify my website and I used a Spry menu to direct users to specific pages. This is no longer supported with the 2014 version and thought a Jump Menu would work, but it is not on the insert/form menu as instructed in help files. Any ideas?

Jump Menus still exist in CC, they're just created differently than they used to be. For some reason I can't figure out, they've been a bit buried...
1. Click in Design View where you want the Select Menu to appear
2. Go to Insert > Form > Select
3. Click on the Select Menu created in Design View
4. Click the + in the Behaviors Window and choose Jump Menu
From there, you should get the familiar Jump Menu dialogue box.

Total frustration, Spry Sub Menu jumps to top of page in IE 7.

I am a newbie to Divs and spry menus, tring to put together a site for the local sports club. Have created a spry menu and have problems in IE browsers. In IE 7 the sub menu jumps to the top of the page. In IE 8 the submenu covers the main button/menu when you hover over it, instead of dropping down, also side image next to spry menu jumps out of Div. Works fine in Firefox. Have upgraded Spry to 1.61. Here is address of site    http://www.pascoevalesc.org.au/.
Help a very Frustrated person.
CSS:
@charset "utf-8";
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #161616;
    height: auto;
    width: 900px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
.twoColFixRtHdr #container {
    width: 900px; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #000000;
    float: left;
    height: auto;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
.twoColFixRtHdr #header {
    background-color: #000000;
    float: left;
    height: auto;
    width: 900px;
    margin: 0px;
    padding: 0;
.twoColFixRtHdr #header h1 {
    margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    background-color: #000000;
    float: left;
    height: auto;
    width: 900px;
    padding: 0px;
.twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 150px;
    background-color: #000000;
    padding: 0px;
    height: auto;
.twoColFixRtHdr #mainContent {
    background-color: #000000;
    float: left;
    height: auto;
    width: 740px;
    margin: 0;
    padding: 0;
#maincontentbottom {
    background-image: url(../images/bottom-maincontent.gif);
    background-repeat: no-repeat;
    float: left;
    height: 33px;
    width: 647px;
    margin-left: 50px;
#panthernewstop {
    float: left;
    height: 31px;
    width: 647px;
    background-image: url(../images/top-maincontent.gif);
    background-repeat: no-repeat;
    margin-left: 50px;
    margin-top: 120px;
#panthernewsmid {
    background-color: #000000;
    float: left;
    height: auto;
    width: 623px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #c6c4c4;
    border-right-color: #c6c4c4;
    border-bottom-color: #c6c4c4;
    border-left-color: #c6c4c4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 51px;
    padding-top: 0px;
    padding-right: 11px;
    padding-bottom: 0px;
    padding-left: 10px;
#panthernewsbottom {
    background-image: url(../images/bottom-maincontent.gif);
    background-repeat: no-repeat;
    float: left;
    height: 37px;
    width: 647px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 50px;
#sponsormaincontent {
    background-color: #000000;
    padding: 0px;
    height: 74px;
    width: 549px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-right-width: 0px;
    border-left-width: 0px;
    border-right-style: 0;
    border-left-style: 0;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-top-style: 0;
    border-bottom-style: 0;
.twoColFixRtHdr #footer {
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    height: 129px;
    width: 850px;
    padding: 0;
    float: left;
    margin-left: 20px;
.twoColFixRtHdr #container #footernav {
    float: left;
    height: 50px;
    width: 850px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    color: #999999;
    margin-top: 40px;
    margin-right: 20px;
.twoColFixRtHdr #footer p {
    height: 129px;
    width: 850px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
#3tabdiv {
    background-color: #151515;
    float: left;
    height: auto;
    width: 740px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 90px;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
.Title { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#panthernewsrow1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    float: left;
    height: auto;
    width: 280px;
    margin-top: 10px;
    margin-left: 10px;
#panthernewsrow2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    float: right;
    height: auto;
    width: 280px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
.twoColFixRtHdr #container #mainContent #panthernewsbottom {
    background-color: #000000;
    margin: 20px;
    float: left;
    height: auto;
    width: 700px;
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow1 .headtitles.style4 .style4 {
    font-size: 16px;
    font-weight: bold;
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow2 h2 .body-white {
    font-weight: normal;

G'day Mate,
You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Carn the Pies
Gramps

Spry Accordion Jerky/Jumping movement Issues in IE

I am having a difficult time trying to debug the accordion in IE. You can see the accordion here in IE I am having two issues.
1. When at the top of the site and clicking on a tab to open it jumps down the page as if it were an anchor point, and I find this very annoying.
2. The movement below the tab clicked is jumping around and this also is incredibly annoying to me, its more subtle than the above issue but it still bothers me. I am having this issue in GC as well.
I have searched quite a few forums and have not found a solution for this but this must be a fairly common issue? I am not that familaur with spry yet this is my first real project using it so my knowledge is very limited to this point. This dose work perfect in FF.
Thanks in advance,

I will put together a gutted version of this and send it over if you have the time that would be fantastic. Making a gutted version may be the best thing at this point so I can slowly add stuff back and see what causes the problem. If i cant fix it by doing that I will zip and send the files.
Date: Tue, 27 Oct 2009 15:23:40 -0600
From: [email protected]
To: [email protected]
Subject: Spry Accordion Jerky/Jumping movement Issues in IE
Can you provide me with files where I can reproduce your issue with
out any other scripts on the site? This gives me a better debugging
area. If you do not feel comfy with posting it online. You can e-mail
it to mailto:[email protected]
>

Jump links to spry tabs don't work in firefox

I created jump links from the top of a page to spry collapsible panel tabs. In Internet Explorer, the link doesn't bring me to the tab, but the tab changes color (rollover)--an unintended but very nice effect. In Firefox, the link does nothing.
This is the 3rd time I've asked this question; I hope that someone can help.
One example is here: http://www.judydiamondstone.net/Writing.html (click any of the jump links; in Firefox nothing happens; compare to most recent version of IE)
Thanks.

I checked out David Powers' tutorial
Spry: Opening Specific Tabs and Panels from Another Page
http://foundationphp.com/tutorials/spry_url_utils.php
Although I couldn't open the zip file (spry_target.zip), I followed the directions to insert the URL.utils java script code needed to open tabs from another page, but it didn't work for me.
I'd like to get the same effects in Firefox and Safari as I get in IE-8 (see below)
What's the difference between these browsers that causes the difference in functionality?

Spry Accordion jumping to the top of the page

Hi
I've just about go the accordion looking perfect (it's a
great effect!), except that in IE7 when a panel lower down the list
is selected, the page jumps so that the highest panel is at the top
of the screen. As my accordion is longer than the screen this means
that the panel that is selected is off the bottom of the screen.
Does anyone have any suggestions for fixing this? It works
perfectly in Firefox.
Many thanks in advance!

I saw you are using an old version of Spry accordion.. you
use Spry.1.4 and the latest version is Spry 1.6 which contains some
bugs fixed for accordion widget.
Update link:
http://labs.adobe.com/technologies/spry/home.html
Please update to the latest version and make the keyboard
navigation change and see if still happens the pb.
Diana

Accordion Spry shows a strange blue glow when clicked on... And the tabs jump a bit...

I am having a problem on the page below.
I was able to make the TEXT stop glowing blue when in focus, but can't manage to get this blue-glow outer line wrapped around the spry object. I have no idea how to fix it.
Here's the page where the issue happens- http://www.fci.tv/home/casestudies.html
Here's a link to the page's CSS file- http://www.fci.tv/home/css/style.css
And a link to the Accordion CSS- I've modified it a little to get rid of the ugly default setup, but still see this blue glow around the spry.... http://www.fci.tv/home/spryassets/spryaccordion.css
Lastly, when you click on any of the three spry-menu options, the panels slide with a strange jump. Can you please provide any insight to this problem?
Thank you!
Hugo

Hello there.
Thank you very much for your input. This worked perfectly.
Thank you!
Hugo

Spry Accordion Widget Jumps in Safari and Firefox

I'm an intermediate designer in Dreamweaver, and am developing a site with spry accordions in it, to have a lot of info in one spot.
My problem is when clicking on the next tab, the whole wiget jumps down quite a bit then slows down when the panel opens at the top.
I have no idea how to fix this, have searched forums and the code within the website.
I'm Stuck, Help me!
http://file:///Volumes/eb631806/c4%20executive%20security%20services/Site/training.html
http://file:///Volumes/eb631806/c4%20executive%20security%20services/Site/services.html

The links don't work, sorry
I'll figure out how to get a link that works, on here

Controlling a Spry HTML panel with a Jump Menu

Hi, I wonder if anyone can help.
I've implemented a HTML panel within a page to display different page elements and have it working no problem with a simple href and an onClick event but I would like to control what is displayed by using a jump menu (drop down list) - any idea how I can control that to populate the necessary DIV?
eg: <select name="site" size=1 onChange="hpanel.loadContent(this.href); return false;"> (obviously this doesn't work!)
Thanks in advance
Neil

It works fine, but your pages arent found;
http://www.thedesignforge.co.uk/clients/elsevier/laure/v2/dollar_rates.html
See its missing.
But
http://www.thedesignforge.co.uk/clients/elsevier/laure/v2/dollar_rate.html
Exists. So it seems to me you are linking to a incorrect file.

Spry panel button jumps. Jumps!

BIO button beneath the photo jumps downward when clicked, then back up when clicked again. Hmmm. What am I doing wrong? http://alamoassetadvisors.com/who-0626-biopanels-cut.htmla
And here's the css which I have messed around with a little http://alamoassetadvisors.com/SpryAssets/SpryCollapsiblePanel.css

The jumping is caused by the <p> </p> tags around the CLICK AGAIN TO CLOSE line of text Previous text there did not have top/bottom margins, but the <p> does have margins, thus the jumping.
Solve the jump by either restyling that <p> with no top margin or thusly:
<span align="left" class="ah12">CLICK AGAIN TO CLOSE
</span>
Beth

Spry jumping in IE

Similar Messages

Maybe you are looking for