Spry HorizontalMenu sticking in FireFox
Visited links remain highlighted – including submenus. No problems in IE. Page can be viewed at http://mtolivechurch1.org/tsc/tsc_index.html (not released to public until I can fix this).
I have tried a:focus outline:none but that didn’t help. All suggestion welcomed as due date is passed. Spry CSS at: http://mtolivechurch1.org/tsc/SpryAssets/SpryMenuBarHorizontal.css.
It's hard picking through someone else's CSS styles...I guess the best thing to learn is how to make 'shorthand' styles, where instead of declarations like
margin-top: 5px;
margin-right; 10px;
margin-bottom: 8px;
margin-left: 0px;
you use
margin: 5px 10px 8px 0;
(in the order of top, right, bottom, left) A note about shorthand CSS:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7e2da .html
There may be an extension for converting stylesheets, but I don't know what it is.
Remember also that order counts. Don't move styles out of order, just in case they are working correctly now.
I've cleaned up my own act considerably in CSS files...gotten much more systematic, commented a lot so I have a road map when I go back.
If you are working on a live site with this stylesheet, I recommend making a copy and editing it. Just changing it to shorthand will save a lot of lines.
Beth
Similar Messages
-
Spry menu bar in firefox not telescoping main li horizontally
I am having trouble with my spry menu bar in firefox and chrome not telescoping horizontally. In IE8 they tile horizontally but in firefox(3.6.10) and chrome(6.0.472.63) they stay tiled vertically.
Example:
IE8
[menu1][menu2][menu3][menu4][menu5]
FF and Chrome
[menu1]
[menu2]
[menu3]
[menu4]
[menu5]
I do not think that it is the css due to it not telescoping when I view it in live view in dreamweaver cs4. SO I am thinking it is someting in the javascript that is just for IE.
ANy help or a push in the right direction would be great.
here is the 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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 100%;
/* 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: 19.8%;
float: center;
z-index: 100;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
float: none;
/* 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: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
text-align: left;
ul.MenuBarHorizontal a.NoPadding
padding: 0.39em 0.75em;
*//* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-color:transparent;
/* 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:transparent;
color:#2A0000;
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: 100% 50%;
z-index:100;
/* 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%;
z-index:100;
/* 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%;
z-index:100;
/* 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%;
z-index:100;
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;
float: left;
background: #FFF;
z-index:100;
#MenuBar1{
position:relative;
margin-top:-10px;
margin-bottom:0px;
z-index:1010;
***And the javascript***
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Any help would be appreciated
RayUhh no, both issues are still occurring. Please look at the site http://appventurousllc.com in
Firefox and IE and you will see that the issues are still present. -
Spry menu works in Firefox and Safari, but not Internet Explorer
I designed my school website in CS4 and CS5. The left spry menu bar appears correctly in Firefox and Safari, but in Internet Explorer the gray background and buttons do not appear. You can only see the text and when you scroll over the text, it disappears even though when you click on it, the link does appear. The website is http://ml.chinookschools.org. I created the site on a mac and I am hosting it on a mac mini server on my network at school. I am a beginner with Dreamweaver and I'm not sure if someone can help me with this, but I would sure be appreciative for any help offered. Here is the source code for the main template page:
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="wrapper">
<div id="header"><a href="../index.html"><img src="../images/header.jpg" width="950" height="121" /></a>
<div id="apDiv1"><a href="http://chinookschools.org/" target="_blank"><img src="../images/hslink.gif" width="170" height="60" /></a></div>
</div>
<div id="bodyArea">
<div id="left">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="../calendar.html">Calendar</a> </li>
<li><a href="../contactinfo.html">Contact Information</a></li>
<li><a href="../currenthappenings.html" class="MenuBarItemSubmenu">Current Happenings</a>
<ul>
<li><a href="../harwoodhappen.html">Mr. Harwood - K</a></li>
<li><a href="../haslerhappen.html">Ms. Hasler - K</a></li>
<li><a href="../tedwardshappen.html">Mrs. T. Edwards - 1</a></li>
<li><a href="../lewishappen.html">Mrs. Lewis - 1</a></li>
<li><a href="../whitneyhappen.html">Mrs. Whitney - 2</a></li>
<li><a href="../weinheimerhappen.html">Mrs. Weinheimer - 3</a></li>
<li><a href="../cedwardshappen.html">Mrs. C. Edwards - 4</a></li>
<li><a href="../macleodhappen.html">Mrs. MacLeod - 5</a></li>
<li><a href="../mackenziehappen.html">Mrs. MacKenzie - 6</a></li>
<li><a href="../surberhappen.html">Mrs. Surber - Ex. St.</a></li>
</ul>
</li>
<li><a href="../PDFs/gifted.pdf">Gifted & Talented</a></li>
<li><a href="../libraryhappen.html">Library News</a></li>
<li><a href="../pto.html">PTO</a></li>
<li><a href="#" class="MenuBarItemSubmenu">School Information</a>
<ul>
<li><a href="../activities.html">Activities</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Class Schedules</a>
<ul>
<li><a href="../harwood.html">Mr. Harwood - K</a></li>
<li><a href="../hasler.html">Ms. Hasler - K</a></li>
<li><a href="../tedwards.html">Mrs. T. Edwards - 1</a></li>
<li><a href="../Lewis.html">Mrs. Lewis - 1</a></li>
<li><a href="../whitney.html">Mrs. Whitney - 2</a></li>
<li><a href="../weinheimer.html">Mrs. Weinheimer - 3</a></li>
<li><a href="../cedwards.html">Mrs. C. Edwards - 4</a></li>
<li><a href="../macleod.html">Mrs. MacLeod - 5</a></li>
<li><a href="../mackenzie.html">Mrs. MacKenzie - 6</a></li>
</ul>
</li>
<li><a href="../edlinks.html">Educational Links</a></li>
<li><a href="../PDFs/handbook.pdf">Handbook</a></li>
<li><a href="../PDFs/newsletter.pdf">Newsletters</a></li>
<li><a href="../schoolforms.html">School Forms</a></li>
<li><a href="../studyhall.html">Study Hall</a></li>
</ul>
</li>
<li><a href="../staff.html">Staff</a> </li>
<li><a href="../index.html" class="MenuBarVertical">Home</a></li>
</ul>
</div>
<div id="right"><!-- TemplateBeginEditable name="Editable Area" -->
<!-- TemplateEndEditable --></div>
<div id="footer">
<div align="center"></div>
<div align="center"></div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Then, if you have a look near the bottom of SpryMenuBarVertical.css you will see that the white background colour has been specified for IE as in
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Change the value to #CCC and it will have fixed that part of the problem.
When you upgrade to the later version of Spry, make sure to keep a copy of the CSS file as a reference to modifying the new CSS file.
Gramps -
Spry Table works in Firefox but not IE
I have a Spry table working just fine in Firefox in a site
I'm developing:
http://www.abenaki.com/newsite/schedule.html,
but in IE 6 and 7 it first shows the table, unpopulated, and then
disappears altogether. I'm new to Spry and XML... have I done
something wrong? Any light anyone could shed would be hugely
appreciated! Thank you!!
The XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<courses>
<course id="1">
<name>New! Introduction to Social Assistance and Case
Management</name>
<location>Winnipeg</location>
<startdate>10 21 2008</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>This course covers the setup, daily and periodic
procedures for Abenaki’s Social Assistance and Case
Management Module.Topics to be covered include: organization
profile setup, rate maintenance, security, vendor and client
maintenance, cheque production in Sage Accpac, cheque production in
the Social Assistance module, reports, case planning, month and
year end processing.</desc>
</course>
<course id="2">
<name>Introduction to Safe Water Infrastructure
Management System</name>
<location>Moncton</location>
<startdate>10 28 2008</startdate>
<duration>2 days</duration>
<price>$1295</price>
<desc>No description available at this
time.</desc>
</course>
<course id="3">
<name>Introduction to Housing Inspection and Management
System</name>
<location>Moncton</location>
<startdate>10 30 2008</startdate>
<duration>1 day</duration>
<price>$495</price>
<desc>This introductory level course covers all of the
steps involved in the data entry and report generation for housing
units in the community. Topics to be covered include: rating the
condition and estimated cost to repair of the interior, exterior,
amenities, fire and health hazard items. Students will learn how to
generate reports to identify housing units in need of minor or
major repairs and those units that are potential fire and/or health
hazard.</desc>
</course>
<course id="4">
<name>New! Post Secondary Education and Student
Tracking</name>
<location>Winnipeg</location>
<startdate>11 12 2008</startdate>
<duration>3 days</duration>
<price>$1595</price>
<desc>No description available at this
time.</desc>
</course>
<course id="5">
<name>New! Introduction to Social Assistance and Case
Management</name>
<location>Edmonton</location>
<startdate>11 18 2008</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>This course covers the setup, daily and periodic
procedures for Abenaki’s Social Assistance and Case
Management Module.Topics to be covered include: organization
profile setup, rate maintenance, security, vendor and client
maintenance, cheque production in Sage Accpac, cheque production in
the Social Assistance module, reports, case planning, month and
year end processing.</desc>
</course>
<course id="6">
<name>Introduction to Safe Water Infrastructure
Management System</name>
<location>Edmonton</location>
<startdate>11 18 2008</startdate>
<duration>2 days</duration>
<price>$1295</price>
<desc>No description available at this
time.</desc>
</course>
<course id="7">
<name>Introduction to Housing Inspection and Management
System</name>
<location>Edmonton</location>
<startdate>11 20 2008</startdate>
<duration>1 day</duration>
<price>$495</price>
<desc>This introductory level course covers all of the
steps involved in the data entry and report generation for housing
units in the community. Topics to be covered include: rating the
condition and estimated cost to repair of the interior, exterior,
amenities, fire and health hazard items. Students will learn how to
generate reports to identify housing units in need of minor or
major repairs and those units that are potential fire and/or health
hazard.</desc>
</course>
<course id="8">
<name>Sage Accpac ERP 5.5 Refresher</name>
<location>Moncton</location>
<startdate>01 20 2009</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>No description available at this
time.</desc>
</course>
<course id="9">
<name>Sage Accpac ERP 5.5 General Ledger and Accounts
Payable</name>
<location>Winnipeg</location>
<startdate>01 20 2009</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>No description available at this
time.</desc>
</course>
</courses>
Abenaki Course
ScheduleThe reason its not working its because its "crashing" at the
sort function in IE, I have no clue why.
To be more specific,, this part of the SpryData.js
if (this.unfilteredData)
this.unfilteredData.sort(sortfunc);
if (this.filterFunc)
this.filter(this.filterFunc, true);
else
/*this->*/ this.data.sort(sortfunc);
Maby try to delete the setColumnType for your startdate, to
see if that helps. Because your startdate is not a "valid" date
string. (i think) -
Hello, I am using the Spry tabbed panels in Dreamweaver CS4 and when I render in firefox there is a large amount of space at the bottom as if the tabbed panels are allowing space for each subsequent tab - even though the text is in the next tab.
http://www.patternsoftheweb.net/1.htm
The page link above shows the problem. How do I get rid of the extra space?
Thank you for your help!First you have some code issues. Run your page through the validator: http://validator.w3.org/ . You can ignore the tabindex one because Spry uses that even though it's not really valid. You can't have an h6 tag inside an h6 tag, you are missing some end tags. CSS seems fine, just the usual Spry items come up.
Make sure all the tags match up and see if you are still having the issue. Also, be aware that there is a version 2 of the Spry Tabbed Panels as part of the Widget Browser (integrated in CS5, separate for CS4 use). See the following page for more details: http://labs.adobe.com/technologies/widgetbrowser/ . -
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 -
How to fix Spry Menu bar and Firefox with a Mac
The spry menu bar does not properly display in Firefox (Version11&12) on a mac. Have looked at a number of different ways to fix this. Included is a copy of css for menu bar. Would appreciate any suggestions.
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 11em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 11em;
left: -1000em;
position: relative;
/* 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: 11em;
float: none;
/* 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
/* [disabled]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: #FFFFCC;
padding: 0.5em 0.75em;
color: #4F8627;
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: #FFFFCC;
color: #4F8627;
/* 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: #FFFFCC;
color: #4F8627;
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;Change
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 11em;
left: -1000em;
position: relative;
to
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 11em;
left: -1000em;
position: absolute;
Gramps -
Spry Slideshow works in Firefox/Safari but not in Explorer
I'm still unable to get my slideshow to work. It works fine in Safari and Firefox, but nothing shows up in Explorer. Does anyone have any ideas or maybe another reputable source for a different slideshow widget?
www.epaaudio.comjQuery is a popular Javascript framework and there are a ton of jQuery slideshows out there - do a web search on it. It might proove to be a better option for what you're trying to accomplish.
-
Spry menu ok in firefox but folded in IE. Help please
Hi I badly need some help.
(1) my web page at works fine in IE but the spry menu on the right is folding up. the website is www.greenpwwhh.com. The code is below. to get to the page click on puzzles then crossword (this works in IE but not in FF - do you know why?)
(2) why when
<!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/crossword_main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>GreenP - Wealth, Wisdom, Health & Happiness</title>
<!-- InstanceEndEditable -->
<link href="main_page.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColFixHdr">
<div id='divVHSS'></div><script language="JavaScript" type="text/javascript" src="http://vhss-d.oddcast.com/vhost_embed_functions_v2.php?acc=1242472&js=1"></script><script language="JavaScript" type="text/javascript">AC_VHost_Embed(1242472,300, 400, '', 1, 1, 1890628, 0, 1, 0, 'f778bdfaea52e72c33e6d97d4240496e', 9, '400|300|15|15|L|T|false|1|1|0|0|http%3A//vhss-a.oddcast.com/ccs2/vhss/user/cad/1242472/t humbs/show_1890628.jpg|Double%20click%20to%20play%20me|0|C|0|1|2|890');</script>
<div id="container">
<div id="header">
<div id="headerLogo"><img src="images/greenP_logo.gif" width="298" height="115" alt="greenP_logo" /> </div>
<div id="headerAd">Oh my gosh!! 100 customers just passed your register? Click here to get them</div>
<h1> </h1>
<!-- end #header -->
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="thrColFixHdr">Home</a></li>
<li><a href="#" class="thrColFixHdr">Resources</a>
<ul>
<li><a href="#">Business Opportunities</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Jobs</a>
<ul>
<li><a href="#">Caribbean</a></li>
<li><a href="#">USA</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="thrColFixHdr">Wisdom</a></li>
<li><a href="#" class="thrColFixHdr">Wealth</a></li>
<li><a href="#" class="thrColFixHdr">Health</a></li>
<li><a href="#" class="thrColFixHdr">Happiness</a></li>
<li><a href="#" class="thrColFixHdr">Relationships</a></li>
<li><a href="#" class="thrColFixHdr">Achieved!</a></li>
<li><a href="#" class="thrColFixHdr">Videos</a></li>
<li><a href="crossword_main_page.html" class="thrColFixHdr MenuBarItemSubmenu">Puzzles</a>
<ul>
<li><a href="crossword_main_page.html">Crossword</a></li>
<li><a href="#">Jigsaw</a></li>
</ul>
</li>
<li><a href="#" class="thrColFixHdr">Fun Facts</a></li>
<li><a href="#" class="thrColFixHdr">Members</a></li>
<li><a href="about_us.html" class="thrColFixHdr">About us</a></li>
</ul>
</div>
<div id="date">Thursday, October 29, 2009 6:05 PM</div>
<div id="calendar"><!-- Start Bravenet.com Service Code -->
<div align="center">
<a href="http://pub27.bravenet.com/calendar/show.php?usernum=2253679465">
<img src="http://assets.bravenet.com/cp/calendar.gif" border="0" title="Free Calendar from Bravenet.com" alt="Free Calendar from Bravenet.com" /></a></div></div>
<div id="chat"><!-- Start Bravenet.com Service Code -->
<div align="center">
<a href="http://pub27.bravenet.com/chat/show.php?usernum=2253679465&cpv=2">
<img src="http://assets.bravenet.com/cp/chat.gif" border="0" title="Free Java Chat from Bravenet.com" alt="Free Java Chat from Bravenet.com" /></a></div>
<!-- End Bravenet.com Service Code --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<p> </p>
<div id="crosswordContainer">
<div id="crosswordPageHeader">Welcome to the Crossword Stress Reduction Center</div>
<div id="crosswordMenu"> </div>
<div id="crosswordSponsorAd">
<p> Brought to you with the help of Rich Company</p></div>
<!-- InstanceBeginEditable name="crosswordApplet" -->
<div id="crosswordGame">
<p><br />
</p>
<font size="2" face="Verdana,Sans-Serif" color="FFFFFF">
<p> </p>
<p> </p>
</font></div>
<!-- InstanceEndEditable -->
<div id="crosswordBottomContainer"><!-- InstanceBeginEditable name="crosswordContent" -->
<div id="crosswordBottomContents">Content for id "crosswordBottomContents" Goes Here</div>
<!-- InstanceEndEditable -->
<div id="crosswordBottomAd"><font color="FFFFFF" size="2">AVVERTISEMENT</font></div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="crosswordRightCol">
<div id="crosswordTitles">
<div id="crossTitlesTopAd">ADVERTISEMENT</div>
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Bible</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="#">Cities</a></li>
<li><a href="#">Countries</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Jamaica</a></li>
<li><a href="#">Medicine</a></li>
<li><a href="#">Rivers</a></li>
<li><a class="MenuBarItemSubmenu" href="#">School</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Biology</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="#">Chemistry</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Economics</a></li>
<li><a href="#">Maths</a></li>
<li><a href="#">Spanish</a></li>
<li><a href="#">Medicine</a></li>
</ul>
</li>
<li><a href="#">Seas</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">TV Personalities</a></li>
</ul>
<div id="crosswordRightBarAd">
<p>ADVERTISEMENT</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br class="clearfloat" />
</p>
<div id="footer">
<p>Copyright © GreenP. All rights reserved. No reproduction of any kind without written permission</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>
<!-- InstanceEnd --></html>Can you explain your difficulty more clearly?
Beth -
Spry Accordion - Select List - Firefox
Hi,
I have an accordion panel with a quick access enquiiry form
on one page. In Firefox, whenever the accordion is clicked, I get
the 'link border' - to overcome this, I put an
"onFocus='this.blur();'" action on the accordion.
Whenever the select list is clicked, it loses focus (because
Firefox interprets actions and behaviours in an heirachy format I
think??) because of the action on the accordion.
How can I stop this happening - I'm guessing the solution
will either involve keeping focus on the select / drop-down menu,
or removing the link border by scrubbing it somehow.
Please help!!!
Thanks,quote:
Originally posted by:
m_a_t11
Hi,
I have an accordion panel with a quick access enquiiry form
on one page. In Firefox, whenever the accordion is clicked, I get
the 'link border' - to overcome this, I put an
"onFocus='this.blur();'" action on the accordion.
Whenever the select list is clicked, it loses focus (because
Firefox interprets actions and behaviours in an heirachy format I
think??) because of the action on the accordion.
How can I stop this happening - I'm guessing the solution
will either involve keeping focus on the select / drop-down menu,
or removing the link border by scrubbing it somehow.
Please help!!!
Thanks,
U can remove the dotted border by adding
outline: none; to the elements class (css) -
Spry menu works in Firefox and Safari, but not Internet Explorer 6, 7, or 8
Our school website is doing a re design and in the adobebrowser test lab it looks great in all browsers except for IE 6, 7, & 8. Some of our faculty and staff are still running 7 or 8, so that's why I need to find a fix. For some reason it puts my last menu item underneath the first one which throws the whole thing off, but it's the exact way I want it on all other browsers. Using Dreamweaver CS5.
Here is the link
I would appreciate any help! ThanksSomething has gone awry here but afer that, I'm not sure what to advise:
</div>
</li>
<div class="latestnews"></div>
</li>
</ul>
<p class="readmore"><a href="calendar.html">Click here to view all of the latest events »</a></p>
</div>
First off, you aren't supposed to have a <div> nested in an <li>.
I also think that the whole unordered list there might be poorly formed.
Martin -
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> -
I am really pissed off at two characteristics of Firefox 4: 1) Toolbar selections don't stick and 2) firefox window position and size settings do not stick from one use to the next.
The Bookmarks toolbar is the selection that does not stick, and Firefox, even though I set it to the size and position I want every time I use the program, always loads flush left, full top to botton, and about 1/3 of the width of the screen EVERY TIME it loads. These two characteristics are extreme pains in the ass.This problem occurs on the Juno webmail site?
I assume you are doing something different than just correcting the squiggly red underlined words. How are you spell-checking the email: using an add-on or using a feature of the Juno webmail site? If it's an add-on, which one is it? -
Is there a reason why Firefox does not work on my Galaxy Edge?
I recently upgraded to a Samsung Galaxy Note Edge; love the phone, it works great. The downside is that Firefox doesn't seem to work properly, it goes from extremely low while displaying Web pages to not displaying anything at all. At first I thought it was something with the phone but as soon as I switch to Chrome everything works normal. I use Firefox on my laptop and have bookmarks and passwords stored in it. Previously I had a Samsung GS4 and syncing data from laptop to phone was a piece of cake. I like Chrome and I know it could do the same but I'd like to stick to Firefox if possible. Hope the Mozilla team can fix it soon.
Edgar J. Oviedo.Hi EOviedo
I am surprised that Firefox doesn't work on the Note Edge because it works great on the Note 3 and 4
Could you please:
# Tell us what exact model of Note Edge? e.g. Verizon Note Edge, AT&T Note Edge. We have had problems where obscure carrier variants of phones and tablets don't work but the popular variants do work (e.g. in one case the AT&T HTC One M8 worked fine but the Verizon HTC One M8 didn't)
# Tell what version of the Android Operating system? Are you using Kitkat 4.4 or Lollipop 5?
# Could you please tell us what you did (what do you mean by "from extremely low while displaying Web pages to not displaying anything at all"; which websites exactly) what happened and what you expected. A sample URL of a website and screenshot would be super helpful
Cheers!
...Roland -
I am trying to update my version of Firefox on my Mac.
I am trying to update Firefox on my Mac. I am running OSX 10.5.8, but the website is telling me the latest version does not support my operating system. I downloaded it anyway, and it doesn't work. I have deleted all version of Firefox from my computer, but I would really like to use it again.
Can you help?
thanks!
MeganYou need an Intel Mac to be able to use Firefox 4 and later versions.
For older Macs that aren't supported in Firefox 4.0 & 5.0, try TenFourFox for PowerPC's running Mac 10.4.11 & 10.5.8 . <br />
http://www.floodgap.com/software/tenfourfox/
Or stick with Firefox 3.6 - http://www.mozilla.com/en-US/firefox/all-older.html
Maybe you are looking for
-
Hey everyone, I need to find a way to insert a page (PDF file) into an existing PDF through java. I have Adobe Acrobat Pro 8 on my pc but am doubtful that I will be able to use it through java. Your help would be greatly appreciated! Thanks, Chris
-
Can I backup iOS8 data to an iOS7 device?
Recently, after warranty granted me a replacement iPod Touch, I realised how smoothly it ran iOS7 in contrast to iOS8 which I (stupidly) updated my previous iPod to. I had backed up my iOS8 iPod to iTunes - as well as iCloud - to transfer to the new
-
Functional Security Software for Snow Leopard?
Hi everyone. I just made the move to Snow Leopard (10.6.1), and I'm curious about what security software is decent and available for SL. My school provides access to Symantec AntiVirus for OS X, but unfortunately the only version they provide is inco
-
Call sap transaction in view element
Hi together, I'm a WD beginner. So I want to know how can I start/show a sap Transaction in a UIElment. I don't want to start an external window. I searched a Long time here in SCN. Some guys said it is not possible ?!?!?! Thanks a lot Wolfgang PS:
-
Can I take a managed file and link it to a referenced file?
Is this possible? I am creating a referenced library. Going forward, I know that I need to use only the referenced file to make new versions within Aperture. But going back through my old files, I have originals and then all the edited copies. Thes