Spry Disappearing?
Working with Firefox. I have a login routine that uses Spry
liberally, lots of other things depend on it.
Now the Spry object seems to be disappearing! I'll be running
the app, then for apparently no reason, I get this error:
Error: Spry is not defined
Source File:
http://mydomain/SpryAssets/SpryData.js
from Firefox. And nothing works after that.
Any ideas? Anyone ever encounter something like this
before?
Wow. I figured it out.
I had some Spry code in an iFrame. To save memory, I built
some Spry Datasets that were shared across the frames, meaning that
in the iFrame, I had:
g_dsAssetList = parent.G_dsAssetList;
and the G_dsAssetList in the primary window was a standard
XML Dataset call.
The thing blew when I changed the file in the iFrame. It
didn't occur to me that it would affect the DS in the parent frame,
but it did.
So I ended up duplicating the XML Dataset construction code
in the iFrame src file and it works!
Similar Messages
-
Spry Menu Bar disappears absolute position
Hello all this is my first time posting on this site so bear with me. I have a semi-transperant spry menu bar that i inserted into the header div, over an image. I moved the menu bar -38px, when the position is set to relative the menu bar is visible, however the old position of the menu bar has a blank white space there. I think this is due to the relative position property. When i change it to absolute the whole menu bar disappears? http://www.brightlikethesun.com/index2.html (the position is back to relative to show the menu bar and also background for header is blue to show the space)
CSS
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
width: 100%;
margin: auto;
position: relative;
top: -38px;
font-family: "Lucida Console", Monaco, monospace;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
margin-right: auto;
margin-left: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 20%;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 70%;
z-index: 1020;
cursor: default;
width: 50em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 50em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #C0C0C0;
text-decoration: none;
background: rgba(98, 135, 167, .4)
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top, #45484d 0%, #000000 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45484d 0%,#000000 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45484d 0%,#000000 50%); /* IE10+ */
background: linear-gradient(to bottom, #45484d 0%,#000000 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 50%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
html
<!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>Bright Like The Sun -- San Antonio, TX</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
margin: 0;
padding: 0;
color: #000;
background-image: url(background.jpg);
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 5px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
font-family: Tahoma, Geneva, sans-serif;
color: #000;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color:#06C
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 0px;
background: #f1da36; /* Old browsers */
background: -moz-linear-gradient(left, #f1da36 0%, #fefcea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1da36), color-stop(100%,#fefcea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* IE10+ */
background: linear-gradient(to right, #f1da36 0%,#fefcea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#fefcea',GradientType=1 ); /* IE6-9 */
.content {
padding: 0px 0;
width: 80%;
float: left;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #000000;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
font-family: "Comic Sans MS", cursive;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#menurules {
margin: 0px;
padding: 0px;
-->
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="BLTS1.jpg" alt="BLTS" name="BLTS" width="100%" height="100%" id="BLTS" style="display: block;" /></a>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#"><center>Home</center></a></li>
<li><a href="#"><center>Shows</center></a>
<ul>
<li><a href="#"><u>Upcoming shows</u><br />
<br />
May 4th 2013 @<img src="502.jpg" width="5%" height="5%"><br />
Bright Like The Sun along with Little Science<br />
8pm 21+
</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"><center>Merch</center></a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#"><u>Album</u><br /><img src="coda fin cover.jpg" width="15%" height="15%"><font size="4">Coda Fin</font><br />
Purchase Here or Itunes</a>
</li>
<li><a href="#">Shirts--Coming Soon!</a></li>
<li><a href="#">Various--Coming Soon!</a></li>
</ul>
</li>
<li><a href="#"><center>Bio</center></a></li>
<li><a href="#"><center>Contact</center></a></li>
</ul><!-- end .header --></div>
<div class="sidebar1">
<p></p>
<br />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="content"><p align="right"><a href="https://www.facebook.com/brightlikethesun"><img src="FB.jpg" width="30" height="31" alt="Facebook" /></a><img src="twitter-icon.png" width="30" height="31" /></p>
<p align="left"><img src="weare.jpg" width="185" height="72" /></p><p align="right"><iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=adznldvg&t=1366488970" width="340" height="54" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe></p>
<p><img src="BLTS2.jpg" alt="BLTS" width="411" height="297" align="left" /><img src="BLTS font.jpg" width="340" /> is a Post-Rock band from San Antonio. They were born in early 2012 from the collective desire to make beautiful, thought provoking, and at times, chaotic music. Much like fellow Texan bands like Explosions in the Sky and This Will Destroy You, they are entirely instrumental, and known for creating progressively intricate waves of ambiance that grow with intensity and an unabashed wash of emotion. Attuned to their affinity for dynamics, seeing them live takes the listener from deafening walls of orchestrated sound, to melodies so subtle that one finds themselves acutely aware of their own breathing. <br />
Bright Like The Sun’s debut album, Coda Fin, was engineered/mixed by Alex Bhore (of This Will Destroy You), and mastered by TW Walsh (of Pedro The Lion). The record, which was self released, was made available on April 12, 2013.<br /><br /><img src="BLTS3.jpg" width="330" height="245" align="right" /></p>
<br />
<br />
<h4>Bright Like The Sun Consists of:</h4>
<p>Rob Mochen - Guitar <br />
Chris Etheredge - Guitar/Keys <br />
Christian Miranda - Bass <br />
Steven Barrera - Drums </p>
<p><br />
</p>
<h4><u>Coda Fin</u> Release Date April 12th 2013 </h4>
<h4><img src="coda fin cover.jpg" width="250" height="238" align="left" /><img src="venues.jpg" width="171" height="65" align="right" /><br />
<br />
<br />
<br />
<a href="http://502bar.com/"><img src="502.jpg" width="150" height="112" align="right" /></a><a href="http://www.gypsyloungeaustin.com"><img src="gypsylounge.jpg" / width="150" height="112" align="right"></a></h4>
<p align="right"> </p>
</div>
<div class="footer">
<p><font face="verdana" font size="2" font color="#FFFFFF">©2013 Bright Like The Sun All Rights Reserved</font></p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>What I see:
You need a width on the ul.MenuBarVertical style. Make it the same width as the ul.MenuBarVertical li selector.
Remove the float: none; from this style:
ul.MenuBarVertical ul li
width: 12em;
float: none;
No such measurement as a half a pixel:
ul.MenuBarVertical ul
border: .5px solid #CCC;
If you want a border, 1px is minimum...you repeat this incorrect half-pixel in several places.
Running your page through the W3C Validator returned this: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.healthydirections.ca%2F&charset=%28dete ct+automatically%29&doctype=Inline&group=0
Your initial errors are not declaring a DOCTYPE, which among other things, does not provide the browser with any information regarding how you want the code interpreted for your viewer. Some browsers guess well, some do not (IE).
This
<html>
is insufficient.
Apply this in its place, and run through the validator again.
<!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">
Beth -
Spry menu error in EI Disappearing List Background Bug
I wanted to be able to update the menu once so I made the menu as a library item. At first the menu kept dissapearing in EI, somehow I fixed it so it actually does show up properly now but Dreamweaver is still showing the error " Disappearing List Background Bug in EI" all in the opening of the <ul> . And now I have also noticed that there is an issue with the first menu, when rolling over the "company tab" it drops down the sub-menu and let you click on "about" it goes to the page but from there when you roll over the menu's they dont change color and they dont show the sub-menu. This work fine if I go to any other menu on that bar exept for the first one. I dont know what to do, and apreciate any help!
Here is website:
http://phantazia.ca/
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
background-color: #424242;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 20;
cursor: default;
width: 13em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 13em;
background-color: #424242;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #666;
border-bottom-color: #666;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* 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: #424242;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #0689C4;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* 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-color: #424242;The reason the menu does not work in the about page is because there is no link to SpryMenuBar.js on the page.
The following shows the first few lines of your document for index.html
<!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>
<link rel= href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>B SHARP SYSTEMS | Company</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
and the following for about.html
<!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>
<link rel= href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>B SHARP SYSTEMS | Provider of highly scalable technology solutions located in California, USA</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url();
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #e9e7e8;
-->
</style>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
-->
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
Gramps -
Spry validation disappears - leaves widget code
I have added the spry validation to my form fields many
times. This particular form, I have had to add them twice already
and now I got an error that says the javascript for widgets that
are missing are still on the page. I see the widget javascript at
the bottom of my page in code view. I also see other changes I made
to the form fields at the same time that I added the spry
validation. So I am not imagining that I already did this.
What could have happened to make the validation disappear?
has this every happened to any of you?Hi Daniel,
Im having the same problem, can you please tell me what you did? I understand you found the problem?
Thank you! -
Spry submenus disappear on hover with jquery in IE6 only
Help: I thought I had everything working perfectly until trying this site in IE6:
www.fstflorian.com/biolabs.html
Things work perfectly in firefox 3, 3.5, IE7, google chrome, and IE8. IE6 causes the menu to disappear on rollover. I've worked on this for probably 10 hours since discovering the problem, adjusting z-index, etc etc to no avail, so I thought I would ask the experts. The problem does not exist when jquery / supersized is not running. I also discovered that changing from absolute positioning in the standard spry IE hack area begins to change whether/not the submenus disappear but the menu arrangement turns into a huge mess.
I know my syntax isn't perfect... just trying to make things fully operational (site has gone live at least in limited function to meet deadline). Later I will look for help on cleaning things up a bit.
Thank you!Moderators: Could you please remove this; it looks like I posted in the right place afterall. I don't see a way to delete.
Duplicate post is located here: http://forums.adobe.com/thread/516522?tstart=0
Very sorry for this. -
Disappearing Vertical Spry menu buttons in IE
I have some experience with web developement, but this is my first attempt at Spry menus. I have a horizontal menu that is working great, but the vertical menu doesn't work correctly in IE (I'm using IE8). It works just fine in Firefox. When I mouse over a button, all the other buttons disappear, and then most of the buttons don't appear again even when I move the mouse off of the menu.
Here's the temporary URL to the page in question: http://web.mst.edu/~cdcgg3/AAVG/template_USLI.html (Note: this is just the preliminary layout, none of the links go anywhere yet.)
Any ideas? Like I said, I'm new to Spry so any help would be greatly appreciated. Thanks!
~cluelessI think you may have an issue with height:auto in IE
Have a look at this tutorial by David Powers http://foundationphp.com/tutorials/sprymenu/customize1.php -
Absolutely Positioned Spry Elements Disappearing in Firefox
Building a sliding spry element that creates the effect of a tab expanding upwards. Renders perfect in both Safari and Opera9, however in firefox the heading tag and subsequent <a> that controls the effect are visible only for a brief second and the page loads then disappear from view all together.
I turned off css styles in FF and was surprised to find that the 3 spry elements function 100% correctly. This is indicating to me that it is a css error. I remember another time I was trying to use image replacement via display:none and AP html tags where the links became unclickable though still visible.
here is a link to the page:
http://internal.shamanism.com/danceofthedeer/test/default.cfm
rather than post a long list of css styles and html code, ive just attached them to this thread.
I've searched around for a similar issue, but without knowing what is exactly causing this problem its hard to find relevant results.
Any help would be greatly appreciated.
Thanks.ccwd wrote:
> I used Dreamweavers to create a web site with a
horizontal spry menu. The site
> was working fine and still is in Firefox, but in IE the
menu text disappears
> when browsing to some of the page (the text is visible
on roll-over, however).
> I have very limited experience with coding.
For anyone to track down your problem you'll have to post a
link to a live page that exhibits this issue and give detailed
instructions as to how to recreate it. Please include the version
of IE (and platform in case that may make a difference)that is
having this issue.
Also, Spry questions are generally better asked in the Spry
forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
Spry menu bar submenu disappears when cursor changes
Hello.
I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
Can anyone tell me how to prevent that from happening?LICAP Webmaster wrote:
Can anyone tell me how to prevent that from happening?
Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
If you put your test page and all dependent files online, and post a link here, we will gladly check that:
Your server is working
That all required HTML code is correct
That your folder hierarchy is correct
That all required dependent files (HTML, CSS, JS, Images etc.) are uploaded to proper folders
That Javascript Versions are correct
That link paths are all correct and case sensitive
Sounds like your submenus may be positioned with a small gap from your top-level links -
Spry Submenus Don't Disappear On Click
I am trying to use Spry menus, but the submenus do not
disappear on click. When a user selects a submenu item, the submenu
stays open even after the user has made a selection. The user has
to move the mouse away from the drop down menu in order for it to
disappear. This is clumsy.
What can I do to get around this? Any ideas?If it was designed that way, I think it is a design flaw.
Once you click a selection on a submenu, you are done using
the submenu, and it should go away. That is how most desktop
software is designed.
I'm using items on the menu as links to another page that
appear in a DIV. The problem is, the submenu covers the top part of
the DIV, and the user cannot see if it worked or not.
How can we tell the Spry developers that submenus should
disappear on click to make them more user-friendly? -
Spry Drop down menu disappearing behind flash mov
Hi Can someone help? I have a spry drop down menu that appears fine in IE but in firefox it disappears behind my flash movie! it appears fine if there is just a image. Any ideas?
This is the wrong part of the forum for this type of problem, and it may be better if you post this type of question (or most questions), to the dreamweaver section.
That said check your position: absolute: statments in your css, as this is often the cause.
PZ -
Spry URL Utilities - Repeat is disappearing
I've got a Master/Detail region that is being updated by click events in a Spry repeat. Everything works fine. I've even got the URL Params working.
The only problem is that when I include parameters in the URL the other rows in my repeat region disappear. Only the active row is visible in my repeat div.
Here's my code:
Working with no URL params: http://equationaudio.webfactional.com/mics/mtd-products.php
With URL params, its broken: http://equationaudio.webfactional.com/mics/mtd-products.php?object=dmi101
Thanks in advance for the help!The right hand buttons should change the detail region's text and main image. If it is in its own dataset, how will that work?
I really don't want the URL Paramater to "filter" the data on the page. I really just want it to set the current row. I've tried replacing setxpath with setCurrentRow but it doesn't work.
I noticed in the URL Params tutorial page that you can set the current row with URL params if you use the row's number (for example: myurl.com/page.php?row=3 )
Should there be a way to get the functionality using a name instead of a row number?
Thanks,
Stanton
Here's my code:
HEADER:
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("mic-tools-drummers.xml", "products/object");
//Get the URL parameter for the row number
var params = Spry.Utils.getLocationParamsAsObject();
//Set an observer so that when the data is loaded, we update the current row to the url param value
if (params.object){
ds1.setXPath("products/object[filename = '"+params.object+"']");
ds1.loadData();
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
function MM_effectBlind(targetElement, duration, from, to, toggle)
Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
</script>
BODY
<div class="index_content">
<div class="index_slide" spry:detailregion="ds1">
<p><img src="../images/product_img/alpha_drum_mics/large/{filename}.jpg" width="333" height="453" class="product_main_img transparent_class" onload="MM_effectAppearFade(this, 300, 0, 100, false)" /> <span class="title_medium">{title}</span><br />
{desc}
</p>
<p> </p>
<p><span class="color_green"><img src="../images/wave.jpg" width="78" height="12" />Download Tech Specs For {title}</span><br />
</p>
</div>
<div class="right_col_nobg" spry:region="ds1">
<div class="thumb_product_wrap hand_cursor" spry:repeat="ds1" spry:hover="thumb_product_wrap_bg hand_cursor" spry:setrow="ds1">
<img src="../images/product_img/alpha_drum_mics/small/{filename}.jpg" width="65" height="88" class="thumb_wrap" /><span class="thumb_title">{title}</span><br />{snippet}
</div> -
Disappearing horizontal spry menu in IE.
Hi,
I dont usually have any issues with spry menu, but this time the website was going to have lots of pages, and i wanted to be able to update the menu once so I made the menu as a library item. It looks good but in IE it shows bugs.
The whole menu showing up white in IE and only when you roll over it does it show the particular menu selection. Then I found a form on here that told me to change the position to "relative" now I have a new issue where the whole menu including the sub menu's has pushed all the content down and there is a big space and in the browser comparability it shows me its a "z-index bug". I have tried fixing it but it just does not want to work. Can anyone help, please.
Here is the website http://www.thesimplethings.ca
here is the spry menu code:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
width: auto;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 20;
cursor: default;
width: 13em;
position: relative;
left: -1000em;
background-color: #424242;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 13em;
background-color: #0689C4;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #666;
border-bottom-color: #666;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* 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: #0689C4;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #0689C4;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;I have noticed that you have removed the above. There is still a problem in IE6 in that the background colour remains white.
To solve this, remove the red parts and add the green parts
ul.MenuBarHorizontal {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
background-color: #424242;
ul.MenuBarHorizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 13em;
position: absolute;
left: -1000em;
ul.MenuBarHorizontal ul li {
width: 13em;
background-color: #424242;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
color: #FFF;
ul.MenuBarHorizontal a {
display: block;
cursor: pointer;
background-color: #424242;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
ul.MenuBarHorizontal iframe {
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
Gramps -
I see my spry accordian images in the live view but they disappear in the browser view
Here is my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
margin-left: 1in;
margin-top: .5in;
background-color: #FFFFFF;
margin-bottom: .5in;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 1024px;
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
height: 768px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #ADB96E;
background-image: url(images/KADhomepage2_01.jpg);
height: 91px;
width: 1024px;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
background-image: url(images/KADprintport1_02.jpg);
height: 535px;
width: 1024px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
/* ~~ The footer ~~ */
.footer {
background-color: #CCC49F;
background-image: url(images/KADhomepage2_03.jpg);
height: 103px;
width: 1024px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1 {
position:absolute;
width:644px;
height:43px;
z-index:1;
left: 4.7in;
top: 81px;
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv2 {
position:absolute;
width:672px;
height:553px;
z-index:2;
left: -162px;
top: 43px;
overflow: scroll;
#apDiv3 {
position:absolute;
width:729px;
height:551px;
z-index:1;
left: -170px;
top: 84px;
overflow: scroll;
#apDiv4 {
position:absolute;
width:680px;
height:520px;
z-index:2;
left: 446px;
top: 172px;
</style>
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="apDiv1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</strong></a> </li>
<li><a href="KADresume.html">RESUME</strong></a></li>
<li><a href="KADport.html"><strong>PORTFOLIO</strong></a></li>
<li><a href="KADprocess.html">PROCESS</a> </li>
<li><a href="KADcontact.html">CONTACT</strong></strong></a></li>
</ul>
</div>
<div class="container">
<div class="header"><!-- end .header --></div>
<div class="content">
<div id="apDiv4">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Print</div>
<div class="AccordionPanelContent">
<table width="669" height="441" border="0" cellpadding="5" cellspacing="5">
<tr>
<th width="146" height="158" align="center" scope="col"><a href="/images/Large/_5515061140.jpg" target="_blank"><img src="/images/Thumb/_5515061140.jpg" width="107" height="129" /></a></th>
<th width="158" align="center" scope="col"><a href="/images/Large/_6374589227.jpg" target="_blank"><img src="/images/Thumb/_6374589227.jpg" width="129" height="129" /></a></th>
<th width="145" align="center" scope="col"><a href="/images/Large/_4734055001.jpg" target="_blank"><img src="/images/Thumb/_4734055001.jpg" width="129" height="101" /></a></th>
<th width="145" align="center" scope="col"><a href="/images/Large/_7292231722.jpg" target="_blank"><img src="/images/Thumb/_7292231722.jpg" width="129" height="103" /></a></th>
</tr>
<tr>
<td height="145" align="center"><a href="/images/Large/_5593210516.jpg" target="_blank"><img src="/images/Thumb/_5593210516.jpg" width="129" height="99" /></a></td>
<td align="center"><a href="/images/Large/_1467227833.jpg" target="_blank"><img src="/images/Thumb/_1467227833.jpg" width="129" height="103" /></a></td>
<td align="center"><a href="/images/Large/_6554868794.jpg" target="_blank"><img src="/images/Thumb/_6554868794.jpg" width="129" height="99" /></a></td>
<td align="center"><a href="/images/Large/_1252352166.jpg" target="_blank"><img src="/images/Thumb/_1252352166.jpg" width="129" height="79" /></a></td>
</tr>
<tr>
<td align="center"><a href="/images/Large/_1771736232.jpg" target="_blank"><img src="/images/Thumb/_1771736232.jpg" width="129" height="91" /></a></td>
<td align="center"><a href="/images/Large/_1396958091.jpg" target="_blank"><img src="/images/Thumb/_1396958091.jpg" width="129" height="99" /></a></td>
<td align="center"><a href="/images/Large/_6955454525.jpg" target="_blank"><img src="/images/Thumb/_6955454525.jpg" width="129" height="99" /></a></td>
<td align="center"><a href="/images/Large/_9231445618.jpg" target="_blank"><img src="/images/Thumb/_9231445618.jpg" width="86" height="129" /></a></td>
</tr>
<tr>
<td align="center"><a href="/images/Large/_2121752674.jpg" target="_blank"><img src="/images/Thumb/_2121752674.jpg" width="99" height="129" /></a></td>
<td align="center"><a href="/images/Large/_2493972603.jpg" target="_blank"><img src="/images/Thumb/_2493972603.jpg" width="129" height="83" /></a></td>
<td align="center"><a href="/images/Large/_6370868564.jpg" target="_blank"><img src="/images/Thumb/_6370868564.jpg" width="129" height="83" /></a></td>
<td align="center"><a href="/images/Large/_9581180847.jpg" target="_blank"><img src="/images/Thumb/_9581180847.jpg" width="129" height="99" /></a></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Web</div>
<div class="AccordionPanelContent">
<table width="345" height="170" border="0" cellpadding="5" cellspacing="5">
<tr>
<th width="146" scope="col"><a href="/images/Large/_0373638936.jpg" target="_blank"><img src="/images/Thumb/_0373638936.jpg" width="129" height="96" /></a></th>
<th width="158" scope="col"><a href="/images/Large/_3824118655.jpg" target="_blank"><img src="/images/Thumb/_3824118655.jpg" width="129" height="87" /></a></th>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Logo</div>
<div class="AccordionPanelContent">
<table width="350" border="0" cellspacing="5" cellpadding="5">
<tr>
<th width="146" scope="col"><a href="/images/Large/_0301530214.jpg" target="_blank"><img src="/images/Thumb/_0301530214.jpg" width="99" height="129" /></a></th>
<th width="152" scope="col"><a href="/images/Large/_0990478412.jpg" target="_blank"><img src="/images/Thumb/_0990478412.jpg" width="129" height="129" /></a></th>
</tr>
</table>
</div>
</div>
</div>
</div>
<h1> </h1>
</div>
<div class="footer"> <!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>Don't know if this helps but I also ran a validation report and this is what I got:
Validator Results
Report date: April 22 2012
Report time: 06:30:33
Severity
File
Description
Line
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "type" not specified
127
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "type" not specified
128
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
there is no attribute "tabindex"
147
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
there is no attribute "height"
151
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
153
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
154
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
155
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
156
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
159
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
160
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
162
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
163
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
166
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
167
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
168
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
169
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
172
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
173
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
174
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
175
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
185
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
186
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
196
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
required attribute "alt" not specified
197
Error
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
document type does not allow element "link" here
213
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
153
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
153
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "&" is the first character of a delimiter but occurred as data
153
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
153
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
153
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
154
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
154
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "&" is the first character of a delimiter but occurred as data
154
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
154
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
154
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
155
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
155
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
155
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
155
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
156
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
156
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
156
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
156
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
159
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
159
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "&" is the first character of a delimiter but occurred as data
159
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
159
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
159
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
160
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
160
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "&" is the first character of a delimiter but occurred as data
160
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
160
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
160
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
161
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
161
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
161
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
161
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
163
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
163
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
163
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
163
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
166
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
166
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
166
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
166
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
167
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
167
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
167
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
167
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
168
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
168
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
168
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
168
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
169
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
169
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
169
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
169
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
172
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
172
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
172
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
172
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
173
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
173
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "&" is the first character of a delimiter but occurred as data
173
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
173
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
173
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
174
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
174
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "&" is the first character of a delimiter but occurred as data
174
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
174
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
174
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
175
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
175
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "&" is the first character of a delimiter but occurred as data
175
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
175
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
175
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
185
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the first character of a delimiter but occurred as data
185
Warning
C:\Users\Sylvester Aleong\Pictures\KADweb\KAD\KADport1.html
character "<" is the f -
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. -
Spry Menu bar interactivity page disappears
Hi,
I am using Dreamweaver trail CS3 for Mac. I am creating web
pages using frames and tables. When I insert a Spry Widget Menu Bar
Widget the "Spry Menu Bare: Menubar1" interactive page does not
appear, so I can add or change names of Main Items and Sub-items
along with linking. Why is it doing this?Hi, I am using a "Top and nested left Frames" The Left frame
I am using to display navigation menu. I insert
"menubarvertical#menubar1". The menu that allows to edit lables,
links and etc. does not come up. Do I need to edit through code?
Here is the code page for the left frame.
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"><style type="text/css">
<!--
body {
background-image: url(NewFiles/background-2.gif);
margin-left: .5in;
-->
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />
<table width="123" height="48" border="0">
<tr>
<td><img src="NewFiles/Photobut-normal.jpg"
width="107" height="22"></td>
</tr>
</table>
<p> </p>
<p> </p>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Item
1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item
3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item
3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
Thanks,
Becky
Maybe you are looking for
-
Best external back-up drive for MacBook Pro
I ordered a WD 2 TB My Passport external drive from Staples. In the meantime one of you answered this question with the problems they are having with their software if using Maverick OX. I am thinking of purchasing the LA Cie 2TB USB 3 Porsche Design
-
Schema not available as a Parsing Schema
Hello, I have apex running on an existing Oracle instance pointing to a specific schema. I created a new schema in this same instance and I want to repoint my apex app to this schema. The schema is not available under Edit Application Properties -> S
-
Where is RAM located HP 15 r263dx
hi. I would like to know where the RAM located HP 15 r263dx? is it under the keyboard?( if it does how I get to it?)My laptop now has 4GB Ram. I want upgrade it to 8GB. Does it have slot for one more 4GB RAM stick? Thank you. This question was solved
-
Can I disable the audio pitch adjustment when using frame rate conversion?
We have a mov file containing digitized film material with audio scanned at 25 fps (1 frame film for 1 frame video) while the film should be 18 fps. So both video and audio are too fast. Compressor provides the framerate conversion so source plays at
-
Calendar ap opens briefly and then closes?
The calendar ap opens briefly and then immediately closes, not allowing me to access any information. Any thoughts on how to fix? I've tried the various reboot options with no success.