Problem with Spry Menu Crashing i.e. 7.0
Here is the site address www.skiotter.com It's odd - ie6 on another computer works fine - ie 6 on a third computer crashes - the crash is essentially a freeze during the homepage load.
Any help would be greatly appreciated. Thanks!
Here is the site address www.skiotter.com It's odd - ie6 on another computer works fine - ie 6 on a third computer crashes - the crash is essentially a freeze during the homepage load.
Any help would be greatly appreciated. Thanks!
Similar Messages
-
Problem with Spry Menu Bar 2.0 (1.0) re - CSS
Hello:
I am having some difficulty with a Spry Menu Bar (horizontal) 2.0 (1.0) that I have created. Initially I thought the problem was with regard to rendering issues on IE 6.0, however the problem seems to be more general than that and I have come to believe that it has to do with the CSS created by the Widget Browser and modified once imported into the webpage. Hence I have elected to post my issue here rather than on the spry page.
I have relied on the tutorial provided by David Powers (Bayside.css) and in addition other documentation regarding the Spry menu bar UI. The problem appeared to be one of IE 6 rendering the page with a gap that is created when the drop down menus appear, thus pushing down any divs that appear below the page.
However, through a painstaking process of trial and error my problem now seems to be that when I export the CSS generated by the widget browser to an external style sheet (the general style sheet governing the whole site), it conflicts with other CSS styles regarding links etc. The end result is that all the padding, background colours, background images, and text colours are lost. So long as the CSS remains within the head this doesn't happen.
My thinking is that this must have to do with issues of specificity, inheritence, etc.
The site can be viewed at the following URL: http://www.aclco.org/testing/index.html. In its current form all CSS related to the menu bar is found in the head of each page. (see CSS below).
My question is can I establish a separate style sheet for the horizontal menu bar and have those styles applied specifically (and only) to the menu bar. My only other alternative is to work through the remainder of the general style sheet and work through any issues of specificity/inheritance -- which may be the "best" practice, but it risks causing other "cascading" [sic] problems elsewhere.
Any advice or suggestions or directed reading (that would point to a solution) that could be offered would be greatly appreciated.
Steve Webster
The CSS governing the horizontal menu bar is as follows: (currently the following CSS is embedded in the head of the web page)
<style type="text/css">
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: none none none none;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
background-repeat:repeat-x;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:#2E35A3;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
</style>
The CSS governing the site generally is reproduced below: (my belief is that it is the a:link, a:visited, a:hover, a:active styles that may be in conflict).
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
min-height: 0; /* This is necessary to overcome the "haslayout" bug that is found in Windows 7 in conjuction with IE8. For More information see: URL -- http://reference.sitepoint.com/css/haslayout.html */
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
color: #000000;
list-style-image: none;
background-color: #FCFCFC;
h1,h2,h3,h4,h5,h6 {
color:#000066;
a:link {
color: #151A96;
text-decoration: underline;
a:visited {
text-decoration: underline;
color: #1B8DCD;
a:hover {
text-decoration: none;
color: #F30A0A;
a:active {
text-decoration: underline;
color: #151A96;
#container {
width: 960px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
background-repeat: repeat-y;
#header {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
width:960px;
height:332px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
background-repeat:no-repeat;
#header h1 {
margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
display:none;
#header img {
display: none;
#Main_nav_contents {
padding: 0;
margin-top: 0px;
height: 39px;
width: 950px;
padding-top: 275px;
padding-left: 39px;
z-index: 3;
#MenuBarVertical {
margin-bottom: 50px;
padding-top: 50px;
padding-bottom:200px;
padding-left: 15px;
padding-right: 15px;
.mainContent_left {
margin: 0;/* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding-left:30px;
padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
width: 600px;
float: left;
.sidebar_right {
float: right; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:0;
margin-right:10px;
font-size:90%;
.mainContent_right {
margin-left: 10px;
padding-left:30px;
padding-right:20px;
width: 600px;
float: right;
.sidebar_left {
float: left; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:30px;
margin-right:0;
overflow: hidden;
font-size:90%;
.main_content_centered {
width: 650px;
margin-left: 155px;
.main_content_centered_header {
margin-left: 75px;
.sidebar_textbox {
margin: 0px;
width: 260px;
padding: 2px;
.sidebar_textbox_header {
width:255px;
height:58px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20He ader.png);
.sidebar_textbox_background_middle {
width: 255px;
padding-top: 12px;
padding-bottom: 10px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Mi ddle.png);
background-repeat: repeat-y;
.sidebar_textbox_content {
/* The width and padding are set as follows to accomodate quirks in browser rendering and to ensure that text is contained within the background of the text box */
width: 230px;
padding-left: 20px;
padding-right: 40px;
.sidebar_textbox_footer {
width:255px;
height:64px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Foo ter.png);
#issues_menu a:link {
color: #151A96;
text-decoration: none;
font-weight:bold;
#issues_menu a:visited {
color: #151A96;
font-weight:bold;
text-decoration: none;
#issues_menu a:hover {
color: #F30A0A;
font-weight:bold;
font-style: oblique;
text-decoration: none;
#issues_menu a:active {
color: #151A96;
font-weight:bold;
text-decoration: none;
#archives {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0px;
.landscape_textbox {
width: 500px;
margin-right: 0px;
margin-left: 30px;
padding-top:35px;
padding-bottom: 25px;
font-style: normal;
font-weight: normal;
.landscape_textbox_hdr {
width:500px;
height:38px;
margin:auto;
padding:0;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
.landscape_textbox_middle {
width:auto;
margin:auto;
padding-top: 12px;
padding-bottom: 12px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/landscapte%20Textbox%20 Middle.png);
background-repeat:repeat-y;
.landscape_textbox_content {
width:450px;
padding:25px;
.landscape_textbox_ftr {
width:500px;
height:44px;
margin:auto;
padding:0;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20F ooter.png);
#footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
width: 960px;
height: 222px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
background-repeat:no-repeat;
#footer p {
margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align:center;
margin-left: 50px;
margin-right: 50px;
padding: 10px;
font-size: small;
#footer h5 {
text-align:center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.dropcap {
display: block;
float: left;
line-height: 80%;
font-size: 250%;
font-weight: bolder;
color: #000066;
padding: .03em .1em 0 0;
.red_arrows {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
.blue_bullets {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);
.attention {
color: #F30A0A;
font-size:x-large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.attention_small {
color: #F30A0A;
font-size:large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.table {
table-layout:fixed;
.blue {
color: #00F;
#container .mainContent_left p .blue {
color: #0303A0;Hello Martin:
Thanks for your input. However I am not certain we have resolved this issue adequately, or understand the principles governing the css as regards this spry menu framework 2.0 (1.0).
For example, the menu only works in IE 6.0 if the css remains in the head. I agree with your original post that it shouldn't make any difference whether the css is posted in the head or in a separate style sheet (so long as specificity issues are addressed). Both should work -- and yet it doesn't.
If the CSS is placed in the separate style sheet governing the total site, it doesn't work for 6.0. If placed at the top of the style sheet, conflicts of specificity prevent the menu from rendering properly in any of the browsers causing the rules for general links to govern the menu. This has been verified using a cross browser testing. If the styles are placed at the bottom of the style sheet to help them take precedence, they work in all the browsers except for IE 6.
The website I am building needs to support IE 6 for a variety of reasons, and because it is catering to the non-profit community and to low income persons, I am mindful of even small differences in page weight.
So for me, at least, the issue remains baffling.
I appreciate your input, but also would appreciate the input from others, and especially Adobe Community Professionals and employees. The spry framework in this regard is not well documented. I am not certain if this is exclusively a CSS problem, if it might also be complicated by the architecture of the spry framework, or if indeed other variables are at play.
I would be my hope that in resolving the problem, other users of the this particular spry framework might also benefit.
Thanks,
Steve. -
Having problem with spry menu bar in Internet Explorer.
I'm having a problem with my spry menu bars in Internet Explorer.
Here are the pictures:
Firefox
Internet Explorer
HERE ARE THE CODES:
HTML CODE:
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:160px;
height:126px;
z-index:1;
left: 205px;
top: 424px;
margin: 0 auto;
-->
</style>
<style type="text/css">
#apDiv3 {
position:absolute;
width:254px;
height:206px;
z-index:2;
left: 123px;
top: 1529px;
#apDiv4 {
position:absolute;
width:250px;
height:194px;
z-index:3;
left: 381px;
top: 1528px;
#apDiv5 {
position:absolute;
width:256px;
height:200px;
z-index:4;
left: 636px;
top: 1529px;
#apDiv6 {
position:absolute;
width:349px;
height:205px;
z-index:5;
left: 889px;
top: 1530px;
</style>
<style type="text/css">
#apDiv7 {
position:absolute;
width:887px;
height:204px;
z-index:6;
left: 324px;
top: 905px;
#apDiv8 {
position:absolute;
width:1295px;
height:74px;
z-index:1;
left: 212px;
top: 668px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#apDiv2 {
position:absolute;
width:209px;
height:197px;
z-index:2;
top: 1220px;
left: 171px;
#apDiv9 {
position:absolute;
width:331px;
height:97px;
z-index:3;
left: 385px;
top: 1218px;
#apDiv10 {
position:absolute;
width:292px;
height:199px;
z-index:4;
left: 724px;
top: 1218px;
#apDiv11 {
position:absolute;
width:200px;
height:115px;
z-index:1;
body {
background-color: #000;
background-image: url();
text-align: center;
color: #F00;
.none {
font-size: 80px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
#apDiv12 {
position:absolute;
width:991px;
height:60px;
z-index:5;
left: 198px;
top: 192px;
#apDiv13 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 588px;
top: 322px;
</style>
<body onLoad="MM_preloadImages('images/WebConfroll.png','images/youthfootballroll.png','images/ statefbsweatshirt.png')">
<p align="center" class="none"><img src="images/footballtitle.png" width="941" height="183"></p>
<div align="center">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">[Placeholder]</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">[Placeholder]</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Videos</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">2008 Videos</a>
<ul>
<li><a href="videos/2009 videos/Glenbard part one/partone.html">Glenbard South Game</a></li>
<li><a href="#">             &# 160;         [Placeholder]</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">2009 Videos</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">2010 Videos</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><span class="cent"><img src="images/bulldoghelmit.png" width="150" height="99" /></span></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p class="cent"> </p>
<div align="center">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li> <a class="MenuBarItemSubmenu" href="#">Football Season 2008</a>
<ul>
<li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Defense%20Stats.pdf">Defense Stats</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Offense%20Stats.pdf">Offense and Records</a></li>
<li><a href="http://page.bps101.net/web/t1350/BHS%20All%20Time%20Stats.pdf">AllTime Data</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football2009/Western%20Sun%202009.pdf">Western Sun Final Standings</a></li>
</ul>
</li>
<li> <a href="#" class="MenuBarItemSubmenu">Football Season 2009</a>
<ul>
<li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Defense Stats</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Record Book and Offense</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202010/All-Time%20Data%202009.pdf">Alltime Data</a></li>
</ul>
</li>
<li> <a class="MenuBarItemSubmenu" href="#">Football Season 2010</a>
<ul>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2011%20Checklist.pdf">2010-2011 Offseason Checklist</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Defense%20Stats%20Final.pdf">Defense Stats</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Stats%20Packet.pdf">Record Book and Offense</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20ALL%20TIME.pdf">Alltime Data</a></li>
</ul>
</li>
</ul>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img src="images/Batavia Youth football.png" alt="" width="869" height="200" /></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/WebConfroll.png',1)"></a></p>
<div align="center">
<div align="center"></div>
<div align="center"><a href="http://www.athletics2000.com/upstate8/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/WebConfroll.png',1)"><img src="images/WebConf.png" name="Image7" width="206" height="194" border="0" id="Image7" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/statefbsweatshirt.png',1)"><img src="images/statefbsweatshirt.jpg" name="Image6" width="375" height="199" border="0" id="Image6" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/youthfootballroll.png',1)"><img src="images/youth football.png" name="Image8" width="329" height="197" border="0" id="Image8" /></a></div>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/youthfootballroll.png',1)"></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img src="images/Logos.png" width="1167" height="199" /></p>
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
CSS 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: auto 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 54em;
border-top: thick solid #00F;
border-left: thick solid #00F;
border-right: thick solid #00F;
border-bottom: thick solid #00F;
height: 2.2em;
/* 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;
cursor: pointer;
width: 18em;
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: 18em;
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: 18em;
/* 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: #000;
padding: 0.5em 0.75em;
color: #C96;
text-decoration: none;
text-align: center;
height: 1.2em;
/* 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: #900;
color: #009;
/* 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: #900;
color: #FFF;
text-decoration: underline;
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%;
color: #FF0;
font-family: "Lucida Console", Monaco, monospace;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
The website is http://wwww.bataviabulldogfootball.tkNote that running your page through the W3C Validator gives this list of errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bataviabulldogfootball.tk%2F&charset=%2 8detect+automatically%29&doctype=Inline&group=0
I see that you have a very thin doctype at the top. I suggest you create a new page in Dreamweaver and copy the bit at the top of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Then put that code in place of these lines from your current page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
I see that you have two opening <body> tags. Delete one; it is not needed. Add the preload images from the second into the first body tag and delete the second.
I see code below the closing </html> tag. Re position it before the closing </body> tag.
Because of these errors mentioned above, it was impossible to see the page. Fix and reply here when you have done so.
Also, it is not possible for me to divine what difficulty you are having. If you can please also express it in English (LOL), I'll be happy to suggest a correction for you!
Beth
p.s. Posting entire blocks of code is NEVER as helpful as giving us a link to the pages in action. I seldom read through code dumps here in the Forum.
Message was edited by: Zabeth69 -
I have two problems related with Spry Menubar in Dreamweaver CS3.
First I would like to make the menu transparent (I have a nice graphic I would like to show under). I cannot make it in IE. I wonder if anybody has any ideas.
Second my menu has a strange behaviour.
I use the following code to load a page named test1.html into a div named MyDiv of the page that has the menu:
<li><a href="javascript:loadURL('Test1t.html','Mydiv');" target="_parent">Item1.1</a></li>
the LoadURL function runs correctly.
However the first time I load the page in IE I need to click 2 times on Item1.1 to load test1.html. After that the menu works correctly loading test1.html with only one click. Pretty strange!!!!
Any help is very much appreciated.
Thanks,
CarlyHi Charly,
CarlyJ schrieb:
Hi Hans,
Unfortunatelly the page is just on my machine.
Thanks,
C.
Then off to the server with your site and let us know the link!
Hans-G. -
Having Problem with Spry Menu - Help appreciated
Hello there
I am currently developing my website but I am having terrible problems with the spry menu. I have tried lots of things but not yet resolved the issue. I will try to give as much info as possible. My website is www.huntfilms.ie
When I am in dreamweaver the site looks fine and when I preview in browser also looks fine but when I have uploaded to server there is the problem as you can see.
I uploaded all the files that are required I think . I have attached a screen grab of my server view below. : I have six spry files : js,css and four giff files : I have included the code below. I would apprecaite help as been at this for best part of day with no luck ; going mad here
thanks
Barry
<script src="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1>Hunt Films</h1>
<!-- end #header --></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/home.html">home</a> </li>
<li><a href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/sample.html">Sample work</a></li>
<li><a href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/Contact.html">Contact Us</a> </li>
</ul>
<div id="mainContent">
<p><iframe src="http://player.vimeo.com/video/17962693?title=0&byline=0&portrait=0" width="400" height="320" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe> </p>
<p> </p>
<p>Welcome! </p>
<p>Hunt Films was set up in January 2011 by documentary maker Barry Hunt.</p>
<p>Barry received training in TV and Video Production with FÁS in Tralee, Co Kerry. During this training Barry produced a series of short films about local artists. In 2006 he worked as assistant editor on the successful RTÉ drama series, ‘Love is the Dfile:///Users/barryhunt/Desktop/Picture%201.pngrug’.</p>
<p>Since 2010 Barry has embarked on solo projects producing two entertaining half hour documentaries. 'Liberation', explores the world of pigeon racing in Dublin. This film was very well received at the Galway Film Festival 2011. More recently Barry produced 'The Gregory Seat', a documentary which follows Maureen O'Sullivan’s campaign to be elected in the 2011 General Election.</p>
<p>Barry looks forward to producing more documentaries. He is interested in human stories and hopes that this will form the basis of his future work. At present, Barry is developing projects for film festivals and general broadcast </p>
<p> </p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
server view of files uploaded file:///Users/barryhunt/Desktop/Picture%201.pnghere is the code still not working can anyone tell me why
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
.oneColElsCtrHdr #container {
width: 46em; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.oneColElsCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
.oneColElsCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="mainContent">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<h1> </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html> -
Internet Explorer Problem with Spry Menu Bar
http://www.cloud9industries.com/clients/jewelryworld/index4.html
OK here we go
#1) In IE, the toolbar doesn't appear with the same decreased
opacity as it does in Firefox and Safari. I'm using a png
background image with a transparent background and I've defined the
background color the same as the lower layer's color. Any ideas?
#2) THE BIG ISSUE - IE doesn't display the drop down portions
of the menu properly as they display horizontally. If the cursor
moves into the <li> from another <li> the menu displays
as aforementioned. If the cursor moves into the <li> from
outside the menu bar, the menu bar behaves properly.
This is the first page I've done with a Spry menu bar as it
seems the former navigation bar process has been removed from
Dreamweaver. Any tips will be greatly appreciated.
Thanks,
cloud9industriesHi,
I took a look over your page and I noticed that you are using
a very old spry version 1.4. The current released version is Spry
1.6 and contains some major bug fixes for Menu Bar widget.
Please update to this last Spry version. You can download the
new files from
here.
The problem with the transparent background is an IE6 problem
which doesn't support transparent backgrounds. This problem is
fixed on IE7 and I check it and it works there.
Please let us know if you still have problems with MenuBar
after updating it to the new version
Thanks,
Diana -
Printing Problems with Spry Menu. Help?
When I have a spry menu in the banner or main image and
go to print. Well the image of banner or main image will not print out. It comes out as blank space, with just menu and no background pic.
Help. Thankswhat setting do i change?
the thing is it printed before i added the spry menu. -
Safari bold text causing problem with Spry Menu Bar
I have made a web site using a Spry Menu bar. It worked fine across all browsers, as far as I knew. I was just alerted by th esite owner that the menu bar had the last link out of position when viewed in Safari. I'm not sure when this started happening. I notice the text in Safari is more bold than firefox or IE. My guess is that's the problem. I searched on google for help and found this
Add - text-shadow: 0 0 0 #000; to the css.
I tried that but it doesn't seem to have any effect.
the site is here:
http://www.telluridegravityworks.com/
Can anyone offer any advice on how I might fix this? Thanks!I'm not seeing the issue in Win 7/Safari (assume it's a Mac issue) but I do see it in Win 7/IE9.
In the CSS file, http://www.telluridegravityworks.com/css/gravity-works-winter.css
tweaking the width of the navbar container fixes it here
#nav-menu {
width: 455px; /* adjusted from 445px */
padding: 0px;
overflow: hidden;
float: left;
margin-left: 515px; -
Problem with spry menu bar position:fixed?
Hello technical heros,
I'm having trouble with my website's spry menu bar... here is the site.
As you can see, when you scroll down, the spry menu overlaps the header fixed block, which the rest of the content smoothly scrolls under. How do I tell the spry object to do the same?
I also want the sidebar 2 (menu bar) to be a fixed block like my header and footer. I know how to do this, but when I change the css, it throws my spry menu over to the left of the page, ontop of my sidebar 1.
Help, please!!Hi,
Have a look here: http://www.w3schools.com/Css/css_positioning.asp
I hope this helps.
Ben -
i'm using dreamweaver CS3 to create a website using php
scripting. for some reason, my spry menu bar has become messed up.
it is now in bulleted form and the font and font color are all
wrong. i checked but the styles are turned on.. so how can i solve
this?Find that some reason that the spry menu bar became messed up
and revert to how it was before that some reason occurred.
Hope that helps! -
Problems with spry menu bar in IE
Hi.... I'm sorry if this has been covered somewhere, I promise I looked and couldn't find anything. I've been working with Dw for a little over a month now and have generally been able to find whatever I needed. But I've hit a wall: My pages display just fine in Opera, Safari, Firefox.... but in Mac's IE, none of the spry works (loaded from the server) and in Windows IE 7 & 8 the collapsible panels work but for the menu bar, the children menus come down from the top of the page (instead of below the parent). I've tried putting the menu in its own header container and the problem still happens. Nothing I do or can find as patches have helped make the Mac IE work (but from what I hear that's typical....). I am absolutely desperate for help!
The original page is: http://www.tumorvirology.pitt.edu
and a testing with the separate header can be seen at: http://www.tumorvirology.pitt.edu/dev/testsite/test1.html
The css files for the menu bar and panel for the first site is attached below.
Thank you so much for your time and help!
SusanI have this exact same problem. My submenus are dropping down from the top of the screen in IE. I did what you suggested here and it did not work for me. Help! Here is my 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;
position: inherit;
left: 98px;
top: 234px;
/* 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
/* 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: 7.5em;
float: left;
background-color: #D35D35;
/* 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%;
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;
position: absolute;
z-index: inherit;
top: auto;
#leftnav {
padding: 7px 5px 5px;
width: 158px;
float: left;
height: auto;
position: absolute;
z-index: 20;
/* 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;
background-color: #D35D35;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: 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: #D35D35;
color: #333333;
/* 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: #D35D35;
color: #333333;
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: inherit;
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; -
hey guys im having a problem with Spry in IE only..
Ive tried the corrent browsers and it seems to be working well
Firefox
Opera
Safari
but Internet Explorer is not working the menus just wont drop down past my flash player?
any help would be great
heres the link to my temp site so you guys can see what i mean
www.dreamcatchermeadows.com/new_site/site/index.html
any help would be great
Thanksi checked the compatability button on dream weaver and this come up
Dreamweaver Browser Compatibility Check
14-February-2011 at 01:26:05 PM GMT-08:00.
Target Browser Errors Warnings
Internet Explorer 6.0
1
0
Internet Explorer 7.0
1
0
Internet Explorer for Macintosh 5.2
1
0
Firefox 1.5
1
0
Netscape 8.0
1
0
Opera 8.0
1
0
Opera 9.0
1
0
Safari 2.0
1
0
Total
8
0
Details:
#000000
#000000
Error
Found 1 errors in SpryMenuBarHorizontal.css
Firefox 1.5; Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0, 9.0; Safari 2.0
line 19
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
End of report. -
Problem with After Effects crashing machine when rendering
Ive been having a repeated problem with after effects crashing when I try to render a sequence.
The render halts then first After Effects becomes unresponsive then every other applications follows and I have to hard-restart my machine.
Can anyone help me find out how to stop this happening?i - Illl try to answer these bellow...
What exact version of After Effects? Include the minor version number---e.g., After Effects CC (12.2.1) or After Effects CS6 (11.0.4). Do not just say "After Effects with the latest updates" or "After Effects CC"; give the specific version number.
Ive just updated it - I have After Effects CC 13.2.0.49
Have you installed the recent updates? (If not, you should. They fix a lot of problems.)
Just don'e this - not tried to render since
What operating system? This should include specific minor version numbers, like "Mac OSX v10.6.8"---not just "Mac".
Late Mac operating system Yosamete 10.10.1 (14B25)
If you are getting error message(s), what is the full text of the error message(s)?
There is no error message
What were you doing when the problem occurred? What is the exact sequence of steps that you are taking?
Performing a render, the render gets partially through but stops at different parts and hangs, then the computer hangs and I have to hard reset.
Has this ever worked before? If this worked before by doesn't work now, what has changed on your computer in the intervening time?
I had a similar problem two days ago, i thought it could be a problem with some animated png sequences and a "matte feather" effect so i replaced the sequences with non animated versions and it seemed to fix the problem.
Tell us about your computer hardware. Include CPU type and number of processor cores, amount of RAM installed, GPU, number and sizes of connected monitors, number of disk drives, and how any external drives are connected.
Model Name: Mac Pro
Model Identifier: MacPro6,1
Processor Name: 6-Core Intel Xeon E5
Processor Speed: 3.5 GHz
Number of Processors: 1
Total Number of Cores: 6
L2 Cache (per Core): 256 KB
L3 Cache: 12 MB
Memory: 32 GB
Boot ROM Version: MP61.0116.B07
SMC Version (system): 2.20f18
Illumination Version: 1.4a6
Serial Number (system): F5KM804VF694
Hardware UUID: A50DAB15-0502-5AAB-85A9-4F1B1B6DD9C1
AMD FirePro D500:
Chipset Model: AMD FirePro D500
Type: GPU
Bus: PCIe
Slot: Slot-1
PCIe Lane Width: x16
VRAM (Total): 3072 MB
Vendor: ATI (0x1002)
Device ID: 0x679e
Revision ID: 0x0000
ROM Revision: 113-C3861J-687
gMux Version: 4.0.11 [3.2.8]
EFI Driver Version: 01.00.687
Displays:
DELL UP2414Q:
Resolution: 3008 x 1692 @ 30 Hz
Pixel Depth: 32-Bit Color (ARGB8888)
Display Serial Number: WWRHC42G085L
Main Display: Yes
Mirror: Off
Online: Yes
Rotation: Supported
Connection Type: DisplayPort
Television: Yes
What versions of drivers for your graphics hardware do you have installed (including CUDA driver and driver for display adapter)?
AMD FirePro D500 3072 MB graphics
Not sure how to find out about CUDA or what it is?
Do you have any third-party I/O hardware (e.g., AJA, Matrox, Blackmagic, MOTU)?
No
What kind(s) of source footage? When telling about your source footage, tell us about the codecs, not just the container types. For example, "H.264 in a .mov container", not just "QuickTime".
Apple Prores4444 and some png sequences
Do you have QuickTime installed. (You should.) If so, what version? The answer should be specific, such as "QuickTime 7.6.2".
Quick Time player 10.4
What other software are you running?
I have the CC suite and use Premier mostly but not running anything else whilst the problem is occurring
Do you have any third-party effects or codecs installed?
I have Video Copilot optical flares (though I've tried switching this off.)
Are you using OpenGL features in After Effects?
Im not sure?
Does the problem only happen with your final output, RAM preview, or both?
Doesn't appear to hang on RAM preview
Are you using Render Multiple Frames Simultaneously multiprocessing?
Yes
Are you using the ray-traced 3D renderer?
No
If the problem is with output, give your exact output settings (both render setting and output module settings). Screenshots help.
Best Settings - Outputting as Apple Pro Res 4444
Hope this is helpful,
thanks,
Jonathan -
Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?
Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?
Log-in to the Adobe Exchange with your Widget Browser and grab "Spry Menu 2.0."
http://labs.adobe.com/technologies/widgetbrowser/
In Widget browser, style the menu as desired and Save files to your DW Local Site folder.
Nancy O. -
Problems with Spry Horz Menu in IE
I'm not a pro at designing websites, I've only designed like 1 or 2, so bear with me. My website is basically fully functional in every browser EXCEPT the spry menu bar in IE, it *seems* to be in any version since other people have been telling me it doesnt work in their IE browsers either. Its only on the home page, and all it does is kind of block out the background image that I have behind it, and since the links are white, you cant see anything unless you know to hover over the area and the links will turn grey. So the menu WORKS, you can click on the links and the other pages have the menu displayed correctly, its just screwed up on the home page. Maybe I can get some insight as to how to fix?
Heres the link to the site: http://www.combocabinets.net
Its weird because Adobe Browser labs show that its functional on the home page in every IE version. But when I actually open it up in the browser, it doesnt work.
Thank you!Hi,
ok, on we go!First I widened your "logo_menu.jpg.from 175px to 200px, so the rest from the white shape no longer disturbs.
In your "SpryMenuBarHorizontal.css" I inserted (only here at hte moment) a background image:
/* 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;
text-decoration: none;
/* color: #CCC;*/
color:#0F0;
background-image: url(../images/navHG.jpg);
Now in my DW it looks like this:
or using the menu (More Info > red; sorry about the quality):
You could use your "combo.css" and "SpryMenuBarHorizontal.css" as a playing field and until such time as you are happy with the result.
Hans-G.
Maybe you are looking for
-
I did a restore from my iPhone 4S to my iPhone 5 and now my music won't play. What do I do?
Why won't my music play? I did a restore from my iPhone 4S to my new iPhone 5. The songs all show up on my phone but then do a quick spin, never start, and won't play. Aarrgh... Frustrated!
-
Issues with using webcam in Flash Windows 8.1
Hi there Anyone else experiencing this and can help? I have recently upgraded to Windows 8.1 and ever since then I cannot get Flash Player to display my webcam on various chat sites and realtime messaging tools. All i end up with is a white pane wher
-
From MacbookPro to MacPro latency, Sessions out of sync.
Moving from a MacbookPro to a MacPro and loading up a session, I was rudely surprised. On the MacPro the multiple kick/snare/hihat layers are all out of phase, When they were perfectly in phase on the MacbookPro. All instruments had plugins on them a
-
E50 number to contact name matching bug?
Hello, I just got an E50 (RM-170, software V 07.36.00). It seems to have a very irritating bug in the way numbers are matched to contacts in the 'recent calls' lists: - an entry in the list will show the contact name *only if* the number appears onl
-
hello i am now studying j2eetutorial from sun,in this book,it always compile the ejb by the ant tool,i don't know why,is it necessary?because i feel difficult to write the "build.xml" file. question 1:can i use "javac" to compile the ejb,i think it's