Spry MenuBar1 IE Issue
Website works great in FFX 16 and Chrome 21, IE 9 has issues displaying the menu, and it does as well in IE8 or 7 if I use the developer tool to look at compatability. The menu should have the top menu items going from right to left, instead in IE it goes from top to bottom.
suppose to look like this:
instead in IE it looks like this once I accept the Active X pop-up:
Here's the 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;
/* 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: center;
cursor: pointer;
width: 8em;
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: auto;
position: absolute;
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
width: auto;
display: block;
white-space: nowrap;
float: none !important;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
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
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
float: none !important !important;
float: none;
/* 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: #33C;
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: #33C;
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: none;
background: #FFF;
Fixed my own issue after playing long enough. Commenting out the entire section for browser hacks worked! Now it looks great in IE 9, 8, & 7
Similar Messages
-
Spry Image Slideshow issue in IE8 - Another Error
I looked at the other discussions pertaining to Spry Image Slideshow issues. The slideshow works well in Firefox but I'm getting an error in IE 8 .
https://www.devens.army.mil
Webpage error details from SpryDOMEffects.js, line 389
Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
get: function(ele, prop)
return ele.style[prop];
set: function(ele, prop, val)
ele.style[prop] = val; (line 389)
Thank you for any help you can provide.I've noticed that you fixed the problem can you tell me how to fix it?
having same problem here -
Spry Menu Bar issue, NEED HELP...???
Here is the coding for a menu bar that i created with CS3, for some reason i am having an issue when i open the web page in IE, on firefox and safari it looks fine, the menu drops down to sub menu's fine, but for some reason when i open it in IE, the submenu's show on the very top of the page rather than right below the menu itself, please check my coding and see if there is an issue???
i ran compatability and there are no issues shown.
@charset "UTF-8";
/* SpryMenuBarHorizontal.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, 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;
/* 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: 10.4em;
float: left;
background-image: url(tab2.png);
/* 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: 8.2em;
position: absolute;
left: -1000em;
text-decoration: underline;
/* 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;
background-image: url(../tab1.png);
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
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: default;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
border-left-color: #0063bd;
border-right-color: #0063bd;
border-right-width: 3px;
border-left-width: thin;
font-family: Calibri;
font-weight: bold;
font-size: 19px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #000000;
/* 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
color: #000000;
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;
/* 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-block;
f\loat: left;
position: relative;Hey gramps, thanks for the info, i have updated my spry framework to 1.6.1 but the problem is still the same, i recreated my menu with the new 1.6 and it still doing the same thing, the submenu's are like vertically reversed... ugh need help.
here the new code
@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;
/* 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: 10.4em;
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: 8.2em;
position: absolute;
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;
background-image: url(../tab1.png);
line-height: 18px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
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
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
font-size: 19px;
font-family: Calibri;
font-weight: bolder;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #000000;
/* 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
color: #000000;
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-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-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-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-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;
/* 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; -
Spry menu positioning issue in IE?
Hi,
I am quite new to dreamweaver and using spry menus but I have decided to create a horizontal spry bar in my website.
The menu works fine in safari but the menus and submenu are out of position when using IE and shift to the right.
Please could you let me know how I can fix this problem and if you can see any other issues in the code i need to sort out?
Here is the code:
@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 auto;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 846px;
font-family: Verdana, Geneva, sans-serif;
height: 28px;
/* 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: center;
cursor: pointer;
width: 141px;
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% 0 0 0%;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 141px;
position: absolute;
left: -1000em;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
/* 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;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
border-top-width: 0pt;
border-right-width: 0pt;
border-bottom-width: 0pt;
border-left-width: 0pt;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 141px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 2% 0 0 100%;
/* 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
width: 141px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
border: 1px solid #000;
background-image: url(BtnBackground.gif);
font-size: 10px;
background-repeat: repeat-x;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image: url(BtnBackgroundOver.gif);
background-repeat: repeat-x;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
/* 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
color: #FFF;
background-image: url(BtnBackgroundOver.gif);
background-repeat: repeat-x;
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(BtnBackground.gif);
background-repeat: repeat-x;
color: #FFF;
font-size: 10px;
/* 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(BtnBackground.gif);
background-repeat: repeat-x;
/* 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(BtnBackgroundOver.gif);
background-repeat: repeat-x;
/* 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(BtnBackgroundOver.gif);
background-repeat: repeat-x;
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;
Also, i've noticed that when the menus go over the top of flash objects the text is not so clear or bright!!! If anyone knows a way to sort this that would be great too!Add/modify the following
ul.MenuBarHorizontal li {
text-align: left;
ul.MenuBarHorizontal a {
text-align: center;
Gramps -
I have a vertical spry menu bar and it opens up to the right
over the text on the page.
In Firefox it displays correctly, but in iExplorer, when the
cursor hovers over the drop down menu, it only stays highlighted
and open when the curser is directly over the text in the spry box,
or if there is no text on the page. But when the cursor is over
empty space in the box and there is text on the page behind it, the
box closes.
How do I fix this?Hello Beth,
The piece of CSS you see there is actually a fix for Internet Explorer 6. It has bug where form elements such as selects will go through divs and other elements, in this case the <ul>'s of the menu bar. To resolve this issue, a iframe is generated and carefully placed under the <ul> elements. This way the form elements will no longer pass through the <ul>'s
If you menu is no where near a form element you could remove the iframe generation code form the javascript and savely remove that related stylesheet rule. But i do not recommend such practices. But that would be the only fix for the validation issue. Well.. Thats not true actually you could apply those styles through JavaScript... So that might actually be another option.
So it all depends on how hefty you weight validations. Validations are guid lines. Because a page doesn't "validate" it doesn't necessary mean the page is doomed and will crash all browser that comes on its path . But clients are usally verry narrow minded. So good luck with that .
So without further ado, the fixes:
- do nothing as it doesn't harm your page, it merly fixes internet explorer.
- removal of the iframe from JS:
line 289, remove:
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
line 317, remove:
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
- move the css to JavaScript:
line 243 find:
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
and add under:
layer.style.position = 'absolute';
layer.style.zIndex = 20010;
layer.style.style.filter = "alpha(opacity=0.1)";
Happy hacking -
Hi guys
I have tried to implement a Spry Accordion function using DW CS3 to allow me to display current and previous news on a website, however I am having issues with getting it to display properly. You can view the page here: http://www.amiante.co.uk/news.html
When testing the site in various browsers I noticed a glaring issue, underneath the According there is a massive white space, which to me appears to be the space that would be taken up if each panel of the according were to be opened at the same time....
This issue occurs in Firefox 3.5.3, Safari 4.0.3, Opera 10.0 and Google Chrome 3.0.195. It seems to work faultlessly in IE 8, IE 7 and IE 6.
The confusing aspect is that if you zoom in (ctrl +) and zoom out (ctrl -) it seems to remove the white spacing.
If anyone has any idea of what is causing this I would be delighted to hear from you!
Thanks in advance.
MackenzieThank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
the files are under:
images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
Thank you so much, I do greatly appreciate your kind help.
the other one is
The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
Thanks again for helping an newbie, I appreciate it. -
I have inserted a Spry Accordion in Dreamweaver CS5, however, I'm having issues with the viewing of the tabs on load, on hover, etc. I want a dark blue tab on load, have it change to a wavy red white tab, and when opened go to a dark blue tab with a star. I can never get this to work as I want. I've checked the image files and they are labeled correctly. The test site is www.sbcvote.us/index_spry.html
I am a novice, and really have a hard time on this issue, that no doubt is not that complicated to those that know.
Thank you in advance for your help.
On my index page I have the css page reference.
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
the css code is:
.AccordionPanelTab {
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font:Verdana, Geneva, sans-serif;
color:#FFF;
font-weight:bold;
background:(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* 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;
background-color:#EEE;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* 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 {
background:url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
.AccordionPanelOpen .AccordionPanelTabHover {
background: url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-color: #EEE;Thank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
the files are under:
images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
Thank you so much, I do greatly appreciate your kind help.
the other one is
The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
Thanks again for helping an newbie, I appreciate it. -
Spry Tabbed Panels: Issue in Safar 4
I am having an issue with Spry Tabbed Panels that only seems to happen in Safari 4. I am using Spry Tabbed Panels 1.4 through Dreamweaver CS3. The tab panel still works great. Now, though, when you select a tab, it put a blue link border around the tab itself. When you load the page the tabs are fine. It only occurs when you select a tab and only on the selected tab. I looked around for any other sites that were using tabbed panels and it happens on those sites as well.
I am including a site I found that has a perfect example:
http://www.daughterskitchen.com/cookiediet.html
Click on one of the tabs where it says about the cookie diet.
I have looked into any way to stop this from happening. Has anyone seen this and come up with a solution?
If you need more info, let me know.
Thanks.I think your are referring to the css attribute: outline:none;
Added outline:none; to the css rule and it should be gone. -
I'm having an issue with a footer table that is underneath my spray asset. When you open the site in Safari, this table appears off to the side of the spry content, when I'd like it to appear beneath the content..as it is a footer..This ONLY happens in Safari! It works perfectly fine in IE, Chrome, and Firefox.
I think it may have something to do with the fact that each content area of the tabbed panels is a different height, but I'm not sure how to go about fixing this. Can anyone help me?
Here's the website:
http://www.duffsdepew.com
Thanks so much!You are using Spry version 1.4. At the very least you should be using Spry version 1.6 which will likely overcome your problem.
Even better is if you switch to Spry Tabbed Panels 2. Have a look here http://labs.adobe.com/technologies/spry/ui/
I hope this helps.
Ben -
I'm using Spry HTMLPanel with the Fade effect. Everything
works great in Firefox, but in ie7 the transparency on a png is
messed up if the html section is displayed through HTMLPanel. If I
look at the page directly it looks fine, and the problem only shows
when using HTMLPanel. Any suggestions?123456789lw escribió:
> Hello,
> I am having a slight issue with the spry squish effect.
>
> Essentially what I want to do is click on link1 and
"container1" opens. Click
> on link2 and "container1" closes and "container2" to
opens.
> So far I have gotten to the point where I can do this,
however it only works
> in one direction. And if I click link2 first, it calls
up the function where
> "container1" goes from 0% to 100% back to 0%, then the
function opens
> "container2".
>
> Eventually I would like to have 5 containers which will
first close
> "containerX" and then open "containerY" or somehow
replace the "containerX"
> with "containerY".
>
> Anyone know how to do that? I have my div set as hidden
and position:absolute.
>
> Any help would be most appreciated! :)
>
> Thanks,
> Lisa
>
Yeah, I see well, I haven't done much with effects but IMHO
you can
achieve something similar with less work with Tab Panels or
Accordions
at least in regards of open one contest and close another
just as your
first post suggested. Of course you can try with effects but
to be
honest I haven't experiment much with them. Hope someone else
does and
help you in this topic. -
Spry Effects: Squish Issue
Hello,
I am having a slight issue with the spry squish effect.
Essentially what I want to do is click on link1 and
"container1" opens. Click on link2 and "container1" closes and
"container2" to opens.
So far I have gotten to the point where I can do this,
however it only works in one direction. And if I click link2 first,
it calls up the function where "container1" goes from 0% to 100%
back to 0%, then the function opens "container2".
Eventually I would like to have 5 containers which will first
close "containerX" and then open "containerY" or somehow replace
the "containerX" with "containerY".
Anyone know how to do that? I have my div set as hidden and
position:absolute.
Any help would be most appreciated! :)
Thanks,
Lisa123456789lw escribió:
> Hello,
> I am having a slight issue with the spry squish effect.
>
> Essentially what I want to do is click on link1 and
"container1" opens. Click
> on link2 and "container1" closes and "container2" to
opens.
> So far I have gotten to the point where I can do this,
however it only works
> in one direction. And if I click link2 first, it calls
up the function where
> "container1" goes from 0% to 100% back to 0%, then the
function opens
> "container2".
>
> Eventually I would like to have 5 containers which will
first close
> "containerX" and then open "containerY" or somehow
replace the "containerX"
> with "containerY".
>
> Anyone know how to do that? I have my div set as hidden
and position:absolute.
>
> Any help would be most appreciated! :)
>
> Thanks,
> Lisa
>
Yeah, I see well, I haven't done much with effects but IMHO
you can
achieve something similar with less work with Tab Panels or
Accordions
at least in regards of open one contest and close another
just as your
first post suggested. Of course you can try with effects but
to be
honest I haven't experiment much with them. Hope someone else
does and
help you in this topic. -
Hi,
I'm having a major headache with IE 7 caching issues at the
moment.
I've tried adding all the no-cache headers to both the
generated xml, and the actual spry page to no avail. I've also
tried using random characters to the xml file and changing the
retrieval method to post rather than get, but still no joy.
My page basically lists a group of monitored servers, and
their current status, retrieved as xml output from an asp script
accessing an sql server database. The spry reload time for the data
is set at 10 seconds. On every refresh of the xml, the IE memory
issue jumps, and doesn't seem to release anything. Everything works
ok in Firefox, just good old IE 7 that i'm having issues with.
Any ideas gratefully received.Hi uk_jim,
Give this a try:
http://www.infoaccelerator.net/index.cfm?event=showEntry&entryId=F22C2021-1372-FA49-994AC8 29431456FB
--== Kin ==-- -
I've just started using AIR & Spry and am having problems
getting the Spry.Data.XMLDataSet working when I convert it to an
AIR app. It works fine in my local html but I get the error:
spry:region or spry:detailregion attribute has no data set!
when I load the AIR application. My xml doc is sitting in the
same folder as the html page.
I can read data from an xml file using the XMLHttpRequest
object.
Is this a known issue? Any ideas?
Thanks.What version of Spry are you using? If you are going to work
Spry and AIR, you will need Spry 1.6.1 to work within AIR's
application sandbox. You can find the details here:
http://labs.adobe.com/technologies/spry/air.html
and a case study that shows what I had to do to make the
Photo Gallery work in AIR 1.0 here:
http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html
--== Kin ==-- -
Why does my spry menu bar look fine on my computer/my browser, but co-workers browsers show the menu and it's all messed up? Below is my code.
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">ADULTS</a>
<ul>
<li><a href="/SIDE BAR OPTIONS/ADULT REC/ADULT REC.html">ADULT REC</a></li>
<li><a href="/SIDE BAR OPTIONS/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">ADULT TRAINING FACILITIES</a></li>
<li><a href="/SIDE BAR OPTIONS/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
<li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">FAMILY LIVING</a></li>
<li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">YOUTH</a>
<ul>
<li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">AFTER SCHOOL PROGRAM</a></li>
<li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">AKTION CLUB</a></li>
<li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">CHALLENGER BASEBALL</a></li>
<li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">EARLY INTERVENTION</a></li>
<li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
<li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-BALL</a></li>
<li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">TEEN CLUB</a></li>
<li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">TRAINING & TRANSITION</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">EVENTS</a>
<ul>
<li><a href="/SUBNAVMENU/EVENTS/LipSync.html">LIP SYNC</a></li>
<li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">TOURING FRIENDS</a></li>
<li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">ANNUAL PICNIC</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">OTHER</a>
<ul>
<li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">EDUCATION & THERAPY</a></li>
<li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">EQUIPMENT LOAN</a></li>
<li><a href="/NAVBAR/VOLUNTEER/Volunteer.html">VOLUNTEER</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" a href="#">EMPLOYEES</a>
<ul>
<li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
<li><a href="/SUBNAVMENU/MEET OUR STAFF/MeetOurStaff.html">MEET OUR STAFF</a></li>
<li><a href="/SUBNAVMENU/EMPLOYEE ACCESS/AccessPage.html">EMPLOYEE ACCESS</a></li>
</UL>
</ul>Have a look at lines 212 and 213 which read as follows
<script src="file://///SNCentral/Home/akaniecki/My Documents/Web Site Root Folder/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file://///SNCentral/Home/akaniecki/My Documents/Web Site Root Folder/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
The red part shows the URL to the files. However, these files point to your locahost.
In your template, The links should look like
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
Also make sure that the files do exist in the remote SpryAssets folder. -
I have created an image for the accordion tab panel (c.g the heading of the accordion menu). I then created a hotspot on the image to go directly to that site without having to open the accordion menu. However in IE6 the hotspot is ignored and the panel just opens up and down it doesn't go to the respected link. I tried it in Firefox and it works as designed. I am curious if there is an IE 6 fix.
ThanksBen, it is more then just a hotspot it is a hotspot on the accordion panel. Here is the code. As I mention before it works in firefox just not IE6.
<!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>
<title>None</title>
<link href="_css/stylesj.css" rel="stylesheet" type="text/css" />
<link href="_css/NoeditN.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBarprocess.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<link href="SpryAssets/SpryAccordionprocessjk.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
</head>
<body>
<td width="299" align="center" valign="top" bgcolor="#FFFFFF">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab2">
<a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn1.jpg" width="240" height="36" border="0" />
</a>
</div>
<div class="AccordionPanelContent">
<br /> <br /> <br /> <br />
</div>
</div>
</div></td>
<td width="299" align="center" valign="top" bgcolor="#FFFFFF"><div id="Accordion2" class="Accordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab2">
<a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn2.jpg" width="240" height="36" border="0" usemap="#Map2"/></a>
</div>
<div class="AccordionPanelContent"> -<a href="r">Define Test Requirements</a><br />
- <a href="#">Specification</a><br />
- <a href="y">Maintenance Requirements</a><br />
- <a href="w">Customer Requirements</a><br>
</div></div></div>
</td>
<td width="249" align="center" valign="top" bgcolor="#FFFFFF"><div id="Accordion3" class="Accordion" tabindex="2">
<div class="AccordionPanel">
<div class="AccordionPanelTab2"><a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn3.jpg" width="240" height="36" border="0" /></a></div>
<div class="AccordionPanelContent">
- <a href="#">Deliver Parts</a><br />
- <a href="#">Perform</a><br />
- <a href="#">Configuration</a><br />
</div>
</div>
</div>
</td>
<map name="Map2" id="Map2">
<area shape="rect" coords="15,11,41,26" href="http://http://www.Hollywood.com"/>
</map>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {useFixedPanelHeights:false, defaultPanel:-1} );
var Accordion2 = new Spry.Widget.Accordion("Accordion2", {useFixedPanelHeights:false, defaultPanel:-1});
var Accordion3 = new Spry.Widget.Accordion("Accordion3", {useFixedPanelHeights:false, defaultPanel:-1 });
//-->
</script>
</body>
</html>
Maybe you are looking for
-
HELP - "...disk could not be read from or written to."
i have a brand new 80GB ipod which has given me nothing but trouble. the latest is this error message - "attempting to copy to the disk failed. the disk could not be read from or written to." could somebody please help??? i've disabled my anti virus
-
Will i need to ersae my disk?
Hopefully some one can help.... I have a Flat Screen iMac, 800Mhz G4 Superdrive. 256 MB RAM and 60GB Hard Drive. I have also fitted AirPort card. I had been working on OS 10.2.8 however i wanted to upgrade to Tiger. I purchased set of 4 discs from Ap
-
Splitter control in web dynpro ABAP
Hello everyone, My requirement is my view will have 2 panes. The user wants a functionality where if he moves cursor on the separator bar for two panes, it should turn into the re-sizing arrow and allow him to resize the pane. I have searched for a w
-
Need to PRINT with PANTONE spot colors - PROBLEMS
Hello! This is my first post here. I am from Poland and I designed artwork for a 12" vinyl. It is going to be pressed in the US and so will be the cover get printed there. This is my first abroad work... So far when i wanted to use Pantone for printi
-
Acrobat 8 - IE7 - XP - TIF Images linked from website
All, We use Adobe Acrobat 8 Standard and Professional on a number of Windows XP desktops that are updated nightly with a Windows Update Server. We manually configure workstations to open TIF images with Acrobat such that they open just like a PDF wo