Spry menu not dropping straight now in IE

!!SORRY FOR ALL OF THE CODE I AM NOT SURE WHAT YOU NEED TO
SEE!!
Hello,
I am new to web design with CS4. My spry menu looks find in
Firefox and Google Chrome, but not in IE. The menus should drop
down like this in Chrome (
http://img255.imageshack.us/img255/1881/website3or8.jpg
) but in IE, they do this (
http://img255.imageshack.us/img255/2608/website1nt1.jpg
In addition, how do I get it so my menu extends across the
whole top of the page like this (
http://img405.imageshack.us/img405/4002/website2cn6.jpg
Tell me what code you need to see and I will post it.
Thanks!

I will answer the extending the menu question first since
that is the easiest. You can either increase the width of the
menubar items or you can just change the background color for the
layer behind the menu so that it is the same color.
For the menu, there are a couple things it could be. Without
seeing your pages, it could be an issue with the Spry version. If
your Spry code is not up to date then this is the starting point.
You can tell the version by looking at the top of either the js or
css file for the Spry. Then check this page (
http://labs.adobe.com/technologies/spry/
). The updater isn't all that intelligent so it won't check the
previous version.
Then if you are using the most up to date version we come to
the code which would need to be shown. We would need to see any CSS
code related to the menubar layer (the Spry CSS file) and any other
CSS code you have for surrounding divs. It would also help to post
the HTML for the menubar area so we can see how the CSS styles are
used.

Similar Messages

SPRY menu not dropping down on certain pages

I'm having a lot of problems now that I've uploaded this webpage. I created this webpage in Dreamweaver and used the SPRY menu template and everything worked perfectly in Dreamweaver but now that I have uploaded it I can not use the drop downs on like 7 pages. When you are on the shop page, the dinning page, Living, Directions, Design, Events, and the contact page the SPRY menu will not drop down. Could someone look at my site and perhaps my code and tell me what I am doing wrong on those pages?
http://discoverclearfield.com/shop.html
http://discoverclearfield.com/dining.html
there are a couple of the pages that don't work.
Thanks so much.

Have a look here and come back after you have fixed the markup http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdiscoverclearfield.com%2Fshop.htm l
Gramps

Spry Menu not dropping down in Firefox and Chrome

Hi -
I am not a professional and having difficulty. I have inserted a spry menu bar in CS5 and it looks fine in IE, but doesn't drop down (can see a little bit) in firefox and chrome.
I read a bunch and tried a fix to make the overflow visible, that fixed the problem but my formatting of locations of other areas went wild.
The site is: http://www.tucsonrealpros.com
.....any help is much appreciated...been pulling hair out

Hi,
I have tried the site and can see the drop down for Home search, Buyers.
Can you try to update the chrome and firefox.
Thanks and regards
Harshit yadav

Spry dropdown menu not dropping down and reversing order cs4

Hi, thank you for reading my post.
I am having problems with my spry menu bar not dropping down when
I upload it to my site, I get bulleted lists. When I preview it, it works fine. Also, the menu is in reverse order (??) I've tried retyping it in the opposite order to see if that fixes it, but somehow it goes back to backwards. It should start with home at the left. I am trying to post my code, but it will not let me paste. How do I paste code? Sorry if thats a silly question.
Thank you

Hi, thank you for your replies. I set everything to left, which caused it to display correctly in dreamweaver. Thank you! I did enjoy the "wiggle" that I get from the menu items on hover, they move from right to left, will that cause problems if I change one back to right? I still am having trouble getting the menu bar to show on the website, Im still getting bullets.
How do I put the css files? They might be on the site, but not in the right place, where should they be? I also made another site from the same template, and saved it to a folder in my site so it can be previewed. Will that cause problems? Both spry's are not working..... argh! Thank you to everyone for your help, I appreciate it, this is my first time using the spry menu feature. Thank you for the help on posting code. Here is a link to the site and the code:
www.holly-parker.com
JAVA:
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
     (ua.match(/linux/i) ? "linux" :
     (ua.match(/mac/i) ? "mac" :
     ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
   document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
   if (typeof this[k] == 'undefined')
    var rollover = new Image;
    rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
   if (i > 0 && this.enableKeyboardNavigation)
    items[i].getElementsByTagName('a')[0].tabIndex='-1';
   this.initialize(items[i], element);
   if(Spry.is.ie)
    this.addClassName(items[i], this.isieClass);
    items[i].style.position = "static";
if (this.enableKeyboardNavigation)
   var self = this;
   this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
   if(this.hasClassName(this.element, this.verticalClass))
    this.element.style.position = "relative";
   var linkitems = this.element.getElementsByTagName('a');
   for(var i=0; i<linkitems.length; i++)
    linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
    menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
   this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   menu.style.top = '';
   menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
   this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
   // this refers to the list item
   if(testNode == null)
    return false;
   if(testNode == this)
    return true;
   else
    return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
   var tmp = el;
   while (tmp != this.element)
    if (tmp == item)
     return;
    try{
     tmp = tmp.parentNode;
    }catch(err){break;}
   item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
   found = this.getElementForKey(opts, 'y', 1);
   break;
case this.downKeyCode:
   found = this.getElementForKey(opts, 'y', -1);
   break;
case this.leftKeyCode:
   found = this.getElementForKey(opts, 'x', 1);
   break;
case this.rightKeyCode:
   found = this.getElementForKey(opts, 'x', -1);
   break;
case this.escKeyCode:
case 9:
   this.clearSelection();
   this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
   //subopts
   this.mouseOver(listitem, e);
   break;
case 2:
   //parent
   this.mouseOut(opts[2], e);
   break;
case 3:
case 4:
   // left - right
   this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
   break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
        //stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
   clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
   var self = this;
   listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
   link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
   continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
   continue;
if (els[i])
   var tmp = rect(els[i]);
   if ( (dir * tmp[prop]) < (dir * ref[prop]))
    ref = tmp;
    found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
   if(isFirstEntry)
    camelizedString = oStringList[i];
    isFirstEntry = false;
   else
    var s = oStringList[i];
    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
   value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
   if (document.defaultView && document.defaultView.getComputedStyle)
    var css = document.defaultView.getComputedStyle(element, null);
    value = css ? css.getPropertyValue(prop) : null;
   else if (element.currentStyle)
     value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
   while (parent) {
    ret.x += parent.offsetLeft;
    ret.y += parent.offsetTop;
    parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
   ret.y -= doc.body.offsetTop;
if (el.parentNode)
   parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
   cas = parent.nodeName.toUpperCase();
   ret.x -= parent.scrollLeft;
   ret.y -= parent.scrollTop;
   if (parent.parentNode)
    parent = parent.parentNode;
   else
    parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];
CSS:
/* 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;
color: #FCC;
background-color: #000;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: bold;
text-align: center;
float: left;
width: 880px;
/* 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;
position: relative;
text-align: center;
cursor: pointer;
width: 145.8px;
background-color: #000;
color: #FCC;
float: left;
/* 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;
background-color: #000;
color: #FCC;
/* 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: 145.8px;
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;
color: #FCC;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 145.8px;
clear: left;
float: left;
/* 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: 0;
top: 0;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #000;
padding: 0.5em 0.75em;
color: #FCC;
/* 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: #333;
color: #FFF;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
text-align: right;
/* 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: #000;
color: #FCC;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
color: #FCC;
/* 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: #000;
Home 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>Holly Parker - Fashion, Commercial, Swim, Runway Model Los Angeles</title>




<style type="text/css">

</style>

<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
    <h1><img src="images/holly-logo-top.jpg" width="875" height="139" /></h1>
    <table width="800" border="0" cellspacing="0" cellpadding="4">
      <tr>
        <td align="right" valign="middle" bgcolor="#FFE8FF" class="navigation">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="index.html">MAIN</a></li>
            <li><a href="pone.html" class="MenuBarItemSubmenu">PHOTOS</a>
              <ul>
                <li><a href="pone.html">Un</a></li>
                <li><a href="ptwo.html">Deux</a></li>
                <li><a href="pthree.html">Trois</a></li>
                <li><a href="pfour.html">Quatre</a></li>
              </ul>
            </li>
            <li><a href="me.html">ME</a>            </li>
            <li><a href="connect.html">CONNECT</a></li>
            <li><a href="links.html">LINKS</a></li>
            <li><a href="video.html">VIDEO</a></li>
          </ul>
        </td>
      </tr>
    </table>
    
</div>
<div id="mainContent">
    <p><img src="images/holly-parker-pink-beauty-web.jpg" width="265" height="349" /></p>

</div>
<div id="footer">
    <p>HOLLY PARKER © 2010 ALL RIGHTS RESERVED </p>
</div></div>
<script type="text/javascript">

      </script>
</body>
</html>

Spry Menu not working correctly

Hopefully this is the right part of the forum to post this question, if not, I apologize.
I have created a site in dreamweaver and am using a single Spry Menu Bar. I have read tons of forum postings about Drop down menus not working in IE, however, mine don't work in any browser or in the Live View either. I have a feeling it has something to do with either the div containing the menu bar or the sizing, but I can't tell. Please help.
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size:17px;
          font-family:Tahoma, Geneva, sans-serif;
          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:6.8em;
          height:3.5em;
          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: 8.2em;
          position: absolute;
          left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: auto;
/* 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: #CCC;
          padding: 0.7em 0.5em;
          color: #333;
          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: #33C;
          color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #33C;
          color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-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;
                    float: left;
                    background: #FFF;
Here is the code for the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="http://www.onbile.com/websites/41ea989914d81eb7bd2e415141cd40fe"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GuitarFusion.com - Play. Learn. Make Music</title>
<link href="guitarfusionblogstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15280994-2']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('images/homeOver.jpg','images/BioOver.jpg','images/LearnOver.jpg ','images/LessonsOver.jpg','images/ContactOver.jpg')">
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="social"><a href="http://www.facebook.com/pages/Guitarfusion/208575872514732"><img src="../images/facebook_32.png" width="32" height="32" alt="Facebook" border="0"/></a><a href="http://www.linkedin.com/in/sammills"><img src="../images/linkedin_32.png" width="32" height="32" alt="Linkedin" border="0" /></a><a href="http://www.myspace.com/lucid77"><img src="../images/myspace_32.png" width="32" height="32" alt="Myspace" border="0" /></a><a href="http://twitter.com/#!/guitarfusion"><img src="../images/twitter_32.png" width="32" height="32" alt="Twitter" border="0"></a><a href="http://www.guitarfusion.com/blog"><img src="../images/wordpress_32.png" width="32" height="32" alt="Wordpress" border="0"/></a><a href="http://www.youtube.com/guitarfusiondotcom"><img src="../images/youtube_32.png" width="32" height="32" alt="Youtube" border="0" /></a></div>

<div id="navdropdown">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Home</a>      </li>
    <li><a href="#" class="MenuBarItemSubmenu">About Me</a>
      <ul>
        <li><a href="#" title="A little about myself.">Biography</a></li>
        <li><a href="#">Cirriculum Vitae</a></li>
        <li><a href="#" title="See me play or teach.">Mp3 & Videos</a></li>
        <li><a href="#" title="Where am I am playing?">Performances</a></li>
        <li><a href="#" title="Want me to play your event or party?">Booking</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Lessons</a>
      <ul>
        <li><a href="#" title="What will you learn?">Syllabus</a>          </li>
        <li><a href="#" title="How much does this cost?">Pricing</a></li>
        <li><a href="#" title="Where do lessons take place?">Locations</a></li>
        <li><a href="#" title="What books and supplies will you need?"> Books & Supplies</a></li>
</ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Learn Online</a>
      <ul>
        <li><a href="#">Guitar</a></li>
        <li><a href="#">Bass</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Contact</a>
      <ul>
        <li><a href="#">Email </a></li>
        <li><a href="#" title="Facebook, Twitter, Etc..">Social Media</a></li>
      </ul>
    </li>
</ul>
</div>
</div>
<div id="content">
<div id="blog_header"></div>
<div id="sidebar">
<form method=post action="http://poll.pollcode.com/Vp1c"><table border=0 width=150 bgcolor="#ffffff" cellspacing=0 cellpadding=2><tr><td colspan=2><font face="Verdana" size=-1 color="teal"><center><b>Most useful video lesson topics:</b></center></font></td></tr><tr><td width=5><input type=radio name=answer value="1"></td><td><font face="Verdana" size=-1 color="000000">Open Chords</font></td></tr><tr><td width=5><input type=radio name=answer value="2"></td><td><font face="Verdana" size=-1 color="000000">Barre Chords</font></td></tr><tr><td width=5><input type=radio name=answer value="3"></td><td><font face="Verdana" size=-1 color="000000">Scales</font></td></tr><tr><td width=5><input type=radio name=answer value="4"></td><td><font face="Verdana" size=-1 color="000000">Arpeggios</font></td></tr><tr><td width=5><input type=radio name=answer value="5"></td><td><font face="Verdana" size=-1 color="000000">Music Reading</font></td></tr><tr><td width=5><input type=radio name=answer value="6"></td><td><font face="Verdana" size=-1 color="000000">Picking Technique</font></td></tr><tr><td width=5><input type=radio name=answer value="7"></td><td><font face="Verdana" size=-1 color="000000">Strumming Patterns</font></td></tr><tr><td width=5><input type=radio name=answer value="8"></td><td><font face="Verdana" size=-1 color="000000">Tab Reading</font></td></tr><tr><td width=5><input type=radio name=answer value="9"></td><td><font face="Verdana" size=-1 color="000000">Songwriting</font></td></tr><tr><td width=5><input type=radio name=answer value="10"></td><td><font face="Verdana" size=-1 color="000000">Improvisation</font></td></tr><tr><td width=5><input type=radio name=answer value="11"></td><td><font face="Verdana" size=-1 color="000000">Triads</font></td></tr><tr><td colspan=2><center><input type=submit value="Vote"> <input type=submit name=view value="View"></center></td></tr><tr><td bgcolor="white" colspan=2 align=right><font face="Verdana" size=-2 color="black">pollcode.com <a href=http://pollcode.com/><font color="navy">free polls</font></a></font></td></tr></table></form><a href="./studies.html">
<img src="images/studies.jpg" border="0" /></a><br/><br/>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 200,
theme: {
    shell: {
      background: '#aee5f5',
      color: '#4b508f'
    tweets: {
      background: '#dbdbdb',
      color: '#333333',
      links: '#336699'
features: {
    scrollbar: true,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
}).render().setUser('guitarfusion').start();
</script></font><br/>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/Guitarfusion/208575872514732" width="200" show_faces="true" border_color="" stream="true" header="true"></fb:like-box>
</div>
<div id="blog">
<?php
/* Short and sweet */
define('WP_USE_THEMES', false);
require('./blog/wp-blog-header.php');
?>
<?php
require('./blog/wp-blog-header.php');
?>
<?php
$posts = get_posts('numberposts=10&order=ASC&orderby=post_title');
foreach ($posts as $post) : start_wp(); ?>
<?php the_date(); echo "<br />"; ?>
<h2><?php the_title(); ?>    </h2>
<?php the_content() ?>
<a class="bloglink" href="<?php the_permalink() ?>">
Read more...</a><br />
<?php
endforeach;
?>
</div>
<div id="ad_middle"></div>
<div id="blog_bottom2">
<h1> Free Stuff</h1>
<br/>
<ul>
<li><a href="http://www.metronomeonline" target="_new">Online Metronome</a> - Metronomes are a great tool to use during practice to keep a steady tempo and to help increase speed of passages. Use this online metronome if you do not already have a stand alone metronome.</li><br/>
<li><a href="http://itunes.apple.com/us/app/id347846503">Iphone / Itouch Metronome</a> - This is an example of several free metronome apps that are available for your phone. Android users can also find free metronomes on the Marketplace. Be sure and read the ratings, some are better at keeping time than others.</li><br/>
<li><a href="https://market.android.com/details?id=com.pedrocorp.android.guitar&feature=search_result">Android Phone Metronome / Tuner / Chord Dictionary</a>This handy little app will not only provide you with a tuner, but has a built-in metronome and chord dictionary. - </li><br/>
<li><a href="http://tuxguitar.herac.com.ar/" target="_new">Free Guitar Tab Editor</a> - View / Create Tab - Free alternative to GuitarPro Software. Use this software to open .gp3, .gp4, .gp5 files and search for music online.</li><br/>
<li><a href="http://www.blanksheetmusic.net/">Free Blank Sheet Music</a> - Print blank sheet music. Choose from standard notation, treble, bass, alto clefs, and tablature. </li><br/>
<li><a href="http://www.911tabs.com/">Free Tablature Search Engine</a> - This is a great search engine to find tabs. I mainly use this to find .gp5 files for my Tux Guitar Software. </li>
</ul>
</div>
<div id="blog_bottom"><span style="float:left;">
<img src="images/mapad.jpg" /></span>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=1060+West+State+Road+434,+Longwood,+FL&sll=28.697815,-81.364 128&hl=en&sspn=0.006295,0.006295&ie=UTF8&hq=&hnear=1060+Florida+434,+Longwood,+Florida+327 50&ll=28.70572,-81.364145&spn=0.026349,0.036478&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?q=1060+West+State+Road+434,+Longwood,+FL&sll=28.697815,-81.364 128&hl=en&sspn=0.006295,0.006295&ie=UTF8&hq=&hnear=1060+Florida+434,+Longwood,+Florida+327 50&ll=28.70572,-81.364145&spn=0.026349,0.036478&z=14&iwloc=A&source=embed" style="color:#0000FF;text-align:right">View Larger Map</a></small>
</div>
</div>
<div id="footer">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../biography.html">Biography</a></li>
<li><a href="../learn.html">Learn Guitar</a></li>
<li><a href="../Lessons.html">Guitar Lessons</a></li>
<li><a href="../contact.html">Schedule Lessons</a></li>
<li><a href="mailto:[email protected]">Contact Webmaster</a></li>
</ul>
© 2006-2011 Guitarfusion.com All Rights Reserved. Unauthorized Use Prohibited.
</div>
</div>
</body>
</html>
And here is the code for the index.php's css
body {
          background-color: #ff9933;
          font-family:Verdana, Geneva, sans-serif;
          font-size:11px;
p {
          text-align:center;
          text-indent:15px;
#wrapper {
          width:960px;
          height:100%;
          margin-left:30px;
          position:absolute;
#header {
          width:960px;
          height:310px;
          background-image: url(images/gfheader.gif);
          background-position:center;
          background-repeat:no-repeat;
          position:relative;
          z-index:0;
#logo {
          height:242px;
          width:235px;
          background-image:url(images/GuitarFusionLogo.gif);
          position:relative;
          top:40px;
          left:80px;
          z-index:1;
          visibility:hidden;
#nav {
          width:600px;
          height:45px;
          z-index:2;
          position:relative;
          top:12px;
          left:290px;
          visibility:hidden;
#navdropdown {
          background-color:#999;
          width:600px;
          height:45px;
          z-index:3;
          position:relative;
          top:12px;
          left:290px;
#content {
          width:840px;
          height:1800px;
          background-color:#fff;
          position:relative;
          margin-left:60px;
#social {
          width:195px;
          height:32px;
          border:none;
          position:relative;
          text-align:right;
          bottom:25px;
          right:65px;
          float:right;
          z-index:3;
          visibility:hidden;
.social {
          margin-left:50px;
#blog {
          width:600px;
          height:500px;
          border: thin solid #000;
          position:relative;
          top:15px;
          left:15px;
          float:left;
          z-index:1;
          overflow:auto;
          background-color:#d6e8f7;
#blog_header {
          width:625px;
          height:45px;
          background-Image:url(images/blogheader.gif);
          position:relative;
          top:20px;
          left:5px;
          z-index:2;
          float:left;
.nav {
          margin-left:20px;
#sidebar {
          width:200px;
          height:1500px;
          border:none;
          left:-10px;
          top:10px;
          position:relative;
          float:right;
#ad_middle {
          width:600px;
          height:200px;
          border: thin solid #000;
          position:relative;
          top:15px;
          left:15px;
          z-index:1;
          overflow:auto;
          float:left;
          background-color:#EFF5E9;
          background-image:url(images/lessonsad.jpg);
          background-repeat:no-repeat;
          background-position:center;
#blog_bottom {
          width:600px;
          height:370px;
          border: thin solid #000;
          position:relative;
          top:15px;
          left:15px;
          z-index:1;
          overflow:auto;
          float:left;
          background-color:#F6F6F6;
#contentwrapper {
          width:650px;
          height:500px;
          position:relative;
          top:50px;
          float:left;
          margin-left:95px;
#header_content {
          width:624px;
          height:43px;
          background-image:url(images/Header.gif);
          text-align:center;
          font-size:28px;
          font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
          line-height:40px;
          color:#FFF;
          position:relative;
          left:10px;
#bio_content {
          width:600px;
          height:1000px;
.biopic {
          float:left;}
#learn_content {
          width:600px;
          height:100%;
#faq {
          width:700px;
          height:600px;
          background-color:#f8f8f8;
          border:thin solid #000;
          margin-left:60px;
#books {
          width:750px;
          height:700px;
          position:relative;
          float:left;
          margin-left:35px;
fieldset {
margin: 1em 0;
padding: 1em;
border : 1px solid #ccc;
background: #f8f8f8;
legend {
font-weight: bold;
#form_content {
          position:relative;
          left:160px;
          height:880px;
          width:500px;
          text-align:center;
          background-color:#E7EFFF;
          border:double #900;
form div {
          background-color:#f8f8f8;
          padding:0px;
          margin:0px;
#footer {
          width:960px;
          height:40px;
          bottom:0px;
          position:relative;
          text-align:center;
          line-height:1px;
          font-size:10px;
          padding-bottom:10px;
#footer ul li {
          display:inline;
          margin:20px;
#footer ul li a {
          text-decoration:none;}
          #blog_bottom2 {
          width:600px;
          height:370px;
          border: thin solid #000;
          position:relative;
          top:15px;
          left:15px;
          z-index:1;
          overflow:auto;
          float:left;
          background-color:#F6F6F6;
          text-align:center;
#studies{
                    width:600px;
                    height:800px;
                    position:relative;
                    margin-left:110px;
                    text-align:center;
                    background:#f8f8f8;
#blog_bottom2 ul li
          {list-style-type:none
Any help is appreciated.

You do not have a constructor for the menu bar as in
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
There are too many mistakes in the JS outside of the Spry Menu Bar. Have a look at the following which includes all errors, not just the JS
Validation Output:   117 Errors
Line 21, Column 38: character "&" is the first character of a delimiter but occurred as data var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=… ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 21, Column 40: cannot generate system identifier for general entity "i" … var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=… ✉
An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
Line 21, Column 40: general entity "i" not defined and no default entity … var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=… ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 21, Column 41: reference not terminated by REFC delimiter …var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x… ✉
If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
Line 21, Column 41: reference to entity "i" for which no system identifier could be generated …var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x… ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 21, Column 39: entity was defined here var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=…
Line 21, Column 50: character "&" not allowed in attribute specification list …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉
Line 21, Column 50: element "a.length" undefined …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
Line 21, Column 51: character "&" is the first character of a delimiter but occurred as data …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 21, Column 60: character "&" is the first character of a delimiter but occurred as data …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 21, Column 62: cannot generate system identifier for general entity "x.oSrc" …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉
An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
Line 21, Column 62: general entity "x.oSrc" not defined and no default entity …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 21, Column 68: reference to entity "x.oSrc" for which no system identifier could be generated …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 21, Column 61: entity was defined here …,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
Line 29, Column 76: character ";" not allowed in attribute specification list … var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) ✉
Line 29, Column 76: element "a.length" undefined … var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) ✉
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
Line 41, Column 57: character "&" is the first character of a delimiter but occurred as data …var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 41, Column 59: cannot generate system identifier for general entity "parent.frames.length" …var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉
An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
Line 41, Column 59: general entity "parent.frames.length" not defined and no default entity …var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 41, Column 79: reference not terminated by REFC delimiter …var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉
If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
Line 41, Column 79: reference to entity "parent.frames.length" for which no system identifier could be generated …var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 41, Column 58: entity was defined here …var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
Line 45, Column 15: character "&" is the first character of a delimiter but occurred as data if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 45, Column 17: cannot generate system identifier for general entity "d.all" if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉
An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
Line 45, Column 17: general entity "d.all" not defined and no default entity if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 45, Column 22: reference not terminated by REFC delimiter if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉
If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
Line 45, Column 22: reference to entity "d.all" for which no system identifier could be generated if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms… ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 45, Column 16: entity was defined here if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms…
Line 45, Column 47: character "&" is the first character of a delimiter but occurred as data …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 45, Column 50: reference not terminated by REFC delimiter …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉
If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
Line 45, Column 50: reference to entity "i" for which no system identifier could be generated …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 21, Column 39: entity was defined here var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=…
Line 45, Column 65: character ";" not allowed in attribute specification list …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉
Line 45, Column 65: element "d.forms.length" undefined …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; ✉
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
Line 47, Column 13: character "&" is the first character of a delimiter but occurred as data for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 47, Column 15: cannot generate system identifier for general entity "d.layers" for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
Line 47, Column 15: general entity "d.layers" not defined and no default entity for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 47, Column 23: reference not terminated by REFC delimiter for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
Line 47, Column 23: reference to entity "d.layers" for which no system identifier could be generated for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 47, Column 14: entity was defined here for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum…
Line 47, Column 23: character "&" is the first character of a delimiter but occurred as data for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 47, Column 26: reference not terminated by REFC delimiter for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
Line 47, Column 26: reference to entity "i" for which no system identifier could be generated for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum… ✉
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Line 21, Column 39: entity was defined here var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=…
Line 47, Column 42: character ";" not allowed in attribute specification list …or(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].documen… ✉
Line 47, Column 42: element "d.layers.length" undefined …or(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].documen… ✉
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
Line 49, Column 9: character "&" is the first character of a delimiter but occurred as data if(!x && d.getElementById) x=d.getElementById(n); return x; ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 49, Column 10: character "&" is the first character of a delimiter but occurred as data if(!x && d.getElementById) x=d.getElementById(n); return x; ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 59, Column 76: character "<" is the first character of a delimiter but occurred as data …=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) ✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Line 65, Column 9: end tag for "d.layers.length" omitted, but OMITTAG NO was specified </script> ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Line 47, Column 26: start tag was here for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].docum…
Line 65, Column 9: end tag for "d.forms.length" omitted, but OMITTAG NO was specified </script> ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Line 45, Column 50: start tag was here …x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
Line 65, Column 9: end tag for "a.length" omitted, but OMITTAG NO was specified </script> ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Line 29, Column 67: start tag was here … var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
Line 65, Column 9: end tag for "a.length" omitted, but OMITTAG NO was specified </script> ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Line 21, Column 41: start tag was here …var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x…
Line 121, Column 579: end tag for "img" omitted, but OMITTAG NO was specified …ight="32" alt="Twitter" border="0"></a><a href="http://www.guitarfusion.com/bl… ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Line 121, Column 492: start tag was here …="http://twitter.com/#!/guitarfusion"><img src="../images/twitter_32.png" widt…
Line 225, Column 14: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified <form method=post action="http://poll.pollcode.com/Vp1c"><table border=0 width=… ✉
Line 225, Column 72: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …poll.pollcode.com/Vp1c"><table border=0 width=150 bgcolor="#ffffff" cellspacin… ✉
Line 225, Column 80: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …lcode.com/Vp1c"><table border=0 width=150 bgcolor="#ffffff" cellspacing=0 cell… ✉
Line 225, Column 114: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …dth=150 bgcolor="#ffffff" cellspacing=0 cellpadding=2><tr><td colspan=2><font … ✉
Line 225, Column 128: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …r="#ffffff" cellspacing=0 cellpadding=2><tr><td colspan=2><font face="Verdana"… ✉
Line 225, Column 146: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …acing=0 cellpadding=2><tr><td colspan=2><font face="Verdana" size=-1 color="te… ✉
Line 225, Column 174: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …d colspan=2><font face="Verdana" size=-1 color="teal"><center><b>Most useful v… ✉
Line 225, Column 197: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag …"Verdana" size=-1 color="teal"><center><b>Most useful video lesson topics:</b>… ✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Line 225, Column 277: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …center></font></td></tr><tr><td width=5><input type=radio name=answer value="1… ✉
Line 225, Column 291: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …</td></tr><tr><td width=5><input type=radio name=answer value="1"></td><td><fo… ✉
Line 225, Column 302: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified …tr><td width=5><input type=radio name=answer value="1"></td><td><font face="Ve… ✉
Line 225, Column 323: end tag for "input" omitted, but OMITTAG NO was specified … type=radio name=answer value="1"></td><td&gt

Dreamweaver Spry Menu Not Working Properly

Hello,
I'm putting a horizontal spry menu bar into a table cell (I haven't had the time to learn how to use divs yet and tables have been working fine for me). I have 6 items in the menu with 2 or3 drop down menus for each one. When I view it in live view, when I roll over the menu items, the whole bar drops down to the left side and becomes vertical. Why is this happening? It is shorter than the table cell so that shouldn't be the problem. Thank you for your help.

Okay, this is crude, but it's as far as I got. Only some of the buttons cause the menu to move down. Please keep in mind that I am a designer, not a programmer. I'm learning, but am very weak when it comes to coding knowledge. Thanks.
http://littlechisel.com/Ideal_Window/

Horizontal Spry submenus not dropping

I created a horizontal spry menu for this site just as I have always done. but the dropdown submenus are not working. I have tried commenting out other "functional" pieces of code. I even put a spry meny into a blank document and uploaded it. I cannot figure out what I've done wrong. Any help would be great.
You can see the page at http://www.rimshotcreative.com/test/web.html
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rimshot Creative…Web Design, E-Commerce, Custom Web Development. Helping you find your groove.</title>
<link href="RC.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="wt-rotator.css"/>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
          font-family: Verdana, Geneva, sans-serif;
h4 {
          font-size: 40px;
          color: #FFF;
body,td,th {
          font-family: Verdana, Geneva, sans-serif;
h1 {
          color: #C00;
body {
          background-image: url(Images/Secondary-backgrounds_01.jpg);
          background-repeat: repeat-x;
</style>
</head>
<body>
<div class="container2">
<div class="Shadow">
<div class="header"><a href="default.html"><img src="Images/RC-header_03.jpg" width="401" height="83" alt="Rimshot Creative Logo - web design, print design, social networking, marketing, seo, printing, & photography"></a><img src="Images/RC-header_04.jpg" width="291" height="83" alt="Rimshot Creative - "><img src="Images/RC-header_05.jpg" alt="Rimshot Creative - Free Consultation, call now (615) 482-5182" width="324" height="83"></div>
<div class="main-image">
     <img src="Images/Exceptional-Design.png" width="631" height="293" alt="Exeptional Web Design"> </div>
<div class="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="default.html" title="Home Page">home</a>        </li>
      <li><a href="web.html" title="web services" class="MenuBarItemSubmenu">web services</a>
        <ul>
          <li><a href="web.html" title="web design services">web design</a></li>
          <li><a href="seo.html" title="search engine marketing">seo</a></li>
          <li><a href="social.html" title="social media consultation">social media</a></li>
          <li><a href="email.html" title="email marketing">email marketing</a></li>
          <li><a href="hosting.html" title="web/email hosting">hosting</a></li>
        </ul>
      </li>
      <li><a href="print.html" title="print design services" class="MenuBarItemSubmenu">print services</a>
        <ul>
          <li><a href="print.html" title="print design services">print design</a>            </li>
          <li><a href="printing.html" title="printing services">printing</a></li>
          <li><a href="marketing.html" title="marketing services">marketing</a></li>
        </ul>
      </li>
      <li><a href="photography.html" title="photography">photography</a></li>
      <li><a href="gallery.html" class="MenuBarItemSubmenu">galleries</a>
        <ul>
          <li><a href="web_gallery.html" title="See Some of the Web Sites We've Built">web gallery</a></li>
          <li><a href="print_gallery.html" title="See Some of Our Print Design Work">print gallery</a></li>
          <li><a href="photography_gallery.html" title="See Some of Our Photography">photo gallery</a></li>
        </ul>
      </li>
<li><a href="#" title="rimshot blog">blog</a></li>
<li><a href="resources.html" title="resources">resources</a></li>
<li><a href="testimonials.html" title="testimonials">testimonials</a></li>
    </ul>
</div>
    <div class="right_column">
      <p><a href="Contact Form.html"javascript:void( window.open('http://form.jotform.us/form/21766576593165', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))</a><img src="Images/Free-Consultation-Button.png" width="252" height="57" alt="Request a Free Consultation from Rimshot Creative"></a></a><a href="http://www.bnitennessee.com/tn-middle-tennessee-(nashville)-focused-around-business-succes s/"><img src="Images/proud-member-grey.jpg" width="131" height="131" alt="Proud Member of BNI Focused Around Business Success Chapter - Columbia TN"></a></p>
<p><a href="http://www.thumbtack.com/tn/brentwood/print-designers/#sort=popularity&hilite=3h88FmCa:V9o kA" title="Web & Print Design Services" style="background: url(http://cdn-1.thumbtackstatic.com/media/elite_1.png) no-repeat; color: #a5a196; padding: 195px 0 0; border:0; font-size: 13px; font-family: Georgia, 'Times New Roman', Times, serif; text-align: center; text-decoration: none; display: inline-block; width:120px; line-height:15px;"><img src="http://cdn-1.thumbtackstatic.com/media/elite_1.png" style="display: none;" />Web Design, Print Design, Photography, Brentwood, Columbia, Franklin, Spring Hill, TN</a><br />
      </p>
      <h2>Follow or Share…<br />
        <a href="http://www.facebook.com/pages/Rimshot-Creative/251035548260903" target="_new"><img src="Images/facebook button.png" width="32" height="32" alt="Follow Rimshot Creative on Facebook" longdesc="http://www.facebook.com/profile.php?id=100002963257842" /></a><a href="https://twitter.com/rimshotcreative" target="_new"><img src="Images/twitter button.png" width="32" height="32" alt="Follow Rimshot Creative on Twitter" longdesc="https://twitter.com/#!/belleforest" /></a><a href="http://www.linkedin.com/in/rimshotwebdesign" target="_new"><img src="Images/linkedin.png" width="32" height="32" alt="Join Rimshot Creative on Linked In"></a><a href="http://pinterest.com/rimshotcreative/" target="_new"><img src="Images/pinterest.png" width="32" height="32" alt="Start Pinning with Rimshot Creative on Pinterest"></a><a href="https://plus.google.com/101386322992063777741/posts" target="_new"><img src="Images/googleplus.png" width="32" height="32" alt="Join Rimshot Creative's circle on Google Plus"></a><a href="http://youtu.be/75_xggIkLyk?hd=1" target="_new"><img src="Images/YouTube button.png" width="32" height="32" alt="Check out Rimshot Creative videos on YouTube"></a>
        <p>
          <a href="https://plus.google.com/106267434027606674910/about?gl=US&hl=en-US" target="_new"><img src="Images/Google-Review-Button-No-Shadow.png" width="188" height="47" alt="Leave a review for Rimshot Creative on Google Places" /></a>
        <a href="http://local.yahoo.com/info-14947707"><img src="Images/Yahoo-Review-Button-No-Shadow.png" width="188" height="47" alt="Leave a review for Rimshot Creative on Yahoo Local" /></a></h2>
      <p>Rimshot Creative helps businesses find their groove through web design, print design, social networking, marketing, search engine optimization, printing, web and email hosting and photography in Nashville, Brentwood, Franklin, Thompsons Station, Spring Hill, Columbia, Mount Pleasant, Lewisberg, Hoenwald, Hampshire and all over Middle Tennessee.<br>
        <br>
      </p>
      <hr size="1">
      <p><strong><br>
        Rimshot Creative</strong><br>
      3313 Booker Farm Road<br>
      Mount Pleasant, TN 38474<br>
      Phone: (615) 482-5182<br>
      Fax:
      (615) 752-5956<br>
      <br>
      </p>
    </div>
    <div class="left_column">
      <h1> Get Your Groove On!</h1>
<p>Helping businesses find their groove is exactly what we try to do every day.</p>
      <h2>Layout</h2>
      <p>Since this is a one-column layout, the .content is not floated. </p>
      <h3>Logo Replacement</h3>
      <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
      <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
      <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    </div>
    <div class="footer">
      <p>Footer</p>
      </div>
      </div>
      
</div>
<div class="addthis_bar addthis_bar_vertical addthis_bar_medium" style="top:200px;left:25px;">
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script>

Thanks for your help.
It is not even on my local files. I would have thought that Dreamweaver would have created that in my local files. I can copy it over from one of my other sites.
1. Do you have any idea why it would not have been created?
2. What would be a way to resolve this if I didn't have this file on some of my other sites?
3. How did you determin that the file was not found on the server. I haven't seen any errors with any of the tools that I've used to analyse the site.

Spry Menu Not Working in IE9

Hey, I'm still pretty new to webdesign and this is my first time using the sprymenu on Adobe Dreamweaver CS5.5. I'm using a vertical spry menu and it seems to work fine in Chrome and Firefox but everytime I use it in IE9, I'm prompted first about ActiveX and one of two things happen if I allow "blocked content" or don't allow. When allowing blocked content, my vertical spry menu turns all white and you can not see any of the under images. If you roll over it, the rollover images with text do however show up. As well as the submenus seem to do the same and actually work to some extent. When not allowing blocked content, rollovers and under images display perfectly fine but the submenus no longer show to the right of the parent menus. They don't show at all in general after that. I have been messing around with the css for the spry menu trying to figure out some fix but haven't come across anything similar to my problem after searching hours on end. Any help would appreciated. Below is the code for the vertical spry menu. Thanks!
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 16px;
          cursor: default;
          width: 200px;
          background-image: url(../Images/mnunder.png);
          height: 50px;
          font-family: "MS Serif", "New York", serif;
          font-style: normal;
          line-height: 10px;
          color: #FFF;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 200px;
          height: 50px;
          background-image: url(../Images/mnunder.png);
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
          margin: -5% 0 0 95%;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: absolute;
          z-index: 1020;
          cursor: default;
          width: 200px;
          left: -1000em;
          top: 0;
          background-image:url(../Images/mnover.png)
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
          left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
          width: 200px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
          border: 1px solid #333;
          color: #FFF;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
          border: 1px solid #333;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
          display: block;
          cursor: pointer;
          color: #FFF;
          text-decoration: none;
          height: auto;
          width: 200px;
          background-image: url(../Images/mnunder.png)
          background-repeat: no-repeat;
          padding: 0px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
          color: #F00;
          height: 50px;
          width: 200px;
          background-image: url(../Images/mnover.png);
          background-repeat: no-repeat;
          padding: 0px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
          color: #F00;
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.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
                    display:inline;
                    f\loat: left;
                    background: #FFF;

altruistic gramps wrote:
It is up to you, you could remove the counter; personally I would leave it there because once the focus has moved from the text area, the number of (remaining) words will show.
Another solution is to force IE8 standards document mode as in
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<title>My webpage</title>
</head>
The problem with the above is that the rendering will also follow IE8 mode.
Gramps
Thanks for your help,
I used the meta tag to emulate IE8 and it works as needed.

Dreamweaver Spry Menu not working on I pad

Hi
I have built a website and currently have issues with the spry menu bar not working with the ipad i phones etc.
When you press the link the dropdown menu does not appear.
Any help would be greatly appreciated.
The website is www.jkwindowsanddoors.co.uk and the link is the products in the spry menu bar.
Many Thanks

The Spry menu system was created prior to the advance of touch screens. The action that causes the Spry sub-menu to appear is the hover event, an event that does not exist in touch screen technology.
What I am trying to say is that the Spry menu system cannot be used for touch screens. You are better off using pure CSS menus or jQuery menus.

Spry Menu not positioned correctly in IE

I've search for a answer to this and it seems to be common but there has been no solution to be found. I have a spry horizontal menu that in FireFox, Safari and Opera opens and functions fine. In IE the menu buttons are in the correct place but the dropdowns are at the top of the screen. The virtical position is correct but the horizontal position is obviously off. I tried to keep the spry code as original as possible and have only altered the css to change font sizes and bkg colors.
Another issue I can't seem to solve is the font sizes for the sub menus. I would like the main buttons to be in bold and every sub menu that opens below to be in a normal font. No matter what I change in the CSS I can't get the fonts to go to normal w/o it altering the fonts in the button above. I hope this make sence. Here is the CSS code I'm working with.
@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: 17px;
    cursor: default;
    width: 800px;
/* 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 this controls the main menu bar */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 17px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 160px;
    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: -5% 0 0 20%;
    padding: 0;
    list-style-type: none;
    font-size: 10px;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    font-weight: normal;
/* 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: #000000;
    color: #FFFFFF;
    text-decoration: none;
    width: 162px;
    font-style: oblique;
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
/* 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: #666666;
    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: #999999;
    color: #FFF;
/*My Menu bar test css*/
ul.testtext
    color:#006699;
    font-size:12px;
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;

Because you have centered the menu items you need to take special care not to upset the apple cart.
To center the menu items properly have a look here: http://foundationphp.com/tutorials/sprymenu/centering.php and while you are at it have a look at customizing a Spry menu as well.
After you have done that and made the appropriate chenges, please return here with further questions.
Ben

Spry Menu not displaying correctly in IE

Can someone take a look at the following link and tell me why
the spry menu isn't displaying correctly in IE?
http://www.cedarcrossings.com/dev
It's working fine in Safari, Firefox, Opera, Camino, etc.,
but for some reason the sub-menus won't drop below the headings in
IE.
Thanks in advance.

I had the same problem and finally just gave up on the Spry
menu and went with a license from Milonic.com.

Spry menu not displaying properly in IE8

Right up front, I'm new to Spry.
I built a flyout menu, nothing fancy just standard.
Works and looks fine in Firefox, Opera, Safari. But IE 8 on a PC the first items are "running together and the "twisty >" is under the text.
Are there any known issues I need to be aware of when using Spry menus in IE?
Thanks for any comments or suggestions.
Steve

Yes you're right code would help. I took the smallest page and pasted in the code below. I have bolded the spry menu itself. I'm going to create another menu on a new page from scratch and without any og the other pieces of the page and see if it works in IE8
anothe page with the same munu is at:
http://davidwrightlandscape,com/index2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>David H Wright - Landscape Architect</title>
<style type="text/css" media="all">

</style>
<style type="text/css" media="print">

</style>
<script type="text/javascript" src="CSSMenuWriter/cssmw/menu.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css" media="all">

</style>

<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerWrapper">
<div id="header">
    <p align="center"><img src="images/DaveWright-logo-WEB.jpg" width="345" height="220" alt="Logo" /><img src="images/DSC_0076.jpg" width="416" height="220" alt="Lindsey OverHead - 076" /><br />
    </p>
PO Box 100 - Branchville, NJ 07826 - Phone 973-948-2090 - Fax 973-948-2083 </div>
<div></div>
    <img src="images/Servicebanner2-small.jpg" alt="" width="961" height="30" border="0" usemap="#Map1">
<map name="Map1" id="Map1">
    <area shape="rect" coords="189,4,380,27" href="firm.html" alt="Firm Information">
         <area shape="rect" coords="61,2,154,27" href="index.html" alt="Return Home">
    <area shape="rect" coords="401,5,532,26" href="portfolio.html" alt="portfolio">
    <area shape="rect" coords="553,5,723,26" href="site.html" alt="Site Amenities">
    <area shape="rect" coords="754,5,903,27" href="contactus.html" alt="Contact Us">
</map>
<div id="contentWrapper">
    <div id="content">
      <h1 align="center"><img alt="" name="Image1" width="220" height="100" id="Image1" /><img src="" alt="" width="220" height="100" id="Image2" /><img src="" alt="" width="220" height="100" id="Image3" /><img src="" alt="" width="220" height="100" id="Image4" /></h1>
<h1><br />
Plantings Selection and Examples</h1>
<p> </p>
<p align="center"><img src="" alt="" width="920" height="500" id="Planting_collage" /></p>
    </div>
</div>
<div id="footer">
      <div><span class="parent"><a href="#"><img src="images/DaveWright-logo-FOOTER.jpg" alt="David Wright Landscaping" width="120" height="61" align="left" id="logo" style="background-color: #009966;" /></a></span>
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="index.html">HOME</a>          </li>
          <li><a href="firm.html" class="MenuBarItemSubmenu">FIRM INFORMATION</a>
            <ul>
              <li><a href="aboutus.html">About Us</a></li>
              <li><a href="services.html" class="MenuBarItemSubmenu">Services</a>
                <ul>
                  <li><a href="design.html">Design</a></li>
                  <li><a href="installation.html">Installation</a></li>
                  <li><a href="gardeningservices.html">Gardening Services</a></li>
                  <li><a href="siteplanning.html">Site Planning</a></li>
                </ul>
              </li>
              <li><a href="news.html">News</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="portfolio.html">PORTFOLIO</a>
            <ul>
              <li><a href="residential.html">Residential</a>              </li>
              <li><a href="public.html">Public</a></li>
              <li><a href="display.html">Display Gardens</a></li>
            </ul>
          </li>
          <li><a href="site.html" class="MenuBarItemSubmenu">SITE AMENITIES</a>
            <ul>
              <li><a href="plantings.html">Plantings</a></li>
              <li><a href="hardscape.html">Hardscapes</a></li>
              <li><a href="water.html">Water</a></li>
              <li><a href="furnishings.html">Furnishings</a></li>
            </ul>
          </li>
          <li class="MenuBarVertical"><a href="contactus.html">CONTACT US</a></li>
        </ul>
    </div>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 2}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 2}); }, true); }</script>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Menu not showing in earlier version of IE

I am new to web design and recently put in a spry menu for a
website that worked fine on Safari. However, it disappears in
earlier versions of Internet Explorer and instead just shows a
white box where the menu originally was. Any clues?
Sean David

kinda hard to say, with out a link, or markup posted
;)

Why is my drop down spry menu not working any more please?

Hi all.
I created this template and tested it in Firefox not so long ago and the drop down menu was fully operational. Today, however, is a different story. I am pasting the codes below for some please as to where it has gone wrong and thanks for any assistance:
Here is the site map:
Here is the code pasted from Dreamweaver CS4:
<!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>STUDENTS HUB HOME PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="file:///m33r4/Documents/templates/Templates/mm_spa.css" type="text/css" />
<meta name="keywords" content="Studentshub, STUDENTSHUB, Students Hub, students hub, student accommodation, student houseshare, student work, student volunteer, student rent,derbyshire, nottinghashire, leicestershire, estate agents, nhs direct, GUM, GUM clinic, students, derbyshire, nottinghamshire, leicestershire, study, universities, colleges, part time, full time, derby work, nottinghamshire work, derbyshire work, leicester work, leicestershire work, book exchange, used books, studying in derbyshire, studying in nottinghamshire, studying in leicestership, student loans, student travel, work abroad, meera lynn, meera shahisa, krishna, yoga, language classes, charities, hall hire, weddings, hanuman, geeta bhawan, geeta, bhawan, meera shah, meera, shah" />
<meta name="description" content="Welcome to the Students Hub, UK" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p><img src="logobanner5.jpg" width="853" height="150" /></p>
<p><br />
</p>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">STUDY</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">UNIVERSITIES</a>
        <ul>
          <li><a href="#">DERBYSHIRE</a></li>
          <li><a href="#">NOTTINGHAMSHIRE</a></li>
          <li><a href="#">LEICESTERSHIRE</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">COLLEGES</a>
        <ul>
          <li><a href="#">DERBYSHIRE</a></li>
          <li><a href="#">NOTTINGHAMSHIRE</a></li>
          <li><a href="#">LEICESTERSHIRE</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">FULL TIME</a>
        <ul>
          <li><a href="#">DERBYSHIRE</a></li>
          <li><a href="#">NOTTINGHAMSHIRE</a></li>
          <li><a href="#">LEICESTERSHIRE</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">PART TIME</a>
        <ul>
          <li><a href="#">DERBYSHIRE</a></li>
          <li><a href="#">NOTTINGHAMSHIRE</a></li>
          <li><a href="#">LEICESTERSHIRE</a></li>
        </ul>
      </li>
    </ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">LIVE</a>
    <ul>
      <li><a href="#">CAMPUS</a>      </li>
      <li><a href="#">HOUSE SHARE</a></li>
      <li><a href="#">RENT</a></li>
      <li><a href="#">BUY</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">WORK</a>
    <ul>
      <li><a href="#">EMPLOYMENT AGENCIES</a></li>
      <li><a href="#">PART TIME</a></li>
      <li><a href="#">VOLUNTEERING</a></li>
      <li><a href="#">WORK ABROAD</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">TRAVEL</a>
    <ul>
<li><a href="#">BUS</a></li>
      <li><a href="#">TRAIN</a></li>
      <li><a href="#">COACH</a></li>
      <li><a href="#">FLIGHTS</a></li>
      <li><a href="#">CYCLE</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">FUN</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">NIGHTS OUT</a>
        <ul>
          <li><a href="#">PUBS</a></li>
          <li><a href="#">CLUBS</a></li>
          <li><a href="#">SHOWS</a></li>
          <li><a href="#">CINEMAS</a></li>
          <li><a href="#">OTHER</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">DAYS OUT</a>
        <ul>
          <li><a href="#">EATING OUT</a></li>
          <li><a href="#">LEISURE</a></li>
          <li><a href="#">SHOWS</a></li>
          <li><a href="#">CINEMAS</a></li>
          <li><a href="#">OTHER</a></li>
        </ul>
      </li>
      <li><a href="#">GROUP OUTINGS</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">HOLIDAYS</a>
        <ul>
          <li><a href="#">UK </a></li>
          <li><a href="#">ABROAD</a></li>
        </ul>
      </li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">SHOPPING</a>
    <ul>
      <li><a href="#">DERBYSHIRE</a></li>
      <li><a href="#">NOTTINGHAMSHIRE</a></li>
      <li><a href="#">LEICESTERSHIRE</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">BOOKS</a>
    <ul>
      <li><a href="#">BOOKSHOPS</a></li>
      <li><a href="#">USED BOOKS</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">HEALTH</a>
    <ul>
      <li><a href="#">NHS DIRECT</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">HOSPITALS</a>
        <ul>
          <li><a href="#">DERBYSHIRE</a></li>
          <li><a href="#">NOTTINGHAMSHIRE</a></li>
          <li><a href="#">LEICESTERSHIRE</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">WALK IN CLINICS</a>
        <ul>
          <li><a href="#">DERBYSHIRE</a></li>
          <li><a href="#">NOTTINGHASHIRE</a></li>
          <li><a href="#">LEICESTERSHIRE</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">GUM CLINICS</a>
        <ul>
          <li><a href="#">DERBYSHIRE</a></li>
          <li><a href="#">NOTTINGHAMSHIRE</a></li>
          <li><a href="#">LEICESTERSHIRE</a></li>
        </ul>
      </li>
    </ul>
</li>
</ul>
<p> <br />
</p>
<p> </p>
<div class="NAVI BAR"> </div>
<p> </p>

<table width="868" border="1">
<tr>
    <td width="150" height="190"> </td>
    <td width="539"> </td>
    <td width="150"> </td>
</tr>
</table>
<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>
<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>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

<table width="853" border="0">
<tr bgcolor="#95B8F8">
    <td width="150" align="left" valign="top"><h5><img src="html/logo.jpg/logo2.jpg" width="150" height="64" /></h5></td>
    <td width="539" height="10" align="left" valign="top" bgcolor="#95B8F8"><h5>Disclaimer: Studentshub is a platform for listing services as advertised/promoted by the Companies and individuals concerned. Studentshub does not endorse any of the contents on this site. Studentshub accepts no responsibility for any arrangements, purchase, contracts, agreements, refunds, failure to deliver services etc between individuals, landlords, clubs, organisations, companies etc. This does not affect your statutory rights (2009)</h5></td>
    <td width="150" align="left" valign="top"><h5>Contact: <a href="mailto:[email protected]">All enquiries</a></h5></td>
</tr>
</table>
<script type="text/javascript">

</script>
</body>
</html>
Many thanks again.

When you say, "tested" your Template in FireFox, did you cast a child page from the Template or just try to see the Template in FireFox?
Templates do not customarily show well on their own in Browsers; their child pages should be fine.
I see that one of your CSS files is using a local link to your hard drive. You will want to fix that. It may be that saving the Template again will update your child page.
Other than that, make sure ALL the auxiliary files are uploaded to your server. If the menubar works locally but not remotely, it is usually because the files are not there for the page to find them.
If you have a URL to your site, we can look at the files as they attempt to work with each other.
Beth

Javascript drop-down Spry menu not working

I downloaded the Spry UI 1.7 menu bar from the widget browser and pasted the code into DW CS4. I could not place it as you can in CS5. DW throws up javascript errors, but the styled menu bar works in live view and in the testing environment on Firefox and IE6 (!). However, once I load it, it does not work. It appears as if the browser can't find the javascript or the styles. I've pasted the styles in my main style sheet and in the referenced sheet at: Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css. I've verified that the Spry-UI-1.7 folder is loaded and contains all the relevant files.
Any idea what I'm doing wrong? I've been working on this on and off for two days.
Here is the live page:
http://www.wengerfeeds.com/test/test2.html
Code
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryWidget.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/SpryMenu.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
<script type="text/javascript" src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
<script type="text/javascript">
</script>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="nav"> <ul id="MenuBar">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a>
<ul>
<li><a href="history.html">History</a></li>
<li><a href="mission.html">Mission</a></li>
<li><a href="sustainability.html">Sustainability</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="millogram.html">Newsletter</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</li>
<li><a href="products.html">Products</a>
<ul>
<li><a href="feed.html">Feed</a>
<ul>
<li><a href="layers.html">Layer Feed</a></li>
<li><a href="broilers.html">Broiler Feed</a></li>
<li><a href="swine.html">Swine Feed</a></li>
<li><a href="turkey.html">Turkey Feed</a></li>
<li><a href="specialty.html">Specialty Feed</a></li>
</ul>
    </li>
<li><a href="soychoice.html">SoyChoiceTM</a></li>
<li><a href="soyoil.html">Soy Oil</a></li>
<li><a href="eggs.html">Eggs</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</li>
<li><a href="services.html">Services</a>
<ul>
<li><a href="eggmarketing.html">Egg Marketing Services</a></li>
<li><a href="flock.html">Flock & Pullet Services</a></li>
<li><a href="lab.html">Laboratory Services</a></li>
<li><a href="hauling.html">Hauling & Warehousing</a></li>
<li><a href="booking.html">Purchasing & Booking</a></li>
<li><a href="http://www.wengerfeeds.wordpress.com">Knowledge Center</a></li>
<li><a href="grain.html">Grain Receiving</a></li>
</ul>
</li>
<li><a href="http://www.wengerfeeds.info">Markets</a></li>
<li><a href="opps.html">Opportunities</a>
<ul>
<li><a href="careers.html">Career</a></li>
<li><a href="contracts.html">Contracts</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarRightShrink",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
</script></div>

Thanks, Gary. Thanks for the reply. I appreciate it.
It felt like it wasn't finding the js, but I didn't know why. It turns out my host didn't like the folder name. When you download the folder for the Spry 2.0 menu from the widget browser, all your js and css is stored in a folder named "Spry-UI-1.7." The menu worked locally, but once I loaded it, my server didn't like the folder name. I renamed the folder "Spry" and reset the paths, and it worked. I'm posting this here in case anyone else has this problem. Cheers

Spry menu not dropping straight now in IE

Similar Messages

Maybe you are looking for