Spry Vertical Navigation menu with secondary flyout menu not showing
I'm using Windows and CS3. I have a vertical spry menu with one of the items opening to a secondary vertical menu. The menu is positioned left and I want the flyout menu to open so it can be seen on top of the central content column. I have a background color on the central div and when I hover over the item on the menu bar, you can't see the secondary menu opening. But I know it is there as I have removed the central div and when previewed in the browser (IE) it works fine. But when I replace the central div, the secondary menu is hidden again. I don't want to play around too much as I know Javascript is involved and I can easily ruin those elements which are now working. I hope someone can suggest something reasonably straight forward to assist.
The code is the standard stuff - I have only modified colours basicall with one or two other tweaks to fit the space:
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 200px;
background-color: #979c9c;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-color: #FFFFFF;
ul.MenuBarActive
z-index: 1000;
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 200px;
color: #343642;
ul.MenuBarVertical ul
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 200px;
left: -1000em;
top: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 100%;
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
ul.MenuBarVertical ul li
width: 200px;
ul.MenuBarVertical ul
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #979c9c;
color: #343642;
text-decoration: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #343642;
color: #fff;
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #343642;
color: #fff;
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Thanks.
Frank,
The code that you have shown us re SpryMenuBarVertical.css is correct so that we can assume that the problem lies elsewhere.
Because you have not shown the rest of the code, we can only make assumptions which may or may not help. From the above screen shot, I see that you are using AP's (Absolute Positioned) elements. This is a NO NO!!!
Have a look at the following wich achieves the same, but without AP's. Just copy and paste in a new document and view in any browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
margin: 0;
padding: 0;
html {
height: 100%;
background: #FFC;
body {
width: 960px;
margin: auto;
background: #060;
h1, h2, h3, p {
margin: 0 20px;
#header {
height: 95px;
background: #060;
#sidebarL {
width: 160px;
float: left;
color: #CCC;
#content {
width: 800px;
float: left;
background: #FFF;
#sidebarR {
width: 200px;
float: right;
background: #FF3;
#footer {
height: 50px;
background: #060;
color: #CCC;
clear: both;
</style>
</head>
<body>
<div id="header"><h1>This is my Header</h1></div>
<div id="sidebarL">
<h3>This is my sidebar</h3>
<p>This is where our menu goes</p>
</div>
<div id="content">
<div id="sidebarR">
<h3>This is my other sidebar</h3>
<p>Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Qui officia deserunt consectetur adipisicing elit, ut enim ad minim veniam.</p>
</div>
<h2>This is the content</h2>
<p>Velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ullamco laboris nisi sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua. Sunt in culpa in reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor quis nostrud exercitation lorem ipsum dolor sit amet. Ullamco laboris nisi consectetur adipisicing elit, qui officia deserunt. Ut labore et dolore magna aliqua. Quis nostrud exercitation. Velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut enim ad minim veniam. Eu fugiat nulla pariatur. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Cupidatat non proident, excepteur sint occaecat velit esse cillum dolore.</p>
</div>
<div id="footer"><p>and lastly here is my footer</p></div>
</body>
</html>
Gramps
Similar Messages
-
Spry 2.0 menu not showing in IE8
I have a webpage with a horizontal and vertical Spry 2.0 menu on the page. Both menus work correctly in Firefox, Chrome, Safari, and IE9, but the vertical menu does not show at all in IE8. In addition in IE8 the browser scroll bar disappears when the vertical menu is added. The test page is http://www.njslom.org/001banner5.html
I am using CS5 and the Spry 2.0 Widget in an html template.
Any help at all would be appreciated.
[email protected]
Page code
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
body {
background-color: #EBEBEB;
margin-top: 0px;
</style>
<script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#MenuPublic1 {
background-color:#F2F2F2;
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: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* 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 ".MenuPublic1FixedCentered br" rule bleow */
display:none;
.MenuPublic1LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1FixedLeft {
float: left;
width: 70em;
.MenuPublic1FixedCentered {
float: none;
width: 70em;
margin-left:auto;
margin-right:auto;
.MenuPublic1FixedCentered br {
clear:both;
display:block;
.MenuPublic1FixedCentered .SubMenu br {
display:none;
.MenuPublic1Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1 .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. */
#MenuPublic1 .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#F2F2F2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1 .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:#F2F2F2;
padding: 7px 28px 7px 28px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuPublic1 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
background-color:#F2F2F2;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuPublic1 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#F2F2F2;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1 .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1 .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
#MenuPublic1 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1 .SubMenuVisible {
background-color: #F2F2F2;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuPublic1.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;
#MenuPublic1.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 */
#MenuPublic1 .MenuLevel1 .SubMenuVisible {
background-color: #F2F2F2;
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 #MenuPublic1 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .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 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141544" binding="#MenuPublic1" />
<oa:widget wid="2141544" binding="#MenuPublic1_2" />
</oa:widgets>
-->
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuPublic1_2 */
/* 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 #MenuPublic1_2 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.
#MenuPublic1_2 {
background-color:#8ca7d2;
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: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* 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 ".MenuPublic1_2FixedCentered br" rule bleow */
display:none;
.MenuPublic1_2LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2FixedLeft {
float: left;
width: 175px;
.MenuPublic1_2FixedCentered {
float: none;
width: 175px;
margin-left:auto;
margin-right:auto;
.MenuPublic1_2FixedCentered br {
clear:both;
display:block;
.MenuPublic1_2FixedCentered .SubMenu br {
display:none;
.MenuPublic1_2Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1_2 .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. */
#MenuPublic1_2 .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#8ca7d2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1_2 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1_2 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1_2 .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#ffffff;
background-color:#8ca7d2;
padding: 6px 10px 6px 10px;
width: 175px;
.SpryIsIE6 #MenuPublic1_2 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1_2 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: italic;
background-color:#0066ff;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuPublic1_2 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1_2 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1_2 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1_2 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1_2 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#0066ff;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1_2 .MenuItemHover {
background-color: #cae9fd;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1_2 .MenuItemHover .MenuItemLabel{
background-color: #cae9fd;
color: #000000;
#MenuPublic1_2 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1_2 .SubMenuVisible {
background-color: #0066ff;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuPublic1_2.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;
#MenuPublic1_2.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 */
#MenuPublic1_2 .MenuLevel1 .SubMenuVisible {
background-color: #0066ff;
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 #MenuPublic1_2 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .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 */
.text-white { color: #FFF;
</style>
</head>
<body>
<table width="950" border="0" align="center" cellpadding="7" cellspacing="0">
<tr>
<td width="284" bgcolor="#0000CC"><strong class="text-white">Serving Municipal Government in <br />
New Jersey Since 1915</strong></td>
<td width="305" bgcolor="#0000CC"><div align="center"><div align="center"> <!-- Begin PicoSearch Query Box -->
<table style="background-color:#004d8c" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<form style="margin:0;" method="get" action="http://www.picosearch.com/cgi-bin/ts.pl">
<input type="hidden" name="index" value="520788" />
<table style="background-color:#004d8c" cellspacing="2" cellpadding="0" border="0">
<tr><td><a href="http://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=allhttp://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=all"></a></td>
<td align="right"><input type="text" name="query" value="" size="20" />
<input type="submit" value="GO" name="search2" /></td>
</tr>
</table>
</form>
</td></tr></table>
<span style="white-space: nowrap;">
</span><!-- End PicoSearch Query Box --></div></div></td>
<td width="319" bgcolor="#0000CC"><div align="right" class="text-white"><a href="http://www.njslom.org" class="text-white"><strong>HOME</strong></a> | <a href="http://www.njlmef.org" class="text-white"><strong>NJLM Educational Foundation </strong></a></div></td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
<td width="135"><img src="/images-head/head-logo-1.jpg" width="128" height="200" /></td>
<td width="815" valign="top"><p> </p>
<p> </p>
<p> I will be adding the Spry Content Slideshow in this area</p>
</td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#F2F2F2"><ul id="MenuPublic1">
<li> <a href="#">Classifieds</a>
<ul>
<li><a href="#">Classifieds & Job Listings</a></li>
</ul></li>
<li> <a href="#">NJ Municipalities Magazine</a>
<ul>
<li> <a href="#">Current Issue</a></li>
<li> <a href="#">Advertise</a> </li>
<li> <a href="#">Subscribe</a> </li>
<li> <a href="#">Submission Guidelines</a></li>
</ul>
</li>
<li> <a href="#">Seminars & Events</a>
<ul>
<li><a href="#">Events & Registration</a></li>
<li><a href="#">CEU Requirements</a></li>
</ul>
</li>
<li> <a href="#">Legislation</a>
<ul>
<li><a href="#">Legislative Committee</a></li>
<li><a href="#">Legislative Priorities</a></li>
<li><a href="#">Legislative Bulletin</a></li>
<li><a href="#">Conference Resolutions</a></li>
</ul></li>
<li> <a href="#">Issues & Documents</a>
<ul>
<li><a href="#">Issue Alerts</a></li>
<li><a href="#">Press & Media</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Sample Resolutions</a></li>
<li><a href="#">League Testimony</a></li>
</ul></li>
<li> <a href="#">NJLM Directories</a>
<ul>
<li><a href="#">Staff</a></li>
<li><a href="#">Executive Board</a></li>
<li><a href="#">League Officers</a></li>
<li><a href="#">League Attorneys</a></li>
<li><a href="#">League Affiliates</a></li>
<li><a href="#">League Committees</a></li>
</ul></li>
<p>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1
var MenuPublic1 = new Spry.Widget.MenuBar2("#MenuPublic1", {
widgetID: "MenuPublic1",
widgetClass: "MenuBar MenuPublic1LeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
</p></td>
</tr>
<tr>
<td width="175" valign="top" bgcolor="#F2F2F2"><p> </p>
<ul id="MenuPublic1_2">
<li> <a href="#">Home</a></li>
<li> <a href="#">Entertainment</a>
<ul>
<li> <a href="#">TV Listings</a></li>
<li> <a href="#">Music</a>
<ul>
<li> <a href="#">Hits</a></li>
<li> <a href="#">Ragga</a>
<ul>
<li> <a href="#">Roots</a></li>
<li> <a href="#">Reggaeton</a></li>
<li> <a href="#">Dancehall</a></li>
</ul>
</li>
<li> <a href="#">Country</a></li>
</ul>
</li>
<li> <a href="#">The Dirt</a>
<ul>
<li> <a href="#">Hollywood</a></li>
<li> <a href="#">NY Beat</a></li>
<li> <a href="#">London Scene</a></li>
</ul>
</li>
<li> <a href="#">The Web</a></li>
</ul>
</li>
<li> <a href="#">Politics</a></li>
<li> <a href="#">Sports</a>
<ul>
<li> <a href="#">Football</a></li>
<li> <a href="#">Baseball</a></li>
<li> <a href="#">Basketball</a></li>
<li> <a href="#">Racing</a>
<ul>
<li> <a href="#">F1</a></li>
<li> <a href="#">Indy Car</a></li>
<li> <a href="#">Stock Car</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1_2
var MenuPublic1_2 = new Spry.Widget.MenuBar2("#MenuPublic1_2", {
widgetID: "MenuPublic1_2",
widgetClass: "MenuBar MenuBarVertical MenuPublic1_2MenuBarVerticalLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
<p> </p></td>
<td width="773" valign="top" bgcolor="#F2F2F2"><!-- TemplateBeginEditable name="EditRegion3" -->
<p>EditRegion3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>This is the bottom of the page</p>
<!-- TemplateEndEditable --></td>
</tr>
</table>
</body>
</html>I get the following error message
Perhaps you could have a look at KB927917
Gramps -
Navigation menu not showing up in GOOGLE Chrome
Hello,is anybory able to help me ?
I created two pages from samples without making any changes, on top of the pages I am able to see the navigation menu. Once I publish the site on my IMAC and visit the site the vavigation menu is gone ? I am using Lion OS X version 10.7.2 and Iweb version 3.0.4 (601), my naviguator is Google Chrome.
The support of Apple France does not have a solution neither the French forums !
Thanks for your help.
Roger C GOTTSCHALK
Montfort sur Argens
Var / FranceOnce I publish the site on my IMAC and visit the site the vavigation menu is gone ?
Let me guess : You open the file on the desktop with Chrome?
Don't.
Webpages are meant to be served thru a server. So publish to the server. Any server. Perhaps the one on your own computer.
You could have found the answer here : Re: Layout with Chrome and Explorer -
Navigation Menu not showing in mobile
I'm working on this website and when I view the site on my iPhone, the navigation menu is not showing. Any advice on what is preventing the menu from showing?
Thanks in advance for your help,
MichaelThat was it Ben. This site is actually one I designed several years ago and the customer just wanted to make some changes to color scheme and add a few new tabs. Figured I would add a dropdown menu to better accommodate the additional pages and found a nice nav menu online. I didn't see that the styles had media queries. I have not begun to code them myself yet, only have worked with responsive formats with Wordpress.
-
Navigation menu not showing up
Hi,
I am creating a site using iWeb and have uploaded it to my web host and all runs fine... except for the navigation menu, which is kinda important. I know i could make my own, but I would like to use the default one anyway.
So everything looks fine in iWeb. Here is a screenshot showing the default navigation menu (I am using the darkroom theme)
But when I publish to my server and view through safari (have also tried Firefox and get the same results), this is what I see where the navigation menu should be:
There is no light grey horizontal box, no writing, just a black dot point. The dark grey on the sides is normal, its not in the iweb screenshot because my window wasn't very wide.
I tried disabling the menu, re-publishing (which removed the dot point), enabling it again and re-publishing but I still get the same issue.
Any ideas on why I can't get the menu??
Cheers.I had the same issue. It's a cache settings problem. I resolved it this way:
Go to Firefox > Preferences > Advanced > Network
On that screen under the 'Cached Web Content' section, UNCHECK the 'Override automatic cache management' check box.
Then quit Firefox entirely and restart it. Should do the trick.
Peace out
SL -
Spry drop down menu not showing in IE7
I'm using Dreamweaver CS5, Windows 7 64bit OS, and tested in IE8 or newer and firefox all working perfectly. (with the exception of IE7).
the problem can be viewed at www.maxdailydeal.com
the drop down sub-menu are not displaying on IE7, can anyone help please.
Many thanks in advance!
-max-All throughout this forum we explain that you should stay away from absolute and relative positioned elements. Again I shall say STAY AWAY FROM ABSOLUTE AND RELATIVE POSITIONED ELEMENTS.
To illustrate this, remove id="floatdiv" from the menu container and you shall see that the menu works. OK, the menu may not look like you want it to, but this can easily be fixed with proper CSS.
Gramps -
Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome
Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
#slideshow {
padding: 10px;
margin:0;
#slideshow-caption{
padding:0;
margin:0;
#slideshow img, #slideshow div {
padding: 10px;
background-color: #EEE;
margin: 0;
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #004B8D;
margin: 0;
padding: 0;
color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
/* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
position:relative;
left:-90px;
width:950px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
z-index:1000;
.slide{
position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
min-height:900px;
padding:5px 0px 0px 0px;
background: #E8F8FF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #E8F8FF;
padding:10px 5px 0px 5px;
.sidebar1 {
float: left;
width: 225px;
margin: 60px;
color: #FFFF0D;
background: #595FFF;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
padding: 5px 5px 0px 5px;
border: 3px solid #F7F723;
z-index:-1;
.sidebar2 {
float: left;
width: 275px;
color: #FFFF0D;
text-align: left;
background: #595FFF;
padding-bottom: 10px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border: 3px solid #F7F723;
z-index:2;
.sidebar3 {
float: left;
width: 275px;
color: #FFFF0D;
text-align: left;
background: #595FFF;
padding-bottom: 10px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border: 3px solid #F7F723;
z-index:3;
.content {
padding: 0px 0px 0px 0px;
width: 780px;
float: left;
background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 50px; /* this creates the space between the navigation on the content below */
font: Arial Black, Verdana, , Helvetica, sans-serif;
font-size:1.3em;
font-weight:bold;
z-index:2;
ul.nav li {
border-bottom: 0px solid #FFFF66; /* this creates the button separation */
font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 3px 0px 5px 0px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
color: #FFFF0D;
background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #595FFF;
font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #595FFF;
color: #FFFF0D;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.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. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header"><!-- end .header -->
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="about.html">About Us</a></li>
<li><a href="history.html">Reardan History</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="business.html">Business<br />
Directory</a></li>
<li><a href="about.html">Join the<br />
Chamber</a></li>
<li><a href="links.html">Links<br />
<span style="font-size: 85%">Tourism</span><br />
</a></li>
</ul>
<!-- end .sidebar1 --></div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
after: slideshowOnCycleAfter, //the function that is triggered after each transition
autostop: false, // true to end slideshow after X transitions (where X == slide count)
fx: 'blindX',// name of transition effect
pause: false, // true to enable pause on hover
randomizeEffects: true, // valid when multiple effects are used; true to make the effect sequence random
speed: 100, // speed of the transition (any valid fx speed value)
sync: true, // true if in/out transitions should occur simultaneously
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
fit: true,
height: '300px',
width: '525px' // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
if (slideshowAddCaption==true){
$('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
<!--All elements inside this will become slides-->
<img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
<div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
<img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
<!--It is safe to delete this if captions are disabled-->
<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
<br />
<br />
<br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center"> <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
<br />
<br />
<br />
<br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
<p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
<span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
</p>
<!-- end .footer -->
</div></body>
</html>If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
float: left;
width: 225px;
margin: 60px 0px 60px 60px;
color: #FFFF0D;
background: #595FFF;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
padding: 5px 5px 0px 5px;
border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px; -
Using Spry Vertical Navigation with Templates-Need to indicate current page
Using Spry Vertical Navigation with the Dreamweaver templates. Using editable attributes etc., the current page mennu item does not seem to be changing. How do you indicate the. current page.
Persistent Page Indicator on Site Wide CSS Menus:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Application menu not showing in preference pane
Have brought some games for the iphone and ipod touch but have no application menu not showing in preference pane to upload them to to ipod touch. All software is current both itunes and ipod touch
Help would be very grateful,If you go to Preferences, General you should be able to see the "Applications" check box, below "Audiobooks". Check the box, this will show the Applications icon in your library.
Message was edited by: googood -
How to make preflight profile witch find out if exist in document spot color with name "CutContour", if not show allert, I try many combinations but nothing works
Thanks very much for your help, but I'm still overlooking something. I double checked to make sure that I did not have a hidden .txt file extention. I then decided to abandon the lock on preferences idea until I get it working. I converted my mozilla.cfg file back to plain text. I made sure I do not have an extra blank line at the end of each file. The syntax looks good, as far as I can tell. I'll copy and paste what I have so far. Did I have the file locations correct posted above? Also, if you feel i can delete some lines of text in my mozilla.cfg file I'll be happy to do so.
mozilla.cfg
<pre><nowiki>//
pref("privacy.sanitize.sanitizeOnShutdown", true);
pref("privacy.sanitize.promptOnSanitize", false);
pref("browser.rights.override", true);
pref(“app.update.auto”, false);
pref(“extensions.blocklist.enabled”, false);
pref(“extensions.shownselectionUI”, true);
pref(“browser.shell.checkDefaultBrowser”, false);
pref(“toolkit.telemetry.enabled”, false);
pref(“toolkit.telemetry.prompted”, 2);
pref(“toolkit.telemetry.rejected”, true);
pref(“app.update.auto”, false);
pref(“browser.download.useDownloadDir”, true);
pref(“browser.search.update”, false);
pref(“signon.autofillForms”, false);
pref(“signon.rememberSignons”, false);
pref(“browser.download.manager.scanWhenDone”, true);
pref(“browser.formfill.enable”, false);
pref(“xpinstall.enabled”, true);</nowiki></pre>
channel-prefs.js
pref("app.update.channel", "release");
override.ini
[XRE]
EnableProfileMigrator=false
all-lmc.js
pref("general.config.filename", "mozilla.cfg");
defaultPref("browser.startup.homepage", "data:text/plain,browser.startup.homepage=http://bbc.co.uk");
Again, thank you very much for your time. Do I create my own browserconfig.properties, and firefox.js? Also, I forgot to mention I'm running Windows 8. -
DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8
Hi,
I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
It works well in Google Chrome.
It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
The menu can be seen at work by clicking on this link:
www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
Below are all the scrips involved.
Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
/* 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: 10;
padding: 0;
list-style-type: none;
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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
/*height:38px;*/
margin: 0;
padding: 0;
list-style-type: none;
font-size: 87%;
z-index: 1020;
cursor: default;
width: 160px;
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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 24px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 160px;
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*height: 40px;*/
text-align: center;
/*vertical-align: center;*/
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*zzzzzzzz Text Color*/
color: #333; /*background-color: #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* 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-image: url(../Main-Buttons-mouse-over.jpg); /*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-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%;
/* My note --mouse over-- */
/* 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;
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;
Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
And last, here is the HTML code that has also not been modified in any way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Thanks in advance for any of your help.
Jose H.Hello Nancy,
I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now. Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
By the way.. the IE8 security measure did pop up while working from the server.
Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
Good luck.. as I know it can become a complicated task when creating custom Spry menus.
<b>Here is the finished CSS script</b>
<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: 10;
padding: 0;
list-style-type: none;
/* font size for top menu*/
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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: 87%;
z-index: 1020;
cursor: default;
width: 160px;
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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 0px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 162px;
/* New addition */
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*My note -- took out borders & changed text color to #333(black)& added my own mouse not over image-- */
/*border: 0px solid #333332;*/
background-image: url(../Main-Buttons.jpg);
/*height: 40px;*/
text-align: center;
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*My note --Text Color-- */
color: #333; /*background-color: was #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/* My note --took out all backgound & text color for mouse over-- */
/*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
/*My note -- took out background & text & added my own mouse over image-- */
background-image: url(../Main-Buttons-mouse-over.jpg);
/*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
/* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
height: 40px;
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%;
/* My note --mouse over-- */
/* 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;
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;
/* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
background: #3e6487;
</code>
<b>Here is the modified HTML script</b>
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<!-- My note --the bellow line was: <li><a href="#">Contact Us</a></li> --- changing it to: <li><a href="#" class="MenuBarItemSubmenu">Contact Us</a> corrected the height of the Contact us button wich did not have sub menus and because of this only diplayed at half size vertically in IE8 //-->
<li><a href="#" class="MenuBarItemSubmenu">Contact Us</a>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
</code>
And Richard.. Thanks again for the time and your help, truly appreciated.
Jose H. -
Spry horizontal menu- not showing in some browsers
my spry horizontal menu is showing up as a vertical list in
some of our viewers computers. can i adjust the basic html so that
if spry does not show up on someone's computer, a more basic
horizontal table will show?Thank you all for the answers.
Can pop menu magic work with image maps?
Back in the day I created several drop down menus in Dreamweaver CS2 by adding behaviors to image maps. I liked that I pretty much could drop a menu from any point on an image.
Example: http://www.bettendorfdental.com/
So I have been going back to my old laptop and CS2 every time I needed to change something in these menus, but that was very inefficient.
My client wants the top banner to be in one image, with customized buttons that share the background of the logo and business name.
I have been customizing the topaz template in pop up magic but what the client reallly wants is to have the tab images as part of the larger image. So ideally there wouldn't be any text in the top menu and only the drop down part would show up.
http://www.monicagraphicdesign.com/Bill/spiritual.html
For people like me, who do not write or understand code, even searching a knowledge base can be a challenge because we do no know what to type in the search box! I am glad to learn Project Seven offers one on one support.
Another challenge is that the client manages his own site and uses Front Page on a PC (and I have neither) so I don't even know if he can attach the stylesheets to every page where he inserts the menu. -
Spry Horizontal Menu not showing up in IE
I created a spry drop down menu (horizontal) with Dreamweaver CS5.
It displays great in all browsers, except for Internet Explorer, where the menu is not visible at all.
http://www.monicagraphicdesign.com/Bill/spiritual.html
I read on other threads about similar issues (problems with IE) that spry is no longer supported by Adobe, but that it still is part of CS6. (?)
Can these issues with IE be resolved? Or...
Should I be looking into other software or plug-ins for Dreamweaver? If so, what would be the best choice for someone who is not a programmer?
I use a Mac.
Thanks.
MoniThank you all for the answers.
Can pop menu magic work with image maps?
Back in the day I created several drop down menus in Dreamweaver CS2 by adding behaviors to image maps. I liked that I pretty much could drop a menu from any point on an image.
Example: http://www.bettendorfdental.com/
So I have been going back to my old laptop and CS2 every time I needed to change something in these menus, but that was very inefficient.
My client wants the top banner to be in one image, with customized buttons that share the background of the logo and business name.
I have been customizing the topaz template in pop up magic but what the client reallly wants is to have the tab images as part of the larger image. So ideally there wouldn't be any text in the top menu and only the drop down part would show up.
http://www.monicagraphicdesign.com/Bill/spiritual.html
For people like me, who do not write or understand code, even searching a knowledge base can be a challenge because we do no know what to type in the search box! I am glad to learn Project Seven offers one on one support.
Another challenge is that the client manages his own site and uses Front Page on a PC (and I have neither) so I don't even know if he can attach the stylesheets to every page where he inserts the menu. -
Navigation Menu not loading text
Hello All,
Just been having a look at iWeb 09 and was initially impressed at how when you add pages to the site they were automatically added to the navigation menu. However now i've come to create a site from the templates it is no longer adding the page tiles to the navigation menu as previous.
- All that is currently shown in the navigation menu is a single black bullet point.
- i have ticked "include page in navigation window" those that i want adding
- i have ticked "display navigation window"
Any ideas?
Many thanks in advance.
dj_elyWelcome to the Apple Discussions. If the navigation menu is not being displayed in iWeb even with the option to display it is selected then try the following:
1 - close iWeb.
2 - delete the iWeb preference file, com.apple.iWeb.plist, that resides in your User/Library/Preferences folder.
3 - go to your User/Library/Caches/com.apple.iWeb folder and delete the contents.
4 - reboot.
5 - launch iWeb and see if there's any improvement.
If that doesn't help continue:
6 - move the domain file from your User/Library/Application Support/iWeb folder to the Desktop.
7 - launch iWeb, create a new test site and save.
8 - go to the your User/Library/Application Support/iWeb folder and delete the new domain file.
9 - move your original domain file from the Desktop to the iWeb folder.
10 - launch iWeb and try again.
OT -
Mac gurus,
When I transferred my site to iweb 08, many things were different, but the one thing that I can't fix is the navigation menu. After reading some posts, I am nervous about publishing it, but even before I publish it, I would like to CENTER the navigation menu. The text block itself is still centered on the page, but the hyperlinks are now lined up on the left side of the text block.
I am unable to highlight anything in the text block in order to make the hyperlinks centered.
Any thoughts?
Thanks for your help, as always!
Lara Walker
Message was edited by: Doug & LaraI feel your pain!
The funny/worst thing is that I have added 2 new pages since I posted the original request for help: one blog and one movie page. The blog page that I added is in a different template and it centered the navigation menu with no problem. The movie page that I added is in the same template as the original website and the navigation menu is un-centered just like the rest of the pages. Bizarre!!! I thought that a new page would not have the same issues as the old pages do upon transfer.
Lara
Maybe you are looking for
-
Hey guys! Long time acount-less lurker, first time poster. Go easy on me if I come off as long-winded or nubile, I made an account to post only because I know you guys are a strong, knowledgeable community! Here are my specs before I get into my p
-
A customer wishes to cluster zones using Solaris 10 u 11, and sun cluster 3.3. Customer has two T4-1s, each server has two ldoms. ldom-1 on the two servers has two non global zones. Can server1-ldom1 and server2-ldom1 cluster nonglobal zone 1?
-
How to embed multimedia (video, youtube, slide show, gallery) into a div?
Maybe I have to be patient for all of these features to become part of Reflow, but my clients are clamoring for responsive websites like the ones Reflow creates... so I'm asking for all the rest of the goodies asap. I'm not a coder, so the wysiwyg a
-
JavaFX Setup Environment in Eclipse - Project creation fails
Hi, I am trying to create my first JavaFX application. I am following the instructions given in http://javafx.com/docs/gettingstarted/eclipse-plugin/create-first-javafx-app-eclipse.jsp page. When I try to create a Java FX project, I get the following
-
This system does not have the minimum requirements
install graphics driver for windows 8.1 64 bit in my laptop (i3 processor).got error in this system does not have the minimum requirements