Spry MenuBarHorizontal collapses in FF

Hello, on my site www.michaelcrabtree.co.uk the
MenuBarHorizontal works fine in IE but collapses completely in FF
(3.0.6) to its left hand position with all the menu bar items
appearing on top of each other - 2 links work, the most right hand
one (contact) and corporate - the widest word so the cursor can see
it behind the others. (the drop down left-right postioning placing
in IE is still an issue as I can't figure out how to get it
slightly to the left so it appears directly under family hopefully
is not an issue with the firefox problem). The box that all the
content is in IE also seems to have failed in FF - any ideas? Site
is loosely based on oneColElsCtrHdr.css. Thanks, michael

Hello,
You have your entire menu in an <h2> tag.
In your embedded CSS, you have H2 styled with a
line-height:0px which is
what causes the trouble in FF.
Just remove the line height to test it.
You shouldn't have the menu in an H tag.
Run the page through
http://validator.w3.org/
See which elements UL is allowed in:
http://www.w3.org/MarkUp/html-spec/L2Pindex.html
You can wrap the higher level links in the menu in H2 tags.
For what it's worth, the disable right click only stops the
complete novice
from copying images.
It is a pain for those of us who use right click to do things
like bookmark
or move from IE and FF while trying to troubleshoot code.
Anyone who wants the images can easily get them in many ways,
including the
fact that if they are looking at the image it's already in
their cache.
Some great info:
http://continue.to/hope
Take care,
Tim
Take care,
Tim
"crabtreemi" <[email protected]> wrote in
message
news:gmd3cm$bh8$[email protected]..
> Hello, on my site www.michaelcrabtree.co.uk the
MenuBarHorizontal works
> fine in
> IE but collapses completely in FF (3.0.6) to its left
hand position with
> all
> the menu bar items appearing on top of each other - 2
links work, the most
> right hand one (contact) and corporate - the widest word
so the cursor can
> see
> it behind the others. (the drop down left-right
postioning placing in IE
> is
> still an issue as I can't figure out how to get it
slightly to the left so
> it
> appears directly under family hopefully is not an issue
with the firefox
> problem). The box that all the content is in IE also
seems to have failed
> in FF
> - any ideas? Site is loosely based on
oneColElsCtrHdr.css. Thanks, michael
>

Similar Messages

Spry MenuBarHorizontal in IE

Most common problem with the menubar? Internet Explorer! I need a little help with the Spry MenuBarHorizontal and IE. It works fine in every browser except IE. Using the original file it pushed all the subnavigation in a horizontal line instead of vertical and that pushed the sub-subnav off the screen sometimes. It also pushes the subnav halfway over to the right as you'll see. I created a CSS file that targeted just IE and it corrected the first problem, but not the second. Now it's splitting the menu in 2 parts for some unknown reason. Can anybody help me? Here is a link to the page: http://www.interimdesigngroup.com/MNI/index.html
Thanks,
InterimDesignGroup

Nevermind. Problem solved.

Spry MenuBarHorizontal not working in IE7

Hi,
I'm new and this is my first post. I cannot get the Spry Horizontal Menu Bar to work in IE.
http://educationaltools.org/codnew/default.html
Please help!
Thank you!
Lisa
--UPDATE--
I updated to Spry Prerelease 1.6.1 and it seems to be working. Now I just need to update the css.
Message was edited by: ldsenters

This is what I would to do fix up your menubar CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 9pt;
     z-index: 1020;
     cursor: default;
width: 17.8em;
     position: absolute;
     left: -1000em;
     height: auto;
     border-bottom-width: medium;
     border-bottom-style: none;
/*     top: 28px; Remove this line...in IE, it makes your submenus sit at the top of the screen.
/* 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: 10px; Remove. This must be 'auto' to bring it in from off-screen.*/
left: auto;
/*          width: 18em; Remove
height: auto; Remove
     width: auto; Remove
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/*width: 18em; Remove
height: auto; Remove*/
width: 19em;
DESIGN INFORMATION: describes color scheme, borders, fonts
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: #03F;
     color: #CCC;
/*     width: auto; Remove*/
font-family: Arial, Helvetica, sans-serif;
     font-size: 8.3pt;
     font-weight: bold;
     text-decoration: none;
I've only quoted the styles with changes.
Beth

Spry MenuBarHorizontal Appears Over Image in IE 6&7

I'm working on a website utilizing the spry menu. Image is on the very top of the page and the menu is just below that image. This looks fine in FF and IE8&9 but the menu jumps up and covers the image in IE6&7. I tried changing the width in MenuBarHorizontal CSS from auto to the width of my page because I read that somewhere on this forum but still have the issue. Please help!!!
Here is the portion of the code that's impacted:
<div id="container" style="padding-left:0px;">
<div id="banner"><a href="home.html" target="_top"><img src="images/genesis_banner.png" width="550" height="50" border="0" /></a>
    <ul id="genesis_menu" class="MenuBarHorizontal">
      <li><a href="home.html" target="_top">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="products.html" target="_top">Products</a>
        <ul>
          <li><a href="products/Refrigerant_Gas_Monitoring_Systems.html" target="_top">· Refrigerant Gas Monitoring Systems</a></li>
          <li><a href="products/Compressor_Control_Panels.html" target="_top">· Compressor Control Panels</a></li>
          <li><a href="products/Condenser_Control_Panels.html" target="_top">· Condenser Control Panels</a></li>
          <li><a href="products/Room_Evaporator_Control_Panels.html" target="_top">· Room and Evaporator Control Panels</a></li>
          <li><a href="products/Sensors.html" target="_top">· Sensors</a></li>
          <li><a href="products/Energy_Management_Control_Systems.html" target="_top">· Air-Handler, Chiller, and Energy Management Control Systems</a></li>
          <li><a href="products/Breathing_Apparatus.html" target="_top">· Self-Contained Breathing Apparatus and Accessories</a></li>
          <li><a href="products/Alarm_Indication_Equipment.html" target="_top">· Alarm Indication Equipment</a></li>
        </ul>
      </li>
      <li><a href="about.html" target="_top">About Us</a></li>
      <li><a href="news.html" target="_top">News</a></li>
      <li><a href="contact.html" target="_top">Contact Us</a></li>
      <li style="width: 63px; padding-right: 0px;"><a> </a></li>
    </ul>
</div>
<br />
<img src="images/genesis_banner2.png" width="968" height="100"/> <br />
<br />
</div>
and the CSS:
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 968px;
    text-transform: capitalize;

This is not a Spry related problem, it has to do with normal CSS rules.
Normally I have the following structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>No Title</title>
</head>
<body>
<div id="header">
    Heading
</div>
<div id="nav">
Navigation Bar
</div>
<div id="content">
   Content
</div>
<div id="footer">
Footer
</div>
</body>
</html>
This structure ensures that each of the layout elements is contained within its own wrapping container and not interfere with its neighbouring wrapper
Incidently, your use of the container div is not required if you place the proper rules within the body element.
Gramps

Spry Tabs + Collapsable Panels

Hello,
I have tabs within collapsable panels and in firefox and IE you can see the tabs even if that panel is not open. Any ideas on how to fix this situation?
Thanks, here's my example:
http://www.robvanwyen.com/cv/rfblair/
Best,
Rob

V1 Fusion I was going through Spry forums and saw a problem
that another user had similiar to mine and was wondering if you
could offer some support. I am using the Tabbed panel from Spry and
can only get 5 tabs across before it starts a new tab below the
others. I was looking thru CSS file but not sure what can be
changed so I can allow 6 tabs accross. I'd send you link but it's
behind a firewall. I can send you a screen shot with email address.
Any help greatly appreciate it!!!!!!

Accordion Spry not collapsing in IE but it is in other browsers even Chrome

This is my first Accordion Spry that I am creating and I
cannot figure out why it is not
fully collapsing in IE but it is working flawlessly in all
the other browsers.
Pleease check out the site,
http://www.enrieap.com/. The
accroding is on the right.
Thank you.

If the above didn't help then please attach a screenshot.
*http://en.wikipedia.org/wiki/Screenshot
*https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
Use a compressed image type like PNG or JPG to save the screenshot.

Spry Accordion collapsing problem

I am using an accordion on my site, and also took the advice to update to the latest spry, which didn't seem to make a lot of difference to be honest (I am using DW CS3)
But the problem I am having is when you first come to the page the menu isn't completely collapsed and I wonder if there is a way of doing this...
This is not happening in latest firefox, IE8 or safari on a windows pc
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. Thanks
<!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>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* 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 {
width: 174px;
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.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 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: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;

Teisho wrote:
Thanks for your answer, the problem that I still have is that I am trying to close all the Accordions when clicking
on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
thanks Ant
I am not sure what you want to do here. When you click on an open panel, the panel closes; when you click on a closed panel, it opens and closes any panel that is open.
Please explain.
Sorry, did not see your new post which does explain what you want.
Message was edited by: vw2ureg

Spry bar defaulting to second line in FF

My spry bar works great in safari and IE, but defaults to a second line in FF. Thinking this might solve the problem, I changeed the spry MenuBarHorizontal.css width both up and down, from 10 as far down as 6 and as high up as 13, and this does nothing except screw up Safari and IE (it seems '10' is the only width that works on Safari and IE). What do I do to get FF to show the menu on one line?

eberhoo wrote:
My spry bar works great in safari and IE, but defaults to a second line in FF. Thinking this might solve the problem, I changeed the spry MenuBarHorizontal.css width both up and down, from 10 as far down as 6 and as high up as 13, and this does nothing except screw up Safari and IE (it seems '10' is the only width that works on Safari and IE). What do I do to get FF to show the menu on one line?
The original Spry files do work in all modern browsers. Which means that you have changed something, probably within the CSS-file, that has upset the delicate balance.
Compare the original CSS with the one that you have modified and you may be able to figure out where the problem lies. The 10 commandments may help you out and can be found here http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
I hope this helps.
Ben

MenuHoriz dropdown horizontal in IE 7

The Spry MenuBarHorizontal drop down elements run
horizontally and not vertically in IE 7. It works properly in
safari and firefox.
I have updated the .js to 1.5, but the problem persists.
Files are hosted on our dev server at:
http://www.msldevserver.com/clients/holyChild/staging/index2Col.html
Thanks for the help.

I found the answer to the problem. In the SpryMenuBar
Horizontal.css I made theses modifications:
ul.MenuBarActive
added position:relative
then I modified it using the solution by DM8:
ul.MenuBarHorizontal ul
tag's position element as absolute
ul.MenuBarHorizontal ul li
tagg add the following:
clear:left;
float:none;
and removed the width
As well I removed the div tags that I used on the html to
center the main menu rollover text and then I centered the text
directly in the spry menu css.
ul.MenuBarHorizontal li
text-align: center; ( instead of the default left)

How to automatically open and close collapsable spry panels?

I designed a collapsable spry panel in DW to open and close automatically, with a 10 sec delay, unless person clicks on tab to close immediately.
The spry panel opens automatically, but will only close if i click the tab.
Is there a way for the collapsable spry panels to close automatically?
[Moved to Spry forum by moderator]

Arnout,
I feel certain the answer I need is in the reply you posted here, but I need a little more help to know exactly what to do. I am using a collapsible panel to show and hide a series of onload panoramic photos near the top of my page. What I want is for the collapsible panel to be open on some pages and closed on others and I want the animation of the panel closing to be seen too. I'm thinking this should be achievable with some sort of onload trigger or something. Currently I've gotten close to what I want by referencing two different .js files (one for the "open" panel state and another for the "closed" panel state), but this doesn't show the graceful animation of the panel closing. Any ideas on how to achieve what I want? Here is the url of the test site I'm developing: http://www.gregdanpartners.com/lrre2/index.html
Thanks in advance.
Dan

Spry menu bar won't collapse

When I open a page in Dreamweaver CS5.5, the menu bar code appears like this
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
and further down this
<script type="text/javascript">

</script>
</body>
</html>
and the menu bar then won't collapse.
Initially, I deleted the the ../ in front of the SpryAssets, and the problem was solved, but this no longer works.
I would love to know why this is happening - the menu bar works on the website, just as soon as I copy them to my computer and open them in DW, I have this problem
As a result, I can't edit/update any pages as the menu bar stops working.
Windows 7 64 bit, Dreamweaver 5.5
Many thanks
D

cheekbones1 wrote:
It appears that I have to do this for every page, but that's not a problem as long as it works...
Be careful. If the orginal pages had the ../ infront of them when you took over the site then this means the pages were stored in a sub-folder of the site. If youre moving those pages to a different location within your site folder then make sure that the other links on your page work too because storing them in a different location within the site folder will break the links.
If you do move pages within your site folder do it through the site files panel then Dreamweaver will ask if you want to update the links if you move the pages to another place in the site folder.

My Spry collapsable panel works on Dreamweaver but not on my published site

I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great.

I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great.

Spry Accordion not collapsing properly in IE & Firefox

My design portfolio is on my testing server. The accordion
works perfect in Safari but it will not collapse in Firefox and
Internet Explorer. Here is the link:
http://deptart2.memphis.edu/~jwilcoxen/web_portfolio/home.php
. Please help. I attached my spry accordion css.
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* 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: none gray;
border-right: none black;
border-bottom: none gray;
overflow: auto;
background-color: #FFFFFF;
font-family: "Gill Sans", "Helvetica Neue", "Arial Narrow",
sans-serif, Helvetica;
padding: 10px;
background-image: url(../images/glowbg_home.jpg);
background-repeat: no-repeat;
text-align: left;
text-indent: 8px;
/* This is the selector for the AccordionPanel container
which houses the
* panel tab and a panel content area. It doesn't render
visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
background-color: ##54275F;
/* 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.
.AccordionPanelTab {
background-color: #000000;
border-top: 1px none black;
border-bottom: 1px none gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
color: #CCCCCC;
font-family: "Gill Sans", "Helvetica Neue", "Arial Narrow",
sans-serif, Helvetica;
font-size: 12px;
font-weight: normal;
/* 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: hidden;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
text-align: left;
vertical-align: 50%;
height: 326px;
/* 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: #4F285B;
/* 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: #51275D;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #FFFFFF;
background-color: ##54275F;
/* This is an example of how to change the appearance of all
the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is
programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #000000;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: ##54275F;
height: 310px;

Thanks Gramps, that information was really helpful.
I just removed all instances of 'rgba' in the .css rules that specify color, changing it to 'rgb' and also removing the 4th parameter indicating the transparency value.
Now that I understand what the problem was it actually makes complete sense, since IE does not support transparency.
Thanks again.

Horizontal Spry Menu and Header Collapse in Browser

If you look at this webpage in anything other than IE (specifically Safari), the header and spry menu are kind of collapsed into about a 600px frame, as opposed to the designated 800px area. Any thoughts on why this is happening? It looks fine in IE however... hmmm
Thanks
Sean

Der nevermind. Answered my own question by opening my eyes.
Thanks
Sean

Collapse Spry accordion panels

Is it possible to collapse the spry accordion panels when working in design view? I want to put more content on the page below the accordion, but it is obstructing my view of the rest of the page.

Is it possible to collapse the spry accordion panels when working in design view? I want to put more content on the page below the accordion, but it is obstructing my view of the rest of the page.

Spry MenuBarHorizontal collapses in FF

Similar Messages

Maybe you are looking for