Spry horizontal menu becomes vertical menu
In IE my spry horizontal menu becomes vertical but is
stretched to the same width as the horizontal menu is suppose to
be? Any ideas?
If horizontal is turning vertical, I have a feeling what is happening is that when you publish it, it's not connected to any style sheet -- or you have the style sheets in the wrong order.
Remember, with CSS (Cascading Style Sheets) the last stylesheet trumps the earlier one. That's perfectly OK if there are no conflicts, but there may be some that can cause problems.
Thus, you'd be looking for:
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="navigation.css" rel="stylesheet" type="text/css">
If navigation.css is first, styles.css may be rewriting your styles for your spry navigation.
Now, I'm going to throw you a curve. Spry has been discontinued and it "going away." I recommend you learn how to make your own navigation and Spry is usually used for drop-down navigation. You can do that in straight HTML and CSS.
Take a look at my last reply in this forum discussion for a bunch of pretty cool "do it yourself" navigation tutorials.
Similar Messages
-
I am using spry to create two vertical menu bars on the same
page. But I want to apply different style and colour to each of
them. If I change anything on the Spry menubar vertical CSS, it
applies to all the menu bars items on the page. Do I need to create
another CSS, but how to link it to the second menu bar? I am a new
user of CS3, would appreciate any help on this. Thanks.
W. ChuiHi Danilo, thank you for your response. I tried, but it
didn't work. I am not sure if I have done something wrong. Here is
SpryMenuVertical ccs I have changed according to my understanding
of your reply. I have spent 2 days trying to figure it out... I
hope you can help me. Thanks.
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
cursor: default;
width: 150px;
ul.MenuBarVertical2
margin: 0;
padding: 0;
list-style-type: none;
cursor: default;
width: 150px;
/* 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: 11px;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
ul.MenuBarVertical2 li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* 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: 0% 0 0 113%;
padding: 0;
list-style-type: none;
font-size: 11px;
position: absolute;
z-index: 1020;
cursor: default;
width: 150px;
left: -1000em;
top: 0;
ul.MenuBarVertical2 ul
margin: 0% 0 0 113%;
padding: 0;
list-style-type: none;
font-size: 11px;
position: absolute;
z-index: 1020;
cursor: default;
width: 150px;
left: -1000em;
top: 0;
/* 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;
ul.MenuBarVertical2 ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 150px;
ul.MenuBarVertical2 ul li
width: 150px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
ul.MenuBarVertical2
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #999933;
ul.MenuBarVertical2 ul
border: 1px solid #FF9900;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #666600;
text-decoration: none;
ul.MenuBarVertical2 a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #FF9900;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #999933;
color: #FFF;
background-image: none;
ul.MenuBarVertical2 a:hover, ul.MenuBarVertical a:focus
background-color: #FF9900;
color: #FFF;
background-image: none;
/* 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
background-color: #999933;
color: #EEE;
ul.MenuBarVertical2 a.MenuBarItemHover, ul.MenuBarVertical2
a.MenuBarItemSubmenuHover, ul.MenuBarVertical2
a.MenuBarSubmenuVisible
background-color: #FF9900;
color: #EEE;
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: 90% 50%;
height: auto;
width: 150px;
ul.MenuBarVertical2 a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 90% 50%;
height: auto;
width: 150px;
/* 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: 90% 50%;
ul.MenuBarVertical2 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 90% 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;
/* 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; -
My spry horizontal menu bar is now displaying vertical. How do I fix it?
My horizontal spry menu bar displays correctly at http://www.matthewvandyke.com/ar/photos/ but displays vertical at http://www.matthewvandyke.com/ar/about.html. It started doing this a few days ago and I am not sure why.
Can anyone take a look at this code and tell me why this would be happening?
Here is the code:
about.html
(the relevant code from this page)
<div id="topNavigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="الصفحة" _mce_href="http://www.matthewvandyke.com/ar/">الصفحة">http://www.matthewvandyke.com/ar/"> الصفحة الرئيسية</a></li>
<li><a href="حول" _mce_href="http://www.matthewvandyke.com/about.html">حول">http://www.matthewvandyke.com/a bout.html">حول ماثيو فاندايك</a></li>
<li><a href="الكتابhttp://www.matthewvandyke.com/book.html">الكتاب</a></li>
<li><a href="الفيلمhttp://www.matthewvandyke.com/film.html">الفيلم</a></li>
<li><a href="مقاتل" _mce_href="http://www.matthewvandyke.com/about.html#freedom-fighter">مقاتل">http://www.ma tthewvandyke.com/about.html#freedom-fighter">مقاتل الحرية</a></li>
<li><a href="مغامراتhttp://www.matthewvandyke.com/about.html#adventures">مغامرات</a></li>
<li><a href="تحليلاتhttp://www.matthewvandyke.com/analyst.html">تحليلات</a></li>
<li><a href="الحقائقhttp://www.matthewvandyke.com/the-facts.html">الحقائق</a></li>
<li><a href="الصورhttp://www.matthewvandyke.com/ar/photos/">الصور</a></li>
<li><a href="الفيديوhttp://www.matthewvandyke.com/video/">الفيديو</a></li>
<li><a href="المدونةhttp://www.matthewvandyke.com/blog/">المدونة</a></li>
<li><a href="الصحافةhttp://www.matthewvandyke.com/press.html">الصحافة</a></li>
<li><a href="الأحداث" _mce_href="http://www.matthewvandyke.com/events/">الأحداث">http://www.matthewvandyke.com/ events/">الأحداث والمناسبات</a></li>
<li><a href="الرعاةhttp://www.matthewvandyke.com/sponsors/">الرعاة</a></li>
<li><a href="وسائل" _mce_href="http://www.matthewvandyke.com/social-media.html">وسائل">http://www.matthewvand yke.com/social-media.html">وسائل الإعلام الاجتماعية</a></li>
</ul>
</div>
SpryMenuBarHorizontal.css
@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: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0 .15em;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
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: auto;
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
display: block;
float: none;
width: auto;
white-space: nowrap;
/* 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;
padding: 0.4em 0.15em;
color: #FFFFFF;
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: #d6c7a6;
color: #000;
/* 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: #d6c7a6;
color: #000;
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%;
padding: 0.4em 0.15em;
/* 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;
SpryMenuBar.js
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];I have not seen your error in either my IE or my chrome. I do note that you are using a "strict" Document Type Declaration.
You might try a transitional DTD, which should be more forgiving than the strict:
<!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">
Other than that, I don't see anything particular (because I don't see the error, either) that would cause the menu to drop vertically instead of horizontally.
Beth -
SPRY DROP DOWN (VERTICAL) MENU SHOWING HORIZONTALLY IN IE8
Hi guys,
im having hard time figuring out how to fix my spry drop down menu on IE8. when rolled over, it lines up horizontally instead of vertically. please check the site:
http://www.rebeccabrooksphotography.com/ and roll over the A bit about and Galleries.
hope you experts can help me. please!
here's the HTML 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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>Rebecca Brooks Photography</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="A Community Based WordPress Theme" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/hoverintent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!-- Start Of Script Generated By WP-PageNavi 2.40 -->
<link rel="stylesheet" href="pagenavi-css.css" type="text/css" media="screen" />
<!-- End Of Script Generated By WP-PageNavi 2.40 -->
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div class="rss"></div>
<div id="header">
<div class="logo">
<h1><a href="#" title="TemplateAccess Theme">A TemplateAccess.com Theme</a></h1>
</div>
<div class="topnav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a></li>
<li><a href="aboutme.html" class="MenuBarItemSubmenu">A bit about</a>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Your Shoot</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Galleries</a>
<ul>
<li><a href="#">Hello World</a></li>
<li><a href="#">Little & then no so</a></li>
<li><a href="#">Family</a></li>
<li><a href="#">The Look of Love</a></li>
<li><a href="#">My Wanderlust</a></li>
</ul>
</li>
<li><a href="#">Client Viewing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<!--/header -->
<div class="body2">
<div class="header_text">
<div id="slider">
<!-- start slideshow -->
<div id="slideshow">
<div class="slider-item"><a href="#"><img src="images/simple_img_1.jpg" alt="screen 1" width="920" height="374" /></a></div>
<div class="slider-item"><a href="#"><img src="images/simple_img_2.jpg" alt="screen 2" width="920" height="374" /></a></div>
<div class="slider-item"><a href="#"><img src="images/simple_img_3.jpg" alt="screen 3" width="920" height="374" /></a></div>
<div class="slider-item"><a href="#"><img src="images/simple_img_4.jpg" alt="screen 4" width="920" height="374" /></a></div>
<div class="slider-item"><a href="#"><img src="images/simple_img_5.jpg" alt="screen 5" width="920" height="374" /></a></div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="clr"></div>
</div>
<!--/body -->
</div>
<!--/page -->
<div id="page-bot">
<div class="bloog">
<p>© Rebecca Brooks Photography. All Rights Reserved.</p>
</div>
<div class="clr"></div>
</div>
<!--/page-bot -->
<div id="footer">
<div class="footer_resize">
<div class="fr"><strong><br />
</strong></div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<!--/footer -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
========
here's the css file:
@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: 0px;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #454545;
/* 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: #454545;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 11px;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-color: #454545;
font-family: Arial, Helvetica, sans-serif;
word-spacing: normal;
letter-spacing: 0px;
color: #454545;
height: auto;
clear: none;
/* 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;
background-color: #454545;
/* 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;
background-color: #454545;
width: auto;
float: left;
list-style-type: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 11px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 140px;
background-color: #454545;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 95%;
background-color: #454545;
/* 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: 0px;
width: auto;
background-color: #454545;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
background-color: #454545;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #454545;
color: #CCC;
text-decoration: none;
padding-top: 2px;
padding-right: 13px;
padding-bottom: 2px;
padding-left: 13px;
/* 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: #454545;
color: #FFF;
font-size: 11px;
/* 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: #454545;
color: #FFF;
float: none;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #454545;
font-size: 11px;
/* 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: none;
background-repeat: no-repeat;
background-position: 95% 50%;
width: auto;
background-color: #454545;
font-size: 11px;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #454545;
font-size: 11px;
/* 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: none;
background-repeat: no-repeat;
background-position: 95% 50%;
font-size: 0px;
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;
.MenuBarItemSubmenu ul li {font-size:11px;}Add the following styling to your document, making sure that this comes after the menubar styling that you have already got inplace.
ul.MenuBarHorizontal ul li {
display: block;
float: none !important;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
Gramps -
Spry Horizontal Menu is Vertical
I installed a Spry Horizontal Menu Bar on one of my clients
web pages and everything was going fine.
But then all of a sudden the horizontal menu switched to
vertical and I can't figure out how to undo this.
At this point even when I ask DW to insert a Spry horizontal
menu bar onto a new page, it inserts a vertical one!
Did I mess up the .css somehow?
Thanks!
Greg in New OrleansTry making one on a fresh page. When you select the Spry
Menu, you are
asked if it's vertical or horizontal and then tells you it
will copy files
and you click okay.
Does your page use the SpryHorizontalMenu.css page? Could you
maybe be
using the wrong one?
If you still can't get it, could you post a link to your
page?
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"geeceeart" <[email protected]> wrote in
message
news:fno5i8$1i6$[email protected]..
>
> I installed a Spry Horizontal Menu Bar on one of my
clients web pages and
> everything was going fine.
> But then all of a sudden the horizontal menu switched to
vertical and I
> can't
> figure out how to undo this.
> At this point even when I ask DW to insert a Spry
horizontal menu bar onto
> a
> new page, it inserts a vertical one!
> Did I mess up the .css somehow?
> Thanks!
> Greg in New Orleans
> -
Navigation in Spry Vertical menu is horizontal at bottom of page in IE8
My vertical menu appears correctly in Firefox and Safari but when I checked it from Internte Explorer 8 on a PC it doesn't show up in the left column as it's supposed to; instead it shows up horizontally at the bottom of the content area, just above the footer. Here's a link: http://www.tabardtheatre.org/aboutUs.html .
Is there a hack I can use to correct this?Hope this from the Chrome forum helps.
http://www.google.com/support/forum/p/Chrome/thread?tid=6d78452432a4c4d7&hl=en -
Spry Horizontal Menu Bar not working in IE
Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.comHi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@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: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 14em;
float: left;
border-color: white;
border-left-style: solid;
border-left-width: 1px;
border-right-style: none;
border-right-width: 1px;
/* 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: 14em;
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: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 99%;
/* 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.9em 0.75em;
color: white;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, Verdana, sans-serif;
text-decoration: none;
color: white;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #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: 10px 85%;
/* 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
b/ackground-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 10px 85%;
/* 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
b/ackground-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;
/* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know. -
Background images with spry "horizontal menu"
hi again
I am trying to work with the spry: "horizontal menu"
I want to put some background images into the menu bar not into the submenu
and that is the problem: the background images appears overall
what can I do ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
-->
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a href="#" class="MenuBarHorizontal">heija</a> </li>
<li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
and css
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 100px;
float: left;
height: 10px;
/* 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: 100px;
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: 100px;
height: 30px;
/* 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: #FEF3E4;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
background-repeat: no-repeat;
background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FF0;
/* 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: #FEF3E4;
color: #FF0;
background-image: url(../rot.jpg);
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-color: #FEF3E4;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
color: #FF0;
/* 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-color: #F99;
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;Complete page and css code below (scroll down)
All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
/* 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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
Here is the code and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<style type="text/css">
<!--
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
-->
</style>
<style>
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 100px;
float: left;
height: 10px;
/* 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: 100px;
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: 100px;
height: 30px;
/* 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: #FEF3E4;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
background-repeat: no-repeat;
background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FF0;
/* 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: #FEF3E4;
color: #FF0;
background-image: url(../rot.jpg);
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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
color: #FF0;
/* 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-color: #F99;
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);
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a href="#" class="MenuBarHorizontal">heija</a> </li>
<li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html> -
Spry Horizontal Menu Submenus Won't Appear - Help
OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@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: auto; padding: 0; list-style-type: none; font-family: "Times New Roman", Times, serif; font-size: medium; font-weight: bold; cursor: default; width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: center; cursor: pointer; width: 108px; 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 0 0 50%; padding: 0; list-style-type: none; font-size: 80%; z-index: 1020; cursor: default; width: 108px; float: none; 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: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; z-index:1030; } /* 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: none; top: 0; z-index:1040; } /******************************************************************************* 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: 5px 5px; color: #FEFEFE; 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: #323232; color: #FEFEFE; } /* 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: #323232; color: #FEFEFE; } /******************************************************************************* 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; } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body { font-family: Verdana, Geneva, sans-serif; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ } .twoColFixLtHdr #container { width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */ border: 2px solid #000; text-align: left; /* this overrides the text-align: center on the body element. */ } .twoColFixLtHdr #header { padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ border: 0px solid #000; } .twoColFixLtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColFixLtHdr #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 200px; font-size:12px; color:#FEFEFE; background: #000; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000; border-right-color: #660000; border-bottom-color: #000; border-left-color: #000; padding-top: 1px; padding-right: 0px; padding-bottom: 1px; padding-left: 1px; } .twoColFixLtHdr #mainContent { margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ background:#660000; } .twoColFixLtHdr #videomainContent { margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ background: #323232; padding-left:100px } .twoColFixLtHdr #singleframe { background: #323232; } .twoColFixLtHdr #footer { padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ font-size:12px; color:#FEFEFE; background:#000; border: 1px solid #000; } .twoColFixLtHdr #footer p { margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover { text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{ color:#4C0000;} .w1{font-size:14px; color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{ float: left; /* since this element is floated, a width must be given */ width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 0px 0px 0px 0px; } .b{font-size:12px; color:#000000; } .topbtmmargin { margin-top: 20px; margin-bottom: 20px; } .SidebarPadding { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } .FrontImage { border: 5px ridge #323232; float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 0px; } .FrontImageFltRgt { border: 5px ridge #323232; float: right; margin-left: 10px; margin-bottom: 10px; margin-top: 20px; } .mapRgt { float: right; padding-left: 5px; padding-bottom: 10px; border: none; } .sigRgt { float: right; padding-left: 5px; margin-right: 60px; padding-bottom: 10px; margin-top: 10px; } .textfntrgtcol { padding-left: 200px; font-size:12px; color:#000000; } .textfntlftcol { padding-right: 210px; font-size:12px; color:#000000; } .twoColFixLtHdr #container #mainContent ul li { list-style-type: none; list-style-position: outside; list-style-image: url(images/blackbullet.gif); } .leftpicture { border: 5px ridge #323232; position: absolute; z-index: 20; height: 140px; width: 180px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 210px; left: 150px; top: 326px; } img { border-style: none; } .grooveimg { border: groove; } #apDiv1 { position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px; visibility: visible; } #apDiv2 { position:absolute; width:155px; height:123px; z-index:2; left: 5px; top: 4px; visibility: visible; } #apDiv3 { position:absolute; width:335px; height:122px; z-index:3; left: 173px; top: 3px; visibility: visible; color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 { position:absolute; width:120px; height:45px; z-index:4; left: 390px; top: 105px; visibility: visible; } #apDiv5 { position:relative; width:200px; height:115px; z-index:5; } .menubarWrapper { background-color: #000; float: left; width: 100%; }Move the constructor for the menu bar up to read as follows
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
//-->
</script>
Gramps -
Spry Horizontal Menu displaying incorrectly in IE
Hey,
This is my first site designed using a spry menu. The menu looks great in Firefox and Safari, but is completely wrong in IE. I have designed the rest of the site to be centered on the page with a width of 970px.
Here is a link to the current site: http://www.charlestonsertoma.org/
What am I doing wrong? Thank you in advance for any insights, suggestions, or corrections!
CSS CODE:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
width: auto;
cursor: default;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
position: relative;
cursor: pointer;
width: auto;
float: right;
/* 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: 12px;
z-index: 1020;
cursor: default;
width: 8.6em;
position: absolute;
left: -1000em;
text-align: center;
/* 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.6em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0% 0 0 8.4em;
font-size: 12px;
/* 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;
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;
padding: 0.5em 1.55em;
color: #FFF;
width: auto;
text-decoration: none;
text-align: center;
ul.MenuBarSubmenuVisible a {
display: block;
cursor: pointer;
padding: 0.5em 1.55em;
background-color: #FFF;
color: #999;
width: auto;
text-decoration: none;
text-align:left;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #FFF;
color: #333;
width: auto;
font-family: Georgia, "Times New Roman", Times, serif;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #FFF;
color: #333;
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%;
font-family: Georgia, "Times New Roman", Times, serif;
/* 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;You have got yourself into a bit of bother starting at the very beginning.
I think you need to sit back and reassess the situation. This is what you have got
one column page
header
article
footer
To translate that into your document you will get
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style>
html {
background: url(http://www.charlestonsertoma.org/images/background.jpg) no-repeat center top;
body {
width: 970px;
margin: auto;
img {
border: 0;
#header {
height: 570px;
position: relative;
#header img {
position: absolute;
top: 0;
#header img#slide{
height: 570px;
#header #nav {
position: absolute;
top: 83px;
left: 200px;
#article {
min-height: 400px;
#footer {}
/* MenuBar */
ul.MenuBarHorizontal a {
color: #FFF;
background-color: transparent;
padding: 0.5em 1.5em;
ul.MenuBarHorizontal ul a {
background-color: #96A2BA;
ul.MenuBarHorizontal li {
width: auto;
ul.MenuBarHorizontal ul {
width: auto;
ul.MenuBarHorizontal ul li {
display: block;
float: none !important;
width: auto;
white-space: nowrap;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #FFF;
color: #333;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #FFF;
color: #333;
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
padding: 0.5em 2.25em 0.5em 1.5em;
@media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
background: transparent;
</style>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js" type="text/javascript"></script>
<script>
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
</script>
<script src="http://www.charlestonsertoma.org/Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<a href="javascript:gotoshow()"><img src="images/2.jpg" name="slide" id="slide"></a>
<img src="http://www.charlestonsertoma.org/images/headercover1.png" alt="header" usemap="#header" />
<map name="header">
<area shape="rect" coords="14,3,199,80" href="index.html" alt="Home" />
<area shape="rect" coords="840,6,907,52" href="contact.html"/>
<area shape="rect" coords="917,6,962,52" href="http://www.facebook.com/sertomafootballclassic" />
</map>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">About Us</a>
<ul>
<li><a href="club-history.html">History</a></li>
<li><a href="charleston-chapter.html">Our Chapter</a></li>
<li><a href="charleston-chapter.html">Chapter History</a></li>
<li><a href="officers.html">Officers</a></li>
<li><a href="meet-our-members.html">Meet Our Members</a></li>
<li><a href="weekly-meetings.html">Weekly Meetings</a></li>
<li><a href="upcoming-events.html">Events</a></li>
<li><a href="registration.html">Join Now!</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Our Charities</a>
<ul>
<li><a href="windwood-farm.html">Windwood Farm</a></li>
<li><a href="eagle-harbor.html">Eagle Harbor</a></li>
<li><a href="camp-sertoma.html">Camp Sertoma</a></li>
<li><a href="volunteer-opportunities.html">Volunteer Opportunities</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Sertoma Football Classic </a>
<ul>
<li><a class="MenuBarItemSubmenu" href="general-info.html">General Information</a>
<ul>
<li><a href="general-info.html">Game Information</a></li>
<li><a href="matchups.html">Match-Ups</a></li>
<li><a href="teams.html">Teams</a></li>
<li><a href="sponsors.html">Sponsors</a></li>
<li><a href="tickets.html">Purchase Tickets</a>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="cheerleading.html">Cheerleading Information</a>
<ul>
<li><a href="cheerleading.html">Party Information</a></li>
<li><a href="spirit-award.html">Spirit Award Point System</a></li>
<li><a href="classic-dos-and-donts.html"> Classic Do's & Dont's</a></li>
<li><a href="classic-rules.html"> Ticket Sale Rules & Requirements</a></li>
</ul>
</li>
<li><a href="famous-classic-alumni.html">Famous Classic Alumni</a></li>
<li><a href="program.html">Program Advertising</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="registration.html">Become A Member</a>
<ul>
<li><a href="why-we-joined.html">Why We Joined</a></li>
<li><a href="registration.html">Registration</a></li>
</ul>
</li>
<li><a href="donate.html">Donate</a> </li>
</ul>
</div>
<script>
//configure the paths of the images, plus corresponding target links
slideshowimages("http://www.charlestonsertoma.org/images/2.jpg","http://www.charlestonsertoma.org/images/1.jpg","http://www.charlestonsertoma.org/images/3.jpg", "http://www.charlestonsertoma.org/images/6.jpg","http://www.charlestonsertoma.org/images/5.jpg","http://www.charlestonsertoma.org/images/4.jpg","http://www.charlestonsertoma.org/images/7.jpg")
slideshowlinks("index.html","index.html","index.html")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=5500
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
slideit()
</script>
</div>
<div id="article">
<h2>Main Content</h2>
</div>
<div id="footer">
<p>Footer</p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Just copy and paste the above into a new document and view it in browser.
Gramps -
Spry horizontal menu- not showing in some browsers
my spry horizontal menu is showing up as a vertical list in
some of our viewers computers. can i adjust the basic html so that
if spry does not show up on someone's computer, a more basic
horizontal table will show?Thank you all for the answers.
Can pop menu magic work with image maps?
Back in the day I created several drop down menus in Dreamweaver CS2 by adding behaviors to image maps. I liked that I pretty much could drop a menu from any point on an image.
Example: http://www.bettendorfdental.com/
So I have been going back to my old laptop and CS2 every time I needed to change something in these menus, but that was very inefficient.
My client wants the top banner to be in one image, with customized buttons that share the background of the logo and business name.
I have been customizing the topaz template in pop up magic but what the client reallly wants is to have the tab images as part of the larger image. So ideally there wouldn't be any text in the top menu and only the drop down part would show up.
http://www.monicagraphicdesign.com/Bill/spiritual.html
For people like me, who do not write or understand code, even searching a knowledge base can be a challenge because we do no know what to type in the search box! I am glad to learn Project Seven offers one on one support.
Another challenge is that the client manages his own site and uses Front Page on a PC (and I have neither) so I don't even know if he can attach the stylesheets to every page where he inserts the menu. -
Spry Horizontal Menu straddles header
Problem: Spry Horizontal Menu straddles header
I created a new page using
"1 column elastic, centered, header and footer"
I add a Spry Horizontal Menu within the "header" div.
The menu does not display entirely within the grey header
area.
The menu straddles half in the header and half below the
header.
I believe this is because of the float i.e.
"ul.MenuBarHorizontal li" has "float: left;".
How do I make the menu stay entirely within the grey header
content area?
Thanks ahead of time.
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">People</a></li>
</ul>
</div>
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 10px;
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;Hi,
The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
ul.MenuBarHorizontal
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-image: url(myImage.jpg); // rename the image to your own
background-repeat: repeat;
vertical-align: bottom;
float: none;
position: absolute;
margin: auto;
Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
ul.MenuBarHorizontal
background-image: url(myImage.jpg);
background-repeat: repeat;
Then attach this stylesheet to your document after the original stylesheet.
If you cannot get the required result, merely play around with the rules within myStyles.css.
I hope this helps.
Ben -
Vertical menu appears horizontally in IE8
I have a Spry vertical menu that I set up on the left side of my web page. It looks fine in Firefox and Safari but in IE8 it appears horizontally at the bottom of the page.
Is there a hack I can use for IE to fix that?
Please view: http://www.tabardtheatre.org/aboutUs.htmlAdd the following styling to your document, making sure that this comes after the menubar styling that you have already got inplace.
ul.MenuBarHorizontal ul li {
display: block;
float: none !important;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
Gramps -
I am redesigning my current website:
redesign
and trying to implement an Spry Horizontal Menu but would like to
make the sub-menu orient horizontally below the main menu rather
than orient down vertically?
Sample: http:www.carreonphotography.com/index3.html
I have attached the code and any thoughts would be
appreciated greatly folks.
Thanks for your time and attention.
Ed CarreonHi,
The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
ul.MenuBarHorizontal
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-image: url(myImage.jpg); // rename the image to your own
background-repeat: repeat;
vertical-align: bottom;
float: none;
position: absolute;
margin: auto;
Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
ul.MenuBarHorizontal
background-image: url(myImage.jpg);
background-repeat: repeat;
Then attach this stylesheet to your document after the original stylesheet.
If you cannot get the required result, merely play around with the rules within myStyles.css.
I hope this helps.
Ben -
Spry Horizontal Menu List Items crash IE6 browser
****Update*****
Apparently, it was width:100%; set on each hover over
background color for the list items in our default stylesheet that
was causing IE6 to crash.
Menus are in working order in all browsers now!
We have integrated the Spry Horizontal Menu with a website,
and added custom styling to SpryMenuBarHorizontal.css. The menu
works in Mozilla, Safari, and IE7. However, in IE6, after hovering
over the navigation, the drop down menu appears, but, as soon as
you move your mouse into the drop down to select an item from the
list, IE6 crashes. Every time. Various Computers.
We have tried reverting to the original
SpryMenuBarHorizontal.css file, however, the same problem occurs.
We haven't made any changes to the original js file
(SpryMenuBar.js).
Has anyone ever experienced this issue?
Here is our customized CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
img#nfl {
background-image:url(/Images/slices/nfl.png);
background-repeat:no-repeat;
height:14px;
width:40px;
margin:7px auto auto 25px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nfl.png");
_background-repeat:no-repeat;
_background-image:none;
img#mlb {
background-image:url(/Images/slices/mlb.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px 20px auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/mlb.png");
_background-repeat:no-repeat;
_background-image:none;
img#milb {
background-image:url(/Images/slices/milb.png);
background-repeat:no-repeat;
height:14px;
width:112px;
margin:7px auto auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/milb.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto -10px;
img#ctown {
background-image:url(/Images/slices/ctown.png);
background-repeat:no-repeat;
height:14px;
width:114px;
margin:7px auto auto 50px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ctown.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 40px;
img#nba {
background-image:url(/Images/slices/nba.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px auto auto 100px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nba.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 70px;
img#nhl {
background-image:url(/Images/slices/nhl.png);
background-repeat:no-repeat;
height:14px;
width:41px;
margin:7px auto auto 90px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nhl.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:margin:7px auto auto 100px;
img#ncaa {
background-image:url(/Images/slices/ncaa.png);
background-repeat:no-repeat;
height:14px;
width:52px;
margin:7px auto auto 70px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ncaa.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 60px;
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
cursor: default;
width:950px;
height:32px;
background-image:url(/Images/slices/primaryNavSlice.png);
background-repeat:repeat-x;
margin:0px;
padding:0px;
vertical-align:middle;
border-bottom:1px solid #000;
/* 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: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a
higher z-index, but they are initially off the left side of the
screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
/*width: 8.2em;*/
width:auto;
position: absolute;
left: -1000em; /* without this all menus are visible without
hover */
/* 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; /* without this menus don't show up */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/*width: 8.2em;*/
width:auto;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.15em 0.15em;
text-decoration: none;
ul#teamsMenu table#teams {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:11px;
width:500px;
background-color:#fff!important;
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;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
To center the tables in the screen
li.nfl_list #teams.nfl_table {
position:absolute;
top:7px;
li.mlb_list #teams.mlb_table {
position:absolute;
top:7px;
li.milb_list #teams.milb_table {
position:absolute;
left:-80px;
top:7px;
li.ctown_list #teams.ctown_table {
position:absolute;
top:7px;
li.nba_list #teams.nba_table {
position:absolute;
left:-200px;
top:7px;
li.nhl_list #teams.nhl_table {
position:absolute;
left:-190px;
top:7px;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
}I am having the same problems in IE7. I'm using the latest
version of everything (Spry 1.6.1 and javascript file version 0.12)
and at first I was having the problem on my drop down menus
appearing horizontal with all the correct styles but when I changed
the rule ul.MenuBarHorizontal ul to position: relative; the drop
downs appear vertical now but I have no beige border around the
whole ul anymore and I'm getting white space inbetween list items.
http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
so if anyone has any advice I'd much appreciate it. Also i'm
using 1px width on my borders no decimals.
Maybe you are looking for
-
Configure Enterprise Manager Console in Oracle 10.2.0.4
Hi.. Friends, We recently upgraded our SAP 4.7 to ECC 6 with Oracle 10.2.0.4 DB.. In Oracle 9 we have an option Enterprise manager console But in our new Oracle 10.2.0.4 there is no option like that. How can i configure Enterprise Manager console in
-
Portlet event link to pass parameter between portlets
Ok list, I followed the documentation Adding Parameters and Events to Portlets PDK Release 2 (9.0.2 and later) and tried to make a portlet that pass parameter to another portlet using event link. I created the supposed parameter in the page and made
-
Click a button, wait mc A to finish playing and play mc B
Hello. I am using Adobe Flash pro CS6 and AS3. Right now I am trying to make a button to play a new mc. There are 2 movie clips. mc A and mc B. What I want to do is my swf is playing mc A but if I click a button, it starts to play mc B, but I want to
-
Can't open console to 2950 switch
Howdy all, I'm after inheriting a cisco 2950 switch in my new job and I do not know the enable password for it. I went about following the "password recovery procedure" but am getting nowhere. http://www.cisco.com/warp/public/474/pswdrec_2500.html I
-
Po default condition type define.
generally, we use the price procedure 'RM1000'. i browse the control data of 'RM1000' via m/08. many condition type is defined. why only PBXX NAVS SKTO will appear in po creation?