Spry Accordion Problem in IE7

Hi,
I have created a Spry Accordion containing 7 sections, using CS4. It works perfectly in Firefox, however there is a strange bug in IE7. The top section requires the scrollbar and this is working ok. However, the other 6 sections all have the same problem (btw, none of these other 6 are needing the scrollbar as the text does not fill the content area) - the bottom line of text in each of the 6 other accordion sections is not displayed. All the other text in the 6 sections is ok (other than the fact that the top margin is non-existent - I assume that can be fixed fairly easily)
Has anyone else had this problem, and are there any know fixes?
many thanks for any help offered

Since the answer to your question requires some knowledge of Spry, you might want to post it in the Spry forum. Be prepared to post a URL to the problem page, if asked.
Mark A. Boyd
Keep-On-Learnin' :-)

Similar Messages

Spry Accordion Problem in Internet Explorer

Hi,
i have created a spry accordion menu in Dreamweaver CS3. My
problem is that when I click in Internet Explorer, small selection
handles appear all round the accordion object. This looks quite
poor then. Any ideas how I can get rid of these?
Thanks.

Except for the fact that Spry Accordions are involved, the problem is hardly Spry related.
Having said that, I will try to help you on your way to solving your problem.
The following is a list of my observations
the <div id="wrapper"> on line 74 does not have an ending tag
<div class="right-column" has 35px padding on the right but not on the left. Because IE interprets the so-called box model differntly to other browsers, and because the div is floated right, the left edge of the div will be pushed further to the left than on other browsers. It may be an idea to put at least some of the padding on the left to keep it clear of the divider line
the field set in your contact form is 460px wide, the div surrounding it is only 440px and again IE reacts differntly to other browsers in that it expands the parent to suit the child. Try reducing the width of the fieldset to say 400px.

Spry Accordion problem using URLutilis

Hi, I'm using a spry accordion and have the 3rd panel opening as default.
I'm now trying to use URLutilis to open a specific accordion panel from another html page,
but as soon as I amend the target page code, all the panels of my accordion default to open.
This is the code I'm using in the head:
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
This is the code I'm using in the body:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 1});
I still have SpryAccordion.js set as:
this.defaultPanel = 2;
Could someone let me know where I'm going wrong and why all panels are now open?
Cheers,
Andy

Since the answer to your question requires some knowledge of Spry, you might want to post it in the Spry forum. Be prepared to post a URL to the problem page, if asked.
Mark A. Boyd
Keep-On-Learnin' :-)

Spry Accordion problem in IE8

Hi to all
I created a menu item list using the spry accordion for the left menu on a website. The spry works perfectly when I'm testing the site locally, but when I load the site directly to the ftp server and test it on the web, the spry accordion wont work at all. There´s no animation, the tabs that have content only shows scrolling bars. I added the .css and .js styles to the site but is not working.
You can view the site here. It´s the left menu.
Thanks in advance...

Hi, it looks like there is a problem with the javascript at the bottom of your page. There is an error with the line "swfobject.registerObject("FlashID");" (line 226). And that is keeping your accordion declaration from happening. If you fix the error (which is 'swfobject is not defined') the panel should work properly. Quick fix is to move the accordion declaration statement above the statement causing the error. Hope this helps.
Dan

I have a spry accordion problem with IE.

When I scrol down and open a panel in my spry accordion something decides to go to the first panel.
After that I have to scroll down to the opened panel.
I want to see the opened panel at once when I opened it and not go to the top of my page first.
This is no problem in ff, safari and chrome. That works fine.
Any one knows this problem and how do I solve it?
Thanks.
http://www.zeelandseaport.nl

those here
http://labs.adobe.com/technologies/spry/

Dreamweaver Vertical Spry Menu Problem in IE7

I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.8em;
cursor: default;
width: 150px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #FFFFFF;
color: #333;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #FFFFFF;
color: #333;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.8em;
cursor: default;
width: 150px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #FFFFFF;
color: #333;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #FFFFFF;
color: #333;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Spry submenu problem in IE7

Hi everyone,
I am having a problem with Dreamweaver CS3 where the spry
horizontal menu's submenus shift over to the right and level with
the bar rather than dropping down as a submenu should. This only
happens in IE7 however, not in Firefox or any other browser I have
tried. The website is
http://www.daytonlifepurpose.org/homePage.html
I tried the spry 1.5 js file "fix" but had no luck. Any help
at all would be greatly appreciated! Thanks!

Hi everyone,
I am having a problem with Dreamweaver CS3 where the spry
horizontal menu's submenus shift over to the right and level with
the bar rather than dropping down as a submenu should. This only
happens in IE7 however, not in Firefox or any other browser I have
tried. The website is
http://www.daytonlifepurpose.org/homePage.html
I tried the spry 1.5 js file "fix" but had no luck. Any help
at all would be greatly appreciated! Thanks!

Spry accordion problem with IE

I tried to make a site using all different spry-widgets, so I
made tabbed panels and in them accordion panels (and in other
panels other spry-things). It works well in FF but in IE the
accordionpanels stay all open.
Can someone help me out.
Many thanks

those here
http://labs.adobe.com/technologies/spry/

Spry accordion problem

I have rebuilt my PC, and I have got a website that has had an accordion for years and it has worked fine until doing my PC rebuild... the accordion doesn't collapse anymore. It stays open, however this only happens locally; the live site still works fine, so I can't even show it to you. What has gone wrong for me locallly?
Thanks
Mat

I have tried that. The funny thing is there is a sister site that has pretty much the same javascript and css apart from colours and that works fine both on the live site AND locally.
Is the default spry framework in CS4 the most recent? I recall that when CS3 came out, I had to update that because accordions didn't close fully, and that was addressed in the update. However, that shouldn't have any bearing on an accordion which is already created as the code for was written years ago.

Spry Accordion Problems

Hi.
I would like to ensure that menus stay open while the visitor
is browsing sub menu items
Please visit my site to see what I mean:
jeffcooperdesign.co.uk/devonsailingtemp
Click on Adventure Sailing, the menu opens, then click on
Around Britain. You are taken to the page but the menu has reverted
to its closed state. I would like the Adventure Sailing menu to
stay open all the while the user is browsing its submenus.
Thanks

Then what you need it's collapsible panel. Have a look:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Thogh you'll need to upgrade your spry version to 1.6.1. Here
is the
link to do it:
http://labs.adobe.com/technologies/spry/home.html
Jeff R Cooper wrote:
> Hi.
>
> I would like to ensure that menus stay open while the
visitor is browsing sub
> menu items
>
> Please visit my site to see what I mean:
> jeffcooperdesign.co.uk/devonsailingtemp
>
> Click on Adventure Sailing, the menu opens, then click
on Around Britain. You
> are taken to the page but the menu has reverted to its
closed state. I would
> like the Adventure Sailing menu to stay open all the
while the user is browsing
> its submenus.
>
> Thanks
>
>
>
>

Spry Accordion gains scroll bars in IE7

Can anyone suggest a fix for a problem I've encountered on a
spry accordion? The accordion has eight panels, each containing an
image. Each image has a hot spot linking the image on that
particular accordion panel to another web page. When I view in
different browsers, FF and IE6 look fine and work fine. When viewed
in IE7, each of the panels has scroll bars on the bottom and right
side, as if the image is too large.
What is causing the scroll bars to appear only in IE7?
Thanks!

Same problem here too. Also, I can't get a Spry horizontal
menu bar to center within the accordion. As with the extra spacing
glitch, it looks fine in everything except IE7. Is IE still the
browser of choice these days? I don't use it, but I do try to get
things to look correct in it.
Thanks

Spry Accordion not working in IE7 and IE6

My spry accordion is working great in Chrome, Safari, Firefox, and IE8, but not in IE7 or 6. The panels are expanded and not hiding.
The site is www.christendom.edu/n. It is there on the left. I am using Spry 1.6 and have googled this question to the ends of the internet and can't figure out why.
Please help!

Remove the offending comma (marked in red)
var Accordion1 = new Spry.Widget.Accordion("LeftMenu", {useFixedPanelHeights: false, defaultPanel: -1, duration: 250, fps: 90, });
FYI, you do have other problems with your code which is made evident by the yellow triangle in the left bottom corner of IE.
I hope this helps.
Ben

Spry Accordion issue in IE6/IE7

I'm having a problem with the Spry Accordion widget that I
placed on this page:
WireCare Customer
Support
It works flawlessly in Firefox, but the tab expansion is
erratic in IE 6 and IE7.
If anyone has a solution, I'd love to hear it.
Thanks in advance.
Ken
Edit to add:
I'm using CS3 with the version of Spry that installed with
the original software. I don't know if that's the latest version,
or if the new version has a fix for this problem. I'll upgrade to
the latest Spry version and hope that helps.
K
Edit 2:
I am using the latest version of Spry, so it may not be a
version issue.
K

Found the problem.
The solution was in a previous post on a similar subject.
I added a DOCTYPE declaration to the page, and it works much
smoother now. Not as nice as in Firefox, but acceptable.
Ken

IE7 + DWCS3 + Spry Accordion = Issues

I'm using the Spry accordion feature in DW. The page is
displaying fine in FF2 on PC. In IE7 each section is expanded
fully. When I select any of the sections they contract rather than
expand. It's weird. I thought that maybe it was something that I
had done with my CSS. So, I replaced my CSS with the default CSS
and inserted a temporary accordion to test with. It had the same
effect. Does anyone know how to fix this? The link to the page to
view what's going on is
http://www.pappasdg.com/jose/NEWSITEPROJECTS/teamforceinc.com/teamforceinc.com/services.ht ml

I've figured out the problem for my issue. I had to insert
.AccordionPanelClosed {
overflow:hidden;
height:20px;
into my css. I would think that when DW creates the css file
it would automatically insert all the required css coding.

Colour problem with Spry Accordion

Hi, I'm trying to create a website with a spry accordion. I've had some trouble with it (as I'm not good at CSS, it's new to me) and I've solved them all except for one: a problem with the colour of the bar when the section is open.
This is my website: http://s313354774.mialojamiento.es/saibe/design3/Publish/INICI.html
When the menu is closed everything is ok, but when you open it then the colour changes, making a gradation between the new colour and the original one. I've checked the stylesheet and there the original colour doesn't appear anywhere, so it's wierd to me.
Does anyone know why is it happenning? If i'ts because something stupid forgive me, as I told you this is quite new to me and I'm trying to learn day by day.
Sergi

Segi,
This one has got me stumped. If I copy your SpryAccordion.css and apply my copy to the document, there is no problem. Have a look here http://pleysier.com.au/sergi/
I know this will not help except to say, that if you change
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
to
<link href="http://pleysier.com.au/SpryAccordion.css" rel="stylesheet" type="text/css" />
see what happens.
Gramps

Spry Accordion Problem in IE7

Similar Messages

Maybe you are looking for