MenuBar, IE, iframe, z-index
I'm having trouble getting this menu to work in IE. It's
completely fine in Firefox - everything works great. But sadly, IE
munches nice clean Spry code from DWCS3. Maybe it has to do with my
layout... Can anyone see where I've gone wrong? It's a two column,
css layout w/navigation on the right.
Here's the problem:
(see test page at:
http://www.sharoncamarillo.com/new/template_b2.php
1. The sub-menus show up beneath the main page content
2. iFrame is set to show scrollbars instead of hiding them
3. When the 2nd IE hack is active (from
SpryMenuBarVertical.css), it overrides the background color in IE7
4. No submenus show up at all in IE 5.2 Mac.
What I most need to fix are items 1 & 2.
Content is in div "content_left",
Vertical menubar navigation is in div "content_right"...
Oooh. scratch that. I just figured out how to get the
vertical menubar layer ABOVE the content_left layer in IE - I
removed "position:relative;" from the css and it worked. Z-index
had no effect on the content_left/submenu interaction.
Now, the only major problems are the iFrame scrollbars and,
now that I can see the submenus, spacing between each <li>
that shouldn't be there, which looks like it is fixed by the IE
hack that uses @media screen, projection workaround.
Sorry if this is a rather stream of consciousness request.
Anyone have any ideas on how to fix items 2 & 4?
Hello,
I managed to find the reason the iframe appears under the
submenu. The problem exists because the ul container has 200 px
(ul.MenuBarVertical ul) and the iframe will have the same width
while the li childes have 185 px so the iframe became visible
because of the 15px difference.
You should either remove this line from your CSS:
ul.MenuBarVertical ul li {width:185px;}
either you increase the width to 200px or shrink the
container to 185px.
Regards,
Cristian
Similar Messages
-
SPry menubar floating submenu's
I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
Here is my website www.nathanielmcmahon.com
I had it working in one browser before but not others. Now firefox and iexplorer push content below and chrome pushes content to the side.
I want the menu to display over content with an opaque background
Below is the modified sprymenubar css.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
font-size: 100%;
cursor: default;
z-index: 1200;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
text-align: left;
cursor: pointer;
width: auto;
float: left;
height: inherit;
position: relative;
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
list-style-type: none;
font-size: 100%;
cursor: default;
width: 10em;
position: relative;
left: -1000em;
z-index: 1300;
visibility: visible;
Submenu that is showing with class designation MenuBarSubmenuVisible,
we set left to auto so it comes onto the screen below its parent menu
item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 115px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 13em;
z-index: 2000;
height: 35px;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
/transparent-png.png', sizingMethod='fixed');
background-color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -27% 0 0 75%;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: .5em;
color: #999999;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #999999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal
a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #999999;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on
the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../SpryAssets/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on
the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(../SpryAssets/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../SpryAssets/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(../SpryAssets/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 94% 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
z-index: 1010;
position: absolute;
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
Here is my website www.nathanielmcmahon.com
I had it working in one browser before but not others. Now firefox and iexplorer push content below and chrome pushes content to the side.
I want the menu to display over content with an opaque background
Below is the modified sprymenubar css.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
font-size: 100%;
cursor: default;
z-index: 1200;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
text-align: left;
cursor: pointer;
width: auto;
float: left;
height: inherit;
position: relative;
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
list-style-type: none;
font-size: 100%;
cursor: default;
width: 10em;
position: relative;
left: -1000em;
z-index: 1300;
visibility: visible;
Submenu that is showing with class designation MenuBarSubmenuVisible,
we set left to auto so it comes onto the screen below its parent menu
item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 115px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 13em;
z-index: 2000;
height: 35px;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
/transparent-png.png', sizingMethod='fixed');
background-color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -27% 0 0 75%;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: .5em;
color: #999999;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #999999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal
a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #999999;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on
the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../SpryAssets/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on
the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(../SpryAssets/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../SpryAssets/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(../SpryAssets/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 94% 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
z-index: 1010;
position: absolute;
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Hello
I am having issues with z-index and layering. I have an iframe which is a full screen video acting as a background. I used a spry tabbed panels widget for my tabs and text, and canNOT get it to appear in FRONT of the video. The iframe z-index is set at 1 and position set at absolute. The spry is z-index 2 with position absolute. The video file the iframe is referencing is an .html (I heard iframes might have trouble with .php files).
Also, the really confusing part is that the website works fine on a mac computer safari browser. But it won't work on my pc safari browser or googe chrome / mozilla / ie.
Any ideas?
thanks so much for the help.Not quite. Flash can be inserted into the stacking order by adding adding the correct wmode. add
<param name="wmode" value="transparent"></param>
to your flash file and wmode="transparent" in the embed, and all positioned html elements will float over the flash object.
This will also knock out the background of the flash object, allowing the html background to show through. wmode=opaque will also allow the stacking of the flash, but keep the flash background.
Nancy O. wrote:
Flash objects always rise to the top no matter which stacking order you use. I'm afraid the only truly, cross-browser reliable way around this is to move your menus away from competing Flash objects.
Related link:
http://veerle.duoh.com/index.php/blog/comments/experimenting_with_flash_content_ and_z_index/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
How do you enlarge thumbnails from one iframe into a large iframe??
Hello,
This has been driving me nuts if anybody could help it would be extremley appreciated.
I am fairly new to web design and I would like to create an image gallery with thumbnails in a scrolling iframe that when clicked on open up in a larger iframe on the same page (to enlarge the image). I am using dreamweaver CS4. I have made html pages for the large images but cant figure out how to link them to the thumbnails in order for them to open in the large iframe. The scrolling iframe is currently linked to an html page containing all the thumbnail images. Ideally I would like to learn how to do this in html code as opposed to extensions but as I am a novice I will need it spelled out idiot proof!! Below is an image of what i am trying to achieve (thumbnails are in a scrolling iframe and below is the larger iframe). Also can this same set up be re-created with video content (when you click on a thumbnail in a scrolling iframe it opens up the video in a large iframe)
Please help me!!!! Many thanks in advance!Thanks very much for your response!! I will look through that tutorial. But i think i have just figured it out by using href. This is the code that i have used;
<a href="Large Image 01.html" target="largeimage"><img src="01 Thumbnail.jpg" width="132" height="75" /></a></td>
This code is on the thumbnail images page and it links it to the iframe (named largeimage) that is on my main index page (the image I posted above).
The code for the large iframe on my index page is as follows;
<iframe name="largeimage" id="largeimage" width="528" height="297" ></iframe>
The code for the scrolling iframe on my index page is as follows;
<iframe name="imagescroll" id="imagescroll" height="110" width="600" scrolling="auto" src="image scroll page.html"></iframe>
All the large images have their own individual html pages. Basically i dropped the large image into a table on a new html page and saved it. Then repeated this process for all the images. This large image page is then used as the href source and sent to the target "largeimage" (iframe on index page). The thumbnails also have their own seperate html page.
Hopefully this will help people who have the same problem!!
Cheers!! -
Transparent background on spry menubar
I've been trying to get a transparent background on my spry menybar submenus with little sucess. Using alpha filters creates problems with ie and I can't get a transparent gif to work for some reason.
website here www.nathanielmcmahon.com
and the css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
font-size: 100%;
cursor: default;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
text-align: left;
cursor: pointer;
width: auto;
float: left;
position: relative;
background-image: url(../assets/images/transbgd.gif);
/* 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
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8.2em;
left: -1000em;
position: absolute;
z-index: 1020;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 115px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 13em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -27% 0 0 75%;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em;
color: #999999;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
background-image: url(../assets/images/transbgd.gif);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #999999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #999999;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../SpryAssets/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(../SpryAssets/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../SpryAssets/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 94% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(../SpryAssets/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 94% 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
z-index: 1010;
position: absolute;
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: transparent;Create a file to put your css values in (I'll call it "hello-world.css").
In hello-world.css put the following style:
.tab-pane *.tab-header-background
-fx-background-color: #00000000;
Add this to your code:
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("/hello-world.css").toExternalForm());
The code above will apply the style to all TabPanes in your scene. You also have the ability to apply the style only to a given instance CSS can by used to do that as well. There are others ways to accomplish the same thing. This way was more straight forward to me. -
Flash button: Jump to anchor tag in iframe.
Hi there...
I have a problem with flash button when linking to named anchor in html - iframe. I used the code below:
on (release) {
getURL ("calculator.html#goldvalue", "main");
"main" is name of an iframe in index.html, that opens with calculator.html.
<iframe id="main" src="calculator.html" width="1024" height="500" frameborder="0" scrolling="no" name="main"><p>Your browser doesn't support iframes.</p></iframe>
Any idea how to fix this?
Tnx, A."goldvalue" is na anchor name in calculator.html, it's not a function or anything... I'd like flash button to scroll or in another words to jump to middle of the html page. All links do work - except the ones with anchor names. As the matter of fact even calculator.html#goldvalue works as a link, it just doesn't jumps to the #goldvalue.
-
Hi Gang,
Been wrestling with a JQuery script, getting it to display on this page for the main images:
http://72.29.76.51/~organica/index.html
Any insight to what I'm doing wrong is appreciated.
Here's the 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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Organica Natural Foods | Northvale, New Jersey</title>
<!-- InstanceEndEditable -->
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<link href="s3slider.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
</script>
<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>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#003300;
font-family: "Lucida Sans Unicode", "Lucida Grande", 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;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 100%;
.MenuBarFixedCentered {
float: none;
width: 100%;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0;
/* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 8px 0px 8px;
background-color:transparent;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 6px 15px 6px 15px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
background-color:transparent;
padding:0px 8px 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;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 7em;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: transparent;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #999999;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #999999;
#MenuBar .SubMenu .MenuItemHover {
background-color: #003300;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #999999;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #003300;
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;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #003300;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #999999;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #999999;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body bgcolor="#17321A">
<div id="outerWrapper">
<div id="header"><img src="media/header.jpg" width="960" height="160" alt="organica title" /></div>
<div id="navbar">
<ul id="MenuBar">
<li> <a href="index.html">Home</a></li>
<li> <a href="kitchen.html">Kitchen</a>
<ul>
<li> <a href="menus.html">Menus</a></li>
<li> <a href="catering.html">Catering</a></li>
</ul>
</li>
<li> <a href="juicebar.html">Juice Bar</a></li>
<li> <a href="produce.html">Produce</a></li>
<li> <a href="supplements.html">Supplements</a></li>
<li> <a href="grocery.html">Grocery</a>
<ul>
<li> <a href="packaged.html">Packaged Goods</a></li>
<li> <a href="refrigerated.html">Refrigerated</a></li>
<li> <a href="frozen.html">Frozen Foods</a></li>
<li> <a href="glutenfree.html">Gluten Free</a></li>
</ul>
</li>
<li> <a href="bodycare.html">Body Care</a></li>
<li> <a href="events.html">Events</a></li>
<li> <a href="contact.html">Contact</a>
<ul>
<li> <a href="directions.html">Directions</a></li>
<li> <a href="employment.html">Employment</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarFullwidth",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
</div><!-- end navbar -->
<div id="contentWrapper"><!-- InstanceBeginEditable name="sidebar" -->
<div id="sidebar">
<h2>Get Your Organica Loyalty Card<br />
<img src="media/loyalty.jpg" width="200" height="129" alt="loyalty" /></h2>
<hr width="90%" size="1" />
<p>
<style>
.link,
.link a,
.signupframe
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
.link,
.link a {
text-decoration: none;
.signupframe {
border: 0px solid #000000;
background: #ffffff;
.signupframe .required {
font-size: 10px;
</style>
</p>
<form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup8190" accept-charset="UTF-8" onsubmit="return verifyRequired8190();" >
<input type="hidden" name="redirect" value="http://organicanaturalfoods.com/thanks.html" />
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html" />
<div id="SignUp">
<h2>Sign-up for our Organica e-News<br />
Receive coupons, event info, and more! </h2>
<table width="200" align="center" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center"><input type="text" name="fields_email" /></td>
</tr>
<input type="hidden" name="listid" value="70490" />
<input type="hidden" name="specialid:70490" value="HHBU" />
<input type="hidden" name="clientid" value="971128" />
<input type="hidden" name="formid" value="8190" />
<input type="hidden" name="reallistid" value="1" />
<input type="hidden" name="doubleopt" value="0" />
<tr>
<td><div align="center">
<input type="submit" name="Submit" value="Submit" />
</div></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
var icpForm8190 = document.getElementById('icpsignup8190');
if (document.location.protocol === "https:")
icpForm8190.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired8190() {
if (icpForm8190["fields_email"].value == "") {
icpForm8190["fields_email"].focus();
alert("The Email field is required.");
return false;
return true;
</script>
<p></p>
<p>
<iframe src=
"http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOrganicaN aturalFood&width=250&colorscheme=light&show_faces=true&border_color&stream=false&header=fa lse&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</p>
</div>
<!-- InstanceEndEditable --><!-- end sidebar --><!-- InstanceBeginEditable name="content" -->
<div id="content">
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="media/front_1.jpg" />
<span>Welcome to Organica!</span>
</li>
<li class="s3sliderImage">
<img src="media/front_2.jpg" />
<span>Welcome to Organica!</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</div>
<!-- InstanceEndEditable --><!-- end content -->
<div id="footer">
<a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="links.html">Links</a> | <a href="directions.html">Directions</a> | <a href="employment.html">Employment</a> | <a href="contact.html">Contact Us</a><br />
All contents ©2011 Organica Natural Foods | Site Design: <a href="http://nowagenewmedia.com" target="_blank">Now Age New Media</a></div><!-- end footer -->
</div><!-- end contentWrapper -->
</div>
</body>
<!-- InstanceEnd --></html>Usually, the reason why a widget does not work is because the support files are not-present/corrupt/out-of-date.
Try using
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
it may help. The jQuery version can be changed to a more modern one.
Gramps -
Menu dropping down behind image.
http://72.29.76.51/~organica/index.html
If you scroll over the GROCERY tab, you'll see that the pull down is hidden behind the image below. Any hints on getting the menu to appear in front of the image? Here's the 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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Organica Natural Foods | Northvale, New Jersey</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [600, 493], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["media/slide_2.jpg", "", "", ""],
["media/slide_1.jpg", "", "", ""],
//<--no trailing comma after very last image element!
displaymode: {type:'auto', pause:6000, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 2000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
</script>
<!-- InstanceEndEditable -->
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<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>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#003300;
font-family: "Lucida Sans Unicode", "Lucida Grande", 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;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 100%;
.MenuBarFixedCentered {
float: none;
width: 100%;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0;
/* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 8px 0px 8px;
background-color:transparent;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 6px 15px 6px 15px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
background-color:transparent;
padding:0px 8px 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;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 7em;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: transparent;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #999999;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #999999;
#MenuBar .SubMenu .MenuItemHover {
background-color: #003300;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #999999;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #003300;
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;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #003300;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #999999;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #999999;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body bgcolor="#17321A">
<div id="outerWrapper">
<div id="header"><img src="media/header.jpg" width="960" height="160" alt="organica title" /></div>
<div id="navbar">
<ul id="MenuBar">
<li> <a href="index.html">Home</a></li>
<li> <a href="kitchen.html">Kitchen</a>
<ul>
<li> <a href="menus.html">Menus</a></li>
<li> <a href="catering.html">Catering</a></li>
</ul>
</li>
<li> <a href="juicebar.html">Juice Bar</a></li>
<li> <a href="produce.html">Produce</a></li>
<li> <a href="supplements.html">Supplements</a></li>
<li> <a href="grocery.html">Grocery</a>
<ul>
<li> <a href="packaged.html">Packaged Goods</a></li>
<li> <a href="refrigerated.html">Refrigerated</a></li>
<li> <a href="frozen.html">Frozen Foods</a></li>
<li> <a href="glutenfree.html">Gluten Free</a></li>
</ul>
</li>
<li> <a href="bodycare.html">Body Care</a></li>
<li> <a href="events.html">Events</a></li>
<li> <a href="contact.html">Contact</a>
<ul>
<li> <a href="directions.html">Directions</a></li>
<li> <a href="employment.html">Employment</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarFullwidth",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
</div><!-- end navbar -->
<div id="contentWrapper"><!-- InstanceBeginEditable name="sidebar" -->
<div id="sidebar">
<h2>Get Your Organica Loyalty Card<br />
<img src="media/loyalty.jpg" width="200" height="129" alt="loyalty" /></h2>
<hr width="90%" size="1" />
<p>
<style>
.link,
.link a,
.signupframe
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
.link,
.link a {
text-decoration: none;
.signupframe {
border: 0px solid #000000;
background: #ffffff;
.signupframe .required {
font-size: 10px;
</style>
</p>
<form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup8190" accept-charset="UTF-8" onsubmit="return verifyRequired8190();" >
<input type="hidden" name="redirect" value="http://organicanaturalfoods.com/thanks.html" />
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html" />
<div id="SignUp">
<h2>Sign-up for our Organica e-News<br />
Receive coupons, event info, and more! </h2>
<table width="200" align="center" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center"><input type="text" name="fields_email" /></td>
</tr>
<input type="hidden" name="listid" value="70490" />
<input type="hidden" name="specialid:70490" value="HHBU" />
<input type="hidden" name="clientid" value="971128" />
<input type="hidden" name="formid" value="8190" />
<input type="hidden" name="reallistid" value="1" />
<input type="hidden" name="doubleopt" value="0" />
<tr>
<td><div align="center">
<input type="submit" name="Submit" value="Submit" />
</div></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
var icpForm8190 = document.getElementById('icpsignup8190');
if (document.location.protocol === "https:")
icpForm8190.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired8190() {
if (icpForm8190["fields_email"].value == "") {
icpForm8190["fields_email"].focus();
alert("The Email field is required.");
return false;
return true;
</script>
<p></p>
<p>
<iframe src=
"http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOrganicaN aturalFood&width=250&colorscheme=light&show_faces=true&border_color&stream=false&header=fa lse&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</p>
</div>
<!-- InstanceEndEditable --><!-- end sidebar --><!-- InstanceBeginEditable name="content" -->
<div id="content"><div id="slide"><div id="fadeshow1"></div></div>
</div>
<!-- InstanceEndEditable --><!-- end content -->
<div id="footer">
<a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="links.html">Links</a> | <a href="directions.html">Directions</a> | <a href="employment.html">Employment</a> | <a href="contact.html">Contact Us</a><br />
All contents ©2011 Organica Natural Foods | Site Design: <a href="http://nowagenewmedia.com" target="_blank">Now Age New Media</a><br />
*Statements on this site relating to any dietary supplements have not been evaluated by the Food and Drug Administration. <br />
These products are not intended to diagnose, treat, cure or prevent any disease. If you are pregnant, nursing, taking medication, <br />
or have a medical condition, consult your physician before using these products. </div><!-- end footer -->
</div><!-- end contentWrapper -->
</div>
</body>
<!-- InstanceEnd --></html>IE doesn't like something about
http://72.29.76.51/~organica/fadeslideshow.js
Perhaps try re-uploading it. -
My spry menu has disappeared. Help!
I had my spry menu all set except for it wasn't quite long enough. In the process of getting the width correct, it went transparent. I can see the menu items properties and in the code and the blue box is there. I just can't see the menu itself in Dreamweaver or online. I can't figure out what I changed that made it do this.
ul.MenuBarHorizontal
list-style-type: none;
cursor: default;
width: 890
`;
text-align: center;
float: left;
z-index: 1000;
width: 878px;
clear: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
clip: rect(auto,0px,auto,0px);
margin: 0px;
position: relative;
height: inherit;
left: 147px;
top: 0px;
right: 0px;
bottom: 0px;
/* 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;
text-align: left;
float: none;
width: auto;
clear: right;
height: auto;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 105%;
text-align: center;
cursor: pointer;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
z-index: auto;
font-weight: normal;
white-space: normal;
display: block;
width: auto;
height: auto;
float: left;
position: absolute;
left: 315px;
top: -310px;
/* 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;
z-index: 1020;
cursor: default;
width: auto;
left: -1000em;
text-align: left;
float: none;
clear: right;
position: relative;
height: auto;
/* 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
text-align: left;
left: auto;
width: auto;
clear: right;
float: none;
position: relative;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: auto;
float: none
!important;
display: block;
white-space: nowrap;
text-align: left;
clear: right;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
text-align: left;
width: auto;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
clear: right;
float: none;
position: relative;
/* 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: auto;
text-align: left;
right: auto;
bottom: auto;
height: auto;
width: auto;
float: none;
clear: right;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
text-align: center;
width: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
float: none;
padding: 0em;
clear: right;
position: relative;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: default;
background-color: #102842;
text-decoration: none;
text-align: left;
border: thin inset #FFF;
color: #FFF;
letter-spacing: normal;
word-spacing: normal;
width: auto;
list-style-type: none;
margin: auto;
float: none;
padding-top: 0.25em;
padding-right: 0.75em;
padding-bottom: 0.75em;
padding-left: 0.25em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
font-size: 100%;
clear: right;
position: relative;
/* 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: #FFF;
color: #102842;
text-align: center;
padding: 0px;
width: auto;
float: none;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #FFF;
color: #0D8C17;
padding: 0px;
text-align: left;
margin: auto;
width: auto;
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
text-align: left;
margin: auto;
width: auto;
padding: 0.5em;
float: none;
clear: right;
position: relative;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #102842;
text-align: left;
width: auto;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: none;
text-align: left;
position: relative;
width: auto;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #FFF;
text-align: left;
position: relative;
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
z-index: 1010;
filter:alpha(opacity:0.1);
text-align: left;
position: relative;
/* 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: block;
f\loat: left;
background: #FFF;
text-align: left;
position: relative;
width: auto;
<ul class="MenuBarHorizontal" id="MenuBar1">
<li><a href="#">HOME</a></li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="#">Become a Member</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">NEWS</a>
<ul>
<li><a href="#">Events</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Job Listings</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMUNITY</a>
<ul>
<li><a href="#">Scott Air Force Base</a></li>
<li><a href="#">City of O'Fallon</a></li>
<li><a href="#">O'Fallon Welcome Guide</a></li>
<li><a href="#">O'Fallon-Shiloh Area Restaurant Guide</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Shiloh</a>
<ul>
<li><a href="#">Village of Shiloh</a></li>
<li><a href="#">Village Services Guide</a></li>
</ul>
</li>
<li><a href="#">Events & Reception Planning Guide</a></li>
<li><a href="#">Relocation Packet Info</a></li>
<li><a href="#">The Tourism Bureau Illinois South</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMITTEES</a>
<ul>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Ambassadors</a></li>
<li><a href="#">Star Investors</a></li>
<li><a href="#">Member Directory</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">CONTACT US</a>
<ul>
<li><a href="#">Member Login</a></li>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Relocation Packet Info</a></li>
<li><a href="#">Community Business Info</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">EVENTS</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">JOIN</a>
<ul>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Become a Member</a></li>
<li><a href="#">Hot Deals</a></li>
<li><a href="#">Member Login</a></li>
<li><a href="#">Community Business Info</a>
<br />
</li>
</ul>
</li>
</ul>I added the following to the document (after the link to SpryMenuBarHorizontal.css)
<style>
ul.MenuBarHorizontal li {
top: auto;
position: relative;
</style>
and managed to see the menubar.
However, while perusing the stylesheet, I noticed that it had been mistreated beyond recognition. In view of this, I would recommend starting with an untouched stylesheet and changing only the colours and font sizes of existing style rules. Do not add new rules, do not delete existing rules.
See how you go and report back here in case of trouble. -
Current link status within sidebar editable region library item
Hello,
I have looked all around and am still at a loss on how to address this issue. I would like the current page to be highlighted white when it is clicked on, although I am having no success. The user should see the "Into" link in white on this link: http://www2.biochem.wisc.edu/projectcrystal/la-Introduction-to-basic-chemistry.html
Thanks from a Dw beginner,
Dan
And, here is the code for this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/design_main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" --><title>Project CRYSTAL: Crystallographers Researching with Young Scientists: Teaching and Learning</title>
<script src="/projectcrystal/Scripts/swfobject_modified.js" type="text/javascript"></script>
<!-- InstanceEndEditable -->
<link href="/projectcrystal/style.css" rel="stylesheet" type="text/css">
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight/supersleight-min.js"></script>
<![endif]-->
<!-- InstanceParam name="class" type="text" value="" -->
<!-- InstanceParam name="home" type="text" value="" -->
<!-- InstanceParam name="LearnAlong" type="text" value="" -->
<!-- InstanceParam name="modules" type="text" value="" -->
<!-- InstanceParam name="TheHoldenLab" type="text" value="" -->
<!-- InstanceParam name="contactus" type="text" value="" -->
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="/projectcrystal/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin .js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin .js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#cccccc;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
width: 100%;
float: left;
color: #000;
text-align: left;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
background-color:#cccccc;
padding-top: 0px;
padding-right: 22px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
color: #000;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#000;
background-color:#cccccc;
width: 10em;
width:auto;
padding-top: 6px;
padding-right: 15px;
padding-bottom: 6px;
padding-left: 30px;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
background-color:#ffffff;
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;
color: #000;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#ffffff;
color:#000;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #999;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
color: #FFF;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #999999; /* consider exposing this prop separately*/
color: #FFF;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #999999;
color: #FFF;
#MenuBar .SubMenu .MenuItemHover {
background-color: #999;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #999;
color: #FFF;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #ffffff;
min-width:100%; /* 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;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
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. */
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #999999; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #cccccc; /* consider exposing this prop separately*/
color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
a:active {
color: #FFF;
text-decoration: underline;
a:hover {
color: #FFF;
text-decoration: underline;
h4 {
color: #3E8012;
font-size: 35px;
background-image: url(/projectcrystal/check-icon-for-h4-heading.png);
background-repeat: no-repeat;
background-position: left top;
padding-left: 70px;
a:visited {
color: #23998C;
text-decoration: underline;
a:link {
text-decoration: underline;
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="wrapper">
<div id="header"><a href="/projectcrystal/index.html"><img src="/projectcrystal/Local Site Folder/Images/header_logo_nsf_final.jpg" width="83" height="95" alt="project CRYSTAL logo">
<h1>Project CRYSTAL</h1>
<h2>Crystallographers Researching with Young Scientists: Teaching And Learning</h2></a>
</div>
<!--End header-->
<ul id="MenuBar">
<li> <span class="MenuBar"><a href="/projectcrystal/index.html" class="MenuBar">HOME</a></span></li>
<li><a href="/projectcrystal/learn-along-with-young-scientists.html" class="MenuBar">LEARN ALONG WITH YOUNG SCIENTISTS</a>
<ul>
<li><a href="/projectcrystal/la-Introduction-to-basic-chemistry.html">Introduction into Basic Chemistry</a></li>
<li><a href="/projectcrystal/la-the-structures-of-atoms.html">The Structures of Atoms</a></li>
<li><a href="/projectcrystal/la-dna-part-one-properties-and-structures.html">DNA Part One: Properties and Structure</a></li>
<li><a href="/projectcrystal/la-dna-part-two-replication.html">DNA Part Two: Replication</a></li>
<li><a href="/projectcrystal/la-dna-part-three-transcription-translation-and-protein-structure.h tml">DNA Part Three: Transcription, Translation and Protein Structure</a></li>
</ul>
</li>
<li><a href="/projectcrystal/modules.html" class="MenuBar">MODULES</a>
<ul>
<li><a href="/projectcrystal/m-cos-home.html">The Chemistry of Sugars</a>
<ul>
<li><a href="/projectcrystal/m-cos-atomsandmatter.html" class="MenuBar">Atoms and Matter</a></li>
<li><a href="/projectcrystal/m-cos-theperiodictable.html" class="MenuBar">The Periodic Table</a></li>
<li><a href="/projectcrystal/m-cos-bonding.html" class="MenuBar">Bonding</a></li>
<li><a href="/projectcrystal/m-cos-importanceofsugars.html" class="MenuBar">Importance of Sugars</a></li>
<li><a href="/projectcrystal/m-cos-foodandnutrition.html" class="MenuBar">Food and Nutrition</a></li>
<li><a href="/projectcrystal/m-cos-unusualsugars.html" class="MenuBar">Unusual Sugars</a></li>
<li><a href="/projectcrystal/m-cos-modeling.html" class="MenuBar">Modeling</a></li>
</ul>
</li>
<li><a href="/projectcrystal/m-cof-home.html">The Chemistry of Fats</a>
<ul>
<li><a href="/projectcrystal/m-cof-atomsandmatter.html" class="MenuBar">Atoms and Matter</a></li>
<li><a href="/projectcrystal/m-cof-theperiodictable.html"class="MenuBar">The Periodic Table</a></li>
<li><a href="/projectcrystal/m-cof-bonding.html" class="MenuBar">Bonding</a></li>
<li><a href="/projectcrystal/m-cof-typesof_fats.html" class="MenuBar">Types of Fats</a></li>
<li><a href="/projectcrystal/m-cof-steroids.html" class="MenuBar">Steroids</a></li>
<li><a href="/projectcrystal/m-cof-cholesterol.html" class="MenuBar">Cholesterol</a></li>
<li><a href="/projectcrystal/m-cof-importanceof_fats.html" class="MenuBar">Importance of Fats</a></li>
<li><a href="/projectcrystal/m-cof-thecellmembrane.html" class="MenuBar">The Cell Membrane</a></li>
</ul>
</li>
<li><a href="/projectcrystal/m-cop-home.html">The Chemistry of Proteins</a>
<ul>
<li><a href="/projectcrystal/m-cop-atomsandmatter.html"class="MenuBar">Atoms and Matter</a></li>
<li><a href="/projectcrystal/m-cop-theperiodictable.html" class="MenuBar">The Periodic Table</a></li>
<li><a href="/projectcrystal/m-cop-bonding.html"class="MenuBar">Bonding</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/projectcrystal/holdenlab-home.html" class="MenuBar">HOLDEN LAB</a>
<ul>
<li><a href="/projectcrystal/hl-newsworthy.html">Newsworthy</a></li>
<li><a href="/projectcrystal/hl-xraycrystallography.html">X-ray Crystallography</a></li>
<li><a href="/projectcrystal/hl-sugarchemistry.html">Sugar Chemistry</a></li>
<li><a href="/projectcrystal/hl-labmembers.html">Lab Members</a>
<ul>
<li><a href="/projectcrystal/hl-lm-graduatestudents.html">Graduate Students</a></li>
<li><a href="/projectcrystal/hl-lm-highschoolinterns.html">High School Interns</a></li>
<li><a href="/projectcrystal/hl-lm-projectcrystal.html">Project CRYSTAL</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/projectcrystal/contactus.html" class="MenuBar">CONTACT</a></li>
</ul>
<ul>
<ul>
<ul>
<ul>
</ul>
</ul>
</ul>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
<div id="sidebar">
<div class="top"></div>
<div class="content"> <!-- InstanceBeginEditable name="sidebarcontent" --><!-- #BeginLibraryItem "/Library/learn along.lbi" -->
<style type="text/css">
a:link {
color: #23998C;
a:visited {
color: #23998C;
a:hover {
color: #FFF;
</style>
<h1>Learn Along Lessons</h1>
<p><a href="/projectcrystal/la-Introduction-to-basic-chemistry.html">Introduction to Basic Chemistry</a></p>
<p><a href="/projectcrystal/la-the-structures-of-atoms.html">The Structures of Atoms</a></p>
<p><a href="/projectcrystal/la-dna-part-one-properties-and-structures.html">DNA Part One: Properties and Structures</a></p>
<p><a href="/projectcrystal/la-dna-part-two-replication.html">DNA Part Two: Replication</a></p>
<p><a href="/projectcrystal/la-dna-part-three-transcription-translation-and-protein-structure.h tml">DNA Part Three: Transcription, Translation and Protein Structure</a></p>
<!-- #EndLibraryItem --><!-- InstanceEndEditable --></div>
<div class="bottom"></div>
</div><!--End sidebar-->
<div id="main">
<div class="top"></div>
<div class="content">
<!-- InstanceBeginEditable name="maincontent" -->
<h1>Learn Along</h1>
<h2>Introduction to Basic Chemistry</h2>
<p>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="500">
<param name="movie" value="/projectcrystal/LA_Introduction_to_Basic_Chemistry.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="/projectcrystal/Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/projectcrystal/LA_Introduction_to_Basic_Chemistry.swf" width="700" height="500">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="/projectcrystal/Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
<!-- InstanceEndEditable --></div>
<div class="bottom"></div>
</div><!--End main--><div id="pulldown"></div>
</div><!--End wrapper-->
<div id="footer">
<p>Copyright © 2011 The Board of Regents of the University of Wisconsin System<br>
Last updated:<!-- InstanceBeginEditable name="updated" -->
<!-- #BeginDate format:Am1 -->July 26, 2011<!-- #EndDate -->
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
<!-- InstanceEndEditable --><br>
Feedback, questions, or accessibility issues: [email protected]<br>
</p>
</div>
<!--End footer -->
</body>
<!-- InstanceEnd -->I would like the current page to be highlighted white when it is clicked on,
Here's one method
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml -
Spry menu bar won't update when published
I am building a dreamweaver webpage though a template.
for some reason it will not change the spry menu bar to update the changes made to the links on it.
that and the links won't work on the website (i uploaded it to a test website).
I am not sure if it is the same problem.
I changed the links from site to document relative.
I also checked the codes in http://validator.w3.org/check and http://jigsaw.w3.org/css-validator/ .
I also read this link and it didn't help me http://helpx.adobe.com/dreamweaver/kb/paths-dreamweaver-templates.html .
Can someone help please!
Thank youI am not sure why that will not upload to the site correctly.
I am uploading to a godaddy server. Is there a way I should be saving things (links and such) that I might be doing wrong? am I naming my links incorrectly? how do I make them so they will work once uploaded.
I followed the suggestions that you made and it looks like it is there but for somereason when i preview the page in a browser or live view the background image (parchment) doesn't show up on the screen.and the spry menu bar only comes up as an unordered list. I am not sure what would be causing this.
I have attached the code for 2 pages the first is the code of the template test file you suggested I make and the second is the code for the education connection page (this is a page that was made from the template and the background image is not working-i had this problem before but i thought it was fixed as the website has it fixed when i published it)
TEST SITE:
<!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"><!-- InstanceBegin template="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/Templates/Main_sitepage_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Jan Kardys' Literary Agency</title>
<!-- InstanceEndEditable -->
<style type="text/css">
#header {
float: left;
width: 1000px;
#Menu_bar {
float: left;
width: 190px;
#Page_Content {
float: right;
width: 1000px;
font-family: "MS Serif", "New York", serif;
#footer {
float: left;
width: 1000px;
#Main_content {
float: left;
width: 395px;
padding-left: 100px;
#xtra_content {
float: right;
width: 395px;
padding-right: 100px;
font-family: "MS Serif", "New York", serif;
#container {
width: 1000px;
margin: 0 auto;
background-image: url(file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/Images/Parchment.gif);
overflow: hidden;
#header_title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #0C3;
float: left;
#header_menubar {
float: right;
</style>
<style type="text/css">
body {
</style>
<script src="/js/enhance.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryDOMUtils.js"" type="text/javascript"></script>
<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="http://labs.adobe.com/technologies/spry/ui/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>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2466548" binding="#OAWidget" />
<oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
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 ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 0px 0px 0px;
background-color:transparent;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#33ff66;
background-color:transparent;
padding: 6px 15px 6px 15px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
background-color:transparent;
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;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#00ff33;
padding: 6px 5px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: transparent;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #000000;
#MenuBar .SubMenu .MenuItemHover {
background-color: transparent;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #333333;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id= "container">
<div id="header">
<div id="header_title"><h1>Jan kardy's Literary Agency</h1></div>
<div id="header_menubar">
</li>
</ul>
<!-- InstanceBeginEditable name="menubar_region" -->
<ul id="MenuBar">
<li> <a href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/index.html">Home</a></li>
<li> <a href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/about_jankardys.html">About Jan Kardys</a></li>
<li> <a href="#">Resources</a>
<ul>
<li> <a href="/Education_connection.html">Education Connection</a></li>
<li> <a href="/submission_guidelines.html">Submission Guidelines</a> </li>
<li> <a href="#">Blogs</a>
<ul>
<li> <a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
<li> <a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Netwroking Blog</a></li>
</ul>
</li>
<li> <a href="#">First Steps to Publishing</a></li>
<li> <a href="#">Library & Publishing Events</a></li>
<li> <a href="#">Art Gallery</a> </li>
</ul>
</li>
<li> <a href="#">Clients</a></li>
<li> <a href="#">Contact Jan Kardys</a> </li>
</ul>
<!-- InstanceEndEditable --><script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 200,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
</li>
</ul>
</div>
</div>
<div id="Page_Content"><!-- InstanceBeginEditable name="Content_main_editable" -->
<div id="Main_content">hi</div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Xtra_content_editable" -->
<div id="xtra_content">
<h3>News & Events </h3>
<p> </p>
</div>
<!-- InstanceEndEditable --></div>
<div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
</div>
</body>
<!-- InstanceEnd --></html>
EDUCATION CONNECTION 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"><!-- InstanceBegin template="/Templates/Main_sitepage_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Jan Kardys' Literary Agency</title>
<!-- InstanceEndEditable -->
<style type="text/css">
#header {
float: left;
width: 1000px;
#Menu_bar {
float: left;
width: 190px;
#Page_Content {
float: right;
width: 1000px;
font-family: "MS Serif", "New York", serif;
#footer {
float: left;
width: 1000px;
#Main_content {
float: left;
width: 395px;
padding-left: 100px;
#xtra_content {
float: right;
width: 395px;
padding-right: 100px;
font-family: "MS Serif", "New York", serif;
#container {
width: 1000px;
margin: 0 auto;
background-image: url(/Images/Parchment.gif);
overflow: hidden;
#header_title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #0C3;
float: left;
#header_menubar {
float: right;
</style>
<style type="text/css">
body {
</style>
<script src="/js/enhance.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryDOMUtils.js"" type="text/javascript"></script>
<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="http://labs.adobe.com/technologies/spry/ui/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>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2466548" binding="#OAWidget" />
<oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
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 ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 0px 0px 0px;
background-color:transparent;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#33ff66;
background-color:transparent;
padding: 6px 15px 6px 15px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
background-color:transparent;
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;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#00ff33;
padding: 6px 5px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: transparent;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #000000;
#MenuBar .SubMenu .MenuItemHover {
background-color: transparent;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #333333;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id= "container">
<div id="header">
<div id="header_title"><h1>Jan kardy's Literary Agency</h1></div>
<div id="header_menubar">
</li>
</ul>
<!-- InstanceBeginEditable name="menubar_region" -->
<ul id="MenuBar">
<li> <a href="/index.html">Home</a></li>
<li> <a href="/about_jankardys.html">About Jan Kardys</a></li>
<li> <a href="#">Resources</a>
<ul>
<li> <a href="/Education_connection.html">Education Connection</a></li>
<li> <a href="/submission_guidelines.html">Submission Guidelines</a> </li>
<li> <a href="#">Blogs</a>
<ul>
<li> <a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
<li> <a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Netwroking Blog</a></li>
</ul>
</li>
<li> <a href="#">First Steps to Publishing</a></li>
<li> <a href="#">Library & Publishing Events</a></li>
<li> <a href="#">Art Gallery</a> </li>
</ul>
</li>
<li> <a href="#">Clients</a></li>
<li> <a href="#">Contact Jan Kardys</a> </li>
</ul>
<!-- InstanceEndEditable --><script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 200,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
</li>
</ul>
</div>
</div>
<div id="Page_Content"><!-- InstanceBeginEditable name="Content_main_editable" -->
<div id="Main_content"><img src="/Images/jankardys.jpg" width="171" height="234" alt="Jan_kardys_pictuer" /></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Xtra_content_editable" -->
<div id="xtra_content">
<center><h3>Signed Book Deal</h3>
<p><a href="http://jankardys.com/Advance_Royalties.html" title="Advance_Royalties.html">Advance/Royalties</a></p>
<p><a href="http://jankardys.com/Author_Quotes.html" title="Author_Quotes.html">Author Quotes</a></p>
<p><a href="http://jankardys.com/Book_Deal.html" title="Book_Deal.html">Book Deal</a></p>
<p><a href="http://jankardys.com/Copyright_Information.html" title="Copyright_Information.html">Copyright Information</a></p>
<p><a href="http://jankardys.com/Editorial_Assistance.html" title="Editorial_Assistance.html">Freelance Editorial Assistance</a></p>
<p><a href="http://jankardys.com/Electronic_Rights.html" title="Electronic_Rights.html">Electronic Rights Guidelines</a></p>
<p><a href="http://jankardys.com/Google_Products.html" title="Google_Products.html">Google Products</a></p>
<p><a href="http://jankardys.com/Out_of_Print_Reversions.html" title="Out_of_Print_Reversions.html">Out of Print Reversions</a></p>
<p><a href="http://jankardys.com/Permissions.html" title="Permissions.html">Permissions</a></p>
<p><a href="http://jankardys.com/Photo_release.html" title="Photo_release.html">Photo Release</a></p>
<p><a href="http://jankardys.com/Return_of_Advance.html" title="Return_of_Advance.html">Return of Advance</a></p>
<p><a href="http://jankardys.com/Subrights_Checklist.html" title="Subrights_Checklist.html">Subrights Checklist</a></p></center>
<p> </p>
<p> </p>
</div>
<!-- InstanceEndEditable --></div>
<div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
</div>
</body>
<!-- InstanceEnd --></html> -
Javascript drop-down Spry menu not working
I downloaded the Spry UI 1.7 menu bar from the widget browser and pasted the code into DW CS4. I could not place it as you can in CS5. DW throws up javascript errors, but the styled menu bar works in live view and in the testing environment on Firefox and IE6 (!). However, once I load it, it does not work. It appears as if the browser can't find the javascript or the styles. I've pasted the styles in my main style sheet and in the referenced sheet at: Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css. I've verified that the Spry-UI-1.7 folder is loaded and contains all the relevant files.
Any idea what I'm doing wrong? I've been working on this on and off for two days.
Here is the live page:
http://www.wengerfeeds.com/test/test2.html
Code
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryWidget.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryMenu.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
<script type="text/javascript">
</script>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="nav"> <ul id="MenuBar">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a>
<ul>
<li><a href="history.html">History</a></li>
<li><a href="mission.html">Mission</a></li>
<li><a href="sustainability.html">Sustainability</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="millogram.html">Newsletter</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</li>
<li><a href="products.html">Products</a>
<ul>
<li><a href="feed.html">Feed</a>
<ul>
<li><a href="layers.html">Layer Feed</a></li>
<li><a href="broilers.html">Broiler Feed</a></li>
<li><a href="swine.html">Swine Feed</a></li>
<li><a href="turkey.html">Turkey Feed</a></li>
<li><a href="specialty.html">Specialty Feed</a></li>
</ul>
</li>
<li><a href="soychoice.html">SoyChoiceTM</a></li>
<li><a href="soyoil.html">Soy Oil</a></li>
<li><a href="eggs.html">Eggs</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</li>
<li><a href="services.html">Services</a>
<ul>
<li><a href="eggmarketing.html">Egg Marketing Services</a></li>
<li><a href="flock.html">Flock & Pullet Services</a></li>
<li><a href="lab.html">Laboratory Services</a></li>
<li><a href="hauling.html">Hauling & Warehousing</a></li>
<li><a href="booking.html">Purchasing & Booking</a></li>
<li><a href="http://www.wengerfeeds.wordpress.com">Knowledge Center</a></li>
<li><a href="grain.html">Grain Receiving</a></li>
</ul>
</li>
<li><a href="http://www.wengerfeeds.info">Markets</a></li>
<li><a href="opps.html">Opportunities</a>
<ul>
<li><a href="careers.html">Career</a></li>
<li><a href="contracts.html">Contracts</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarRightShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
</script></div>Thanks, Gary. Thanks for the reply. I appreciate it.
It felt like it wasn't finding the js, but I didn't know why. It turns out my host didn't like the folder name. When you download the folder for the Spry 2.0 menu from the widget browser, all your js and css is stored in a folder named "Spry-UI-1.7." The menu worked locally, but once I loaded it, my server didn't like the folder name. I renamed the folder "Spry" and reset the paths, and it worked. I'm posting this here in case anyone else has this problem. Cheers -
Make changes to a spry menu bar
I have used a spry menu bar 2.0 widget with the adobe widget browser by David Powers in my web site, and its working really well but now I have found I need a new sub menu, off an existing sub menu, I have read the instructions to try and put it in, done what it said I type the name in then and done the out dent, but when I try to do the link it wont work, I type the link in the link box in properties and as soon as I move my curser away the text disappears. Can any one help please.
The following is what the markup for your menubar will look like if you want to do as you say
<ul id="MenuBar">
<li> <a href="index.html">Home</a></li>
<li> <a href="commercial-contract_carpet_and_flooring.html">Commercial</a></li>
<li> <a href="residential-domestic_carpet_and_flooring.html">Residential</a></li>
<li><a href="information.html">Information</a>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="photo_slideshows/picture_gallery.html">Products</a>
<ul>
<li><a href="Products_1.html">Products 1</a></li>
<li><a href="Products_1.html">Products 2</a></li>
</ul>
</li>
<li><a href="tips_and_tricks.html">Tips_and_Tricks</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
</ul>
</li>
<li><a href="inspections.html">Inspections</a></li>
</ul>
Gramps -
Spry Menu bar 2.0 from Widget Browser only works in Firefox, not other browsers
Hello,
I have downloaded and customized the Spry Menu Bar 2.0 from Adobe Widget Browser.
I have made a seemingly functionable horizonatl navigation bar that will be displayed on all of my website's pages.
While in live view in Dreamweaver and when I preview the page in FireFox the entire navigation bar works and displays perfectly.
However, when I preview the page in another browser, like Safari, the navation does not display and shows up as an ordered list. I have tried a couple of fixes with no success. I have also spent some time searching the forums for an asnwer, but more commonly I find that people have problems with the spry menu functioning in Firefox while I have the exact opposite problem.
Please help! I'm to have this website completed by the end of next week!
Thank you!!Hi John,
Thanks, however, my site is still only on my local computer and not live or on a testing server yet. I could copy and paste my code in, I thought that may be cumbersome, but here goes :
<!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>Pennsylvania Academy of Music, Welcome</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="NavigationDec2.html" rel="stylesheet" type="text/css" />
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<title>Spry Menu Bar - Basic : December 2</title>
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryMenu.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPl ugin.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPl ugin.js'></script>
<style type="text/css">
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#f9e440;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 14px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:12px;
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 ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 750px;
.MenuBarFixedCentered {
float: none;
width: 750px;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 4px 6px 4px 4px;
background-color:#f9e440;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#003366;
background-color:#f9e440;
width:82px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 8px;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
font-size: 13px;
font-style: normal;
background-color:#c82f6a;
padding:2px 2px 2px 2px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#c82f6a;
color:#000000;
padding: 6px 10px 6px 5px;
width: 25em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #ffff99;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #ffff99; /* consider exposing this prop separately*/
color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #ffff99;
color: #000000;
#MenuBar .SubMenu .MenuItemHover {
background-color: #cc99ff;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #FFFDB8;
color: #333366;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #c82f6a;
min-width:100px; /* 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;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:10px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #c82f6a;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #ffff99; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #cc99ff; /* consider exposing this prop separately*/
color: #333366;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -2px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
<style type="text/css">
</style>
</head>
<body class="oneColFixCtr">
<div id="container">
<div id="Header"> </div>
<div id="mainContent">
<div id="Nav"><ul id="MenuBar">
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About Us</a>
<ul>
<li> <a href="history.html">History and Mission</a> </li>
<li> <a href="admin.html">Administration</a>
<li> <a href="faculty.html">Faculty</a>
<li> <a href="artists-in-residence.html">Artists in Residence</a> </li>
</ul>
</li>
<li> <a href="#">Programs</a>
<ul>
<li> <a href="lessons.html">Lessons</a> </li>
<li> <a href="classes.html">Classes</a>
<li> <a href="ensembles.html">Ensembles</a>
<li> <a href="adultprograms.html">Adult Programs</a> </li>
</ul>
</li>
<li> <a href="#">Departments</a>
<ul>
<li> <a href="choir.html">Choir</a> </li>
<li> <a href="ealrydevelopment.html">Early Development</a> </li>
<li> <a href="guitar.html">Guitar</a> </li>
<li> <a href="jazz.html">Jazz</a></li>
<li> <a href="piano.html">Piano</a></li>
<li> <a href="strings.html">Strings</a></li>
<li> <a href="theory.html">Theory and Composition</a></li>
<li> <a href="voice.html">Voice</a></li>
<li> <a href="windsandpercussions.html">Winds and Percussion</a></li></ul></li>
<li> <a href="admissions.html">Admissions</a> </li>
<li> <a href="#">Events</a>
<ul>
<li> <a href="concertseries.html">Concert Series</a> </li>
<li> <a href="studentevents.html">Student Events</a>
<li> <a href="festivals.html">Festivals</a>
</ul></li>
<li> <a href="community.html">Community</a> </li>
<li> <a href="#">Support</a>
<ul>
<li> <a href="donate.html">Donate</a> </li>
<li> <a href="volunteer.html">Volunteer</a>
</li></ul></li>
<li> <a href="contact.html">Contact Us</a> </li>
</li>
</ul>
</li>
</ul></div>
<div id="connect"> <div id="connectbox">
<img src="emailus.jpg" width="55" height="52" alt="Email Us" /><p>
<img src="apply.jpg" width="55" height="52" alt="Apply" /><p>
<img src="newsletter.jpg" width="55" height="52" alt="Newsletter" /><p>
<img src="Facebook.jpg" width="52" height="53" alt="Facebook" /><p>
<img src="Twitter.jpg" width="55" height="55" alt="Twitter" /><p>
<p></div>
</div>
<div id="pageheader"><img src="adultprograms.gif" width="800" height="61" alt="adult programs" /></div>
<div id="MainCopy"> <div id="copywide">General Copy about Adult Programs
<div id="classbox"><img src="earlymusicensemblece.gif" width="770" height="42" />
<p>
Directed by Rainer Beckmann, the Pennsylvania Academy of Music's Early Music Program provides opportunities for students to learn more about historical performance practice. The program's current activities focus on the school's Early Music Ensemble, made up of enthusiastic amateur musicians performing on recorders and violas da gamba. The recent donation of a two-manual harpsichord will allow the program to include special Baroque ensemble lessons in the near future. In addition, individual Academy students will have the possibility to be accompanied on an instrument regularly used in music of the 17th and 18th centuries. The class meets 1 hour per week.
</div>
<div id="smallclassbox"><img src="grouppiano.gif" width="770" height="42" />
<p>
Learn to play the piano in a group setting of 4-6 students. Classes are offered for all beginner piano students. Our qualified teachers will teach you to read notes and make music with your family and peers!</div>
<div id="smallclassbox"> <img src="amateurchamber.gif" width="770" height="42" />
<p>
This course is designed for the adult amateur who would like to play his/her instrument in a chamber music setting with other amateurs of the same level. Groups meet once a week for a one-hour coaching and prepare a work to be performed at the end of the semester. Coachings address both individual needs and techniques of collaborative playing.
</div>
<div id="largeclassbox"><img src="rockandroll.gif" width="770" height="42" />
This course traces the American popular music from the work songs of enslaved Africans through the Beatles. The course focuses on the history, theory, and sociological implications of gospel, blues, bluegrass, rhythm and blues, rock and roll, and psychedelic rock. Class will include lecture, discussion, and demonstration. Students will give presentations on popular styles of the 1980s, 1990s, and beyond.
Course Objectives:
In this course, students will:<br/>
1. Understand the development of various styles/genres of popular music.
2. Understand the connectivity of the cultural, political and social, with the musical.<br/>
3. Become familiar with music terminology in order to discuss music with insight and authority.<br/>
4. Develop keen listening skills enabling them to discern such elements as instrumentation, stylistic characteristics, and beats/grooves.<br/>
5. Gain insight into the recording industry and its effects on American culture.
</div>
</div>
</div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
</script>
</body>
</html> -
Spry menu updating through template
I've created a number of pages based on templates that I designed. The templates use a horizontal spry menu. Now I want to hook everything up. But when I update the spry menu in the template it has no affect on the template based pages. When I save the template with the changes, I get the dialog box asking me if I want to update all the pages based on the template. So I say yeah update all of the selected files. But it doesn't update them. What am I missing? I had some issues removing the mark of the web code from the template. I got a message saying that changes to the template would no longer appear on child pages (or something similar). Could this be my problem?
Beth,
Thanks for asking. I have a couple of display issues that deal with spry data sets and a flash photo gallery, but those I can't resolve until I actually publish the site and can verify that the problem exists when viewed live. That way I can also link to the problem so others can see the issue. Those are display issues. The other issue is also a display issue, but it's one that I need to solve before I can publish my site.
I have started a discussion on this problem in the Dreamweaver forum, but since I still have the issue, I hope it's okay if I post here as well. The issue deals with a horizontal spry menu.
I have a page that displays a youtube video. It sits under the horizontal menu. When you try to select something from the drop down menu, the menu appears behind the youtube video (the links are hidden) and can't be selected. Someone on the Dreamweaver site checked out the link I provided and said that they didn't have any problems using Firefox. But I still can't see the menu with IE8 or Safari. Here's the link:
http://www.emiliocorsetti.com/publish/boot.html
That same person on the Dreamweaver forum suggested that I put the video in a div and give it a z-index. I tried that, but I'm really not sure what value to enter. The menubar has several z-index values ranging from 1000 to 1020. So I've tried the following values 900, 980, 990, 1030, 1040. No luck.
Emilio
Maybe you are looking for
-
"Field Catalog not found" ...problem in ALV reporting !!
Hi, When i execute my report program where in I generate a Selection screen, I am able to select the values in the selection screen. Once I click on the execute button I get the message "Field Catalog not found"... The elabore message is "Field Catal
-
Hiding a column when displaying an alv
Hi Gurus, Shortly I have these things : 1) A node with some attributes like customer_no, customer_name, status etc. 2) A view which contains an element(viewcontainerelement) and this displays the node. This node is in CONTEXT of my view and in compon
-
I forgot my passcode and I dont want to restore it because I have no back up. Help?
Hello, I recently changed my passcode and i instantly forgot it as i tried to unlock my iphone. And I honestly dont want to restore it, because I will lose everything, especially my 3,000 photos and I cant risk that. I havent used my iphone for days,
-
Can i go to Apple Genius without making a Appointment
They gived me a faulty new iPod Touch because my old one didn't work. Can i just go to Apple Genius without making a appointment?
-
Hi, How do I replace a string and decode into a grouping? I have something like this: Select distinct id,decode(SUBSTR(id,1,1),'A','A-D','B','B-D'...from Table I want the distinct id for a string called "T to be replaced with XXX and decoded into the