My spry widget horizonal menu looks great on my mac
My spry widget horizonal menu looks great on my mac. However the PC puts them way off the side of the page? Please help me I have a deadline
http://www.envirocam.net/_2009a/p_bl.php
Yeah, it's interesting where support personnel are located around the globe. My nephew is Argentine/American in Buenos Aires, and he worked as an "American accent trainer" for a shop that did technical support for Kodak and Blue Cross in the US. THEY were all in Argentina.
But you can always check in here...for some of us, English is a native language (I'm sure we all have VERY different accents to our English, though!).
Oh, yeah, Spry was once a kind of vegetable shortening when I was a youngster. I suppose Spry widgets are a way to grease up your site and get it really slick. LOL
Beth
Similar Messages
-
I pasted in some HTML code generated by Google Forms into the iWeb HTML snippet widget. It looked great on my iWeb viewer, but when I published it to my website, the HTML snippet google form did not appear on my webpage. Does anyone know how to fix this?
What is the code?
-
Spry Widget Horizontal Menu IE Issue
Hi,
I am new to spry widgets. I am building this site in dreamweaver and am using the spry widgetfor my nav bar.
The issue is, in Firefox the menu looks the way it is supposed to, but in IE it has a black box. I have tried a few things,
but no luck. I am sure this is simple but I couldnt figure it out.
http://prorecllc.com/home.html
Any help will be appreciated, thanks in advance.I've been having problems with the horizontal menu in IE as
well. I have discovered that to center the main menu items without
having the submenu begin at the center of the parent item, put the
"text-align:center" under "ul.MenuBarHorizontal a" rather than the
"ul.MenuBarHorizontal li". I'm still working on making the submenu
items look nice - I don't like them centered but if they are
text-aligned left then they end up beginning far to the right of
the parent item (because the parent is centered with respect to
it's container). -
Photos look great on a MAC. and not so great on a PC. why?
the subject says it all.
my photos look perfect on a MAC(safari and firefox). when i view my photos on a PC(explorer and firefox), they look dark, over saturated, and sometimes out of focus! can somebody tell me why this happens ? can this be fixed? its not the monitor because i've looked at the site on several machines.
any advice would be greatly appreciated!I look at you site with safari on the mac and ie on the pc side and see so difference.
If you are accessing with ie on the mac, it's not going to work. very outdated.
On the pc side make sure it's the latest version and java is enabled.
again, it look the same to me.
good luck -
Does anyone have ideas to sharpen the video i made. Looks good on computer but not on tv. the transition between pictures blurs the images. Is it my tv that causes this?
Does anyone have ideas to sharpen the video i made. Looks good on computer but not on tv. the transition between pictures blurs the images. Is it my tv that causes this?
-
Looks Great on Mac - Lousy on PC
Wonder if anyone can help explain this. My site, newsroomconfidential.com, looks great on a Mac. But many of my friends who use a PC get bizarre colors and dropped text when they access it on Windows Explorer. What can I do to stablize the appearance across platforms?
Thanks for your reply. Do you think it would it make a difference if I hosted the same content with a different ISP? I host on .mac.
Chances are it's only looking lousy in the lousy IE
browser. Actually, I'd be willing to wager that it
probably looks fine in the latest version of IE that
comes with XP SP2. I've checked sites that supposedly
look bad on Windows with that setup and haven't seen
any major problems.
If your site NEEDS to look good on Windows PC's
running all the various bad versions of IE, there's a
way to do it, but you'd spend so much time
simplifying your site and NOT using iWeb's features
that it might be more worthwhile to use some other
app. -
Spry widget menu bar as a library item - problems
I created a spry vertical menu bar and made it a library item. The original works great, however when I insert the library item into its own div tag on another page, the submenus will not pop out, either in DW or the browser view. The div tag is the correct size and I made the z index high enough. Here is the code of the page that works properly:
<!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>DM Consulting Dry Dock Training</title>
<link href="css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/vertborderblue2.jpg);
background-repeat: repeat-x;
-->
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
<div id="content">
<p><span class="bolder1">D</span><span class="bolder1">M Consulting </span><span class="lineheight">provides Dry Dock Training, Dry Dock Conferences,<br />
Dry Dock Software and Dry Dock Consulting for:</span></p>
<ul>
<li class="lineheight"> Dock Masters</li>
<li class="lineheight">Docking Officers</li>
<li class="lineheight">Dry Dock Crews</li>
<li class="lineheight">Engineers</li>
<li class="lineheight">Naval Architects </li>
<li class="lineheight"> Port Engineers</li>
<li class="lineheight">Program/Project Managers</li>
<li class="lineheight">Marine Surveyors</li>
<li class="lineheight">Owners' Representatives</li>
<li class="lineheight">On-site Representatives</li>
<li class="lineheight">Consultants</li>
<li class="lineheight">Others Involved or Interested in
the <br />
Dry Docking of Ships and Vessels</li>
</ul>
<div id="testimonials">"The course was excellent, straight forward and comprehensive. Instruction was great, expected <br />
"death-by-power point" but was pleasantly surprised.
I am better acquainted w/dry dock basics after the
course and can trust the accuracy of the training
based on the extensive experience of the instructors. Thank you!
Very informative, very thorough."
- David, Australia<br />
</div>
<div id="movie">
<object width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed>
</object>
</div>
<div id="moreTestimonials">»»» click here for more testimonials «««</div>
<div id="footer"><!-- #BeginLibraryItem "/Library/copyright.lbi" -->© COPYRIGHT 2010 DM CONSULTING<!-- #EndLibraryItem --></div>
</div>
<div id="navbar">
<!-- #BeginLibraryItem "/Library/nav.lbi" -->
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
<li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
<ul>
<li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
<li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
<li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
<li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
</ul>
</li>
<li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
<li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
<li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
<li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
<li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
<li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
</ul>
<!-- #EndLibraryItem --></div>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Here is the code for the page that DOESN'T work:
<!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>Training Course Schedule</title>
<link href="../css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/vertborderblue2.jpg);
background-repeat: repeat-x;
-->
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="../images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="../images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
<div id="content">
<h2><span class="bolder1">Training Course Schedule</span><span class="bolder1"></span></h2>
<p><br />
Class sizes are limited so please register early. Early registration and payment provides the best value.<br />
<br />
</p>
<p class="underline"><strong>4-7 October 2010 • Honolulu, HI, USA </strong></p>
<div id="schedulephoto"><img src="../images/conference-rm_train_s.jpg" width="250" height="123" alt="image" /></div>
<p>The training will be held in Pearl Harbor, Hawaii, USA. <br />
<a href="Registration_Hawaii.html">Registration form</a><br />
<br />
</p>
<p class="underline"><strong>15-18 November 2010 • Virginia Beach VA, USA</strong></p>
<p>The training will be held in Virginia Beach, Virginia, USA. <br />
<a href="Registration_Virginia.html">Registration form</a><br />
<br />
</p>
<p class="underline"><strong>11-14 May 2011 • London, United Kingdom</strong></p>
The training is held in conjunction with the Royal Institution of Naval Architects (RINA). Registration and payment will be made directly to RINA. <br />
Visit RINA's <a href="http://www.RINA.org.uk" target="_blank">website</a> and go to "Events" or call +44 (0) 20 7201 2401.<br />
<br />
</p>
<p><strong>Your Location</strong></p>
<p>Training tailored to your organization's needs, including training at your facilities, <br />
is also available. </p>
</div>
<div id="nav3"><!-- #BeginLibraryItem "/Library/nav.lbi" -->
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
<li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
<ul>
<li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
<li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
<li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
<li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
</ul>
</li>
<li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
<li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
<li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
<li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
<li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
<li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
</ul>
<!-- #EndLibraryItem --></div>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
I understand about having the script and link element that connect my page to the dependent files in the SpryAssets folder in the header and the JavaScript function cal at the bottom on each page. I don't know what else to do - HELP!Welcome to the Dreamweaver world!
Well, having your index.html page at the top/root level is important, as that is the default page by which people will enter your site.
Having other pages in folders is fine...I do it all the time in order to keep departments or categories of information sorted.
One characteristic of having pages in folders is that the hierarchy of files in folders (perforce) puts them at different depths in the site.
This is not inherently a bad thing! Just one to remain aware of. When you look at your site files in the Files Panel, you can see a graphical representation of those different levels.
But the nature of a library item is that it is identical in all its instances, which is what makes it useful...change it in the library, and it changes site-wide. The down-side of that identity is that when your files are at different depths in the hierarchy, their links back to, say, home (or any other same file) will change depending on the depth. You can see this if you make a link on a page, then drag the page (in the Files Panel) to a different depth...say, into a folder when it started at root level, or vice versa. Check the link, and you will see that it automatically adapted to the new path.
Library items do not do that; they do not change, so some of your links will be 'wrong' when you refer to pages that have different paths than the ones originally set up in the library item... because of the change in hierarchy.
All this is, of course, reliant on your creation of the site in the first place, as defining the root folder's location on your computer gives Dreamweaver a starting point for handling (juggling?) all the location-information for your site's files.
Beth -
Spry menu look fine in Firefox, Safari but not Intenet Explorer
Help how cann I Spry working fine in Internet Explorer!!!
Look with firefox this page and with Intenet Explorer and see the differents. In Firefox the menu show nice, but into Intenet Explorer not!!
When i open the same page lokale the page ist good till I alow the script inside Internet Explorer....
http://geerthakze.nl/vriendaanzee/index.html
I hope we can find a solution!!!Gramps
Alvast hartelijk dank voor de tips, de voorgestelde wijzegingen staan nu online. Maandag kijk ik hier nog verder naar, nu heb ik nog wat weibg marge links en rechts en staat het submenu nog iets te ver weg.
Als het mogelijk is zou ik de pijljes het liefst voor de tekst willen hebben (maar dat vindt ik minder belangrijk).
Alvast een fijn weekeinde gewenst
Geert
Verstuurd vanaf mijn iPhone
Op 1 okt. 2011 om 15:48 heeft altruistic gramps <[email protected]> het volgende geschreven:
Re: Spry menu look fine in Firefox, Safari but not Intenet Explorer
created by altruistic gramps in Spry Framework for Ajax - View the full discussion
Now everything works nice, I can now chancing the Layout, but watt is wrong!!
Geert,
Please update the website with the changes to the menubar and then tell me what changes you wish to make to the layout.
If you are having a problem expressing your views in English, you can PM me in het Nederlands.
Gramps
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/3948627#3948627
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/3948627#3948627. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746. -
Firefox 12 just installed on MacBook Pro, OSX 106.8. FF looks great, seems faster also. BUT, on tab menu, the small triangle (to list the tab info) is missing; I can't find a way to reinstall it using the View->Toolbars->Customise option. Can you help?
You will only see the "List All Tabs" button in Firefox 12+ if there are that many tabs open that you get the Tab bar scroll buttons appearing.
* Permanent List-all-tabs Button: https://addons.mozilla.org/firefox/addon/permanent-listalltabs/
Bug 714281 - Show the all tabs button only when the tab strip overflows -
DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8
Hi,
I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
It works well in Google Chrome.
It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
The menu can be seen at work by clicking on this link:
www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
Below are all the scrips involved.
Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
/* 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: 10;
padding: 0;
list-style-type: none;
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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
/*height:38px;*/
margin: 0;
padding: 0;
list-style-type: none;
font-size: 87%;
z-index: 1020;
cursor: default;
width: 160px;
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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 24px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 160px;
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*height: 40px;*/
text-align: center;
/*vertical-align: center;*/
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*zzzzzzzz Text Color*/
color: #333; /*background-color: #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/*background-color: #33C;
color: #FFF;*/
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-image: url(../Main-Buttons-mouse-over.jpg); /*background-color: #33C;
color: #FFF;*/
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-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-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-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* 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-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;
Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
// 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];
And last, here is the HTML code that has also not been modified in any way:
<!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="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Thanks in advance for any of your help.
Jose H.Hello Nancy,
I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now. Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
By the way.. the IE8 security measure did pop up while working from the server.
Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
Good luck.. as I know it can become a complicated task when creating custom Spry menus.
<b>Here is the finished CSS script</b>
<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: 10;
padding: 0;
list-style-type: none;
/* font size for top menu*/
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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: 87%;
z-index: 1020;
cursor: default;
width: 160px;
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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 0px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 162px;
/* New addition */
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*My note -- took out borders & changed text color to #333(black)& added my own mouse not over image-- */
/*border: 0px solid #333332;*/
background-image: url(../Main-Buttons.jpg);
/*height: 40px;*/
text-align: center;
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*My note --Text Color-- */
color: #333; /*background-color: was #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/* My note --took out all backgound & text color for mouse over-- */
/*background-color: #33C;
color: #FFF;*/
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
/*My note -- took out background & text & added my own mouse over image-- */
background-image: url(../Main-Buttons-mouse-over.jpg);
/*background-color: #33C;
color: #FFF;*/
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
height: 40px;
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-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-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* 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-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;
/* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
background: #3e6487;
</code>
<b>Here is the modified HTML script</b>
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<!-- My note --the bellow line was: <li><a href="#">Contact Us</a></li> --- changing it to: <li><a href="#" class="MenuBarItemSubmenu">Contact Us</a> corrected the height of the Contact us button wich did not have sub menus and because of this only diplayed at half size vertically in IE8 //-->
<li><a href="#" class="MenuBarItemSubmenu">Contact Us</a>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
</code>
And Richard.. Thanks again for the time and your help, truly appreciated.
Jose H. -
Help perfecting Customised Spry 2.0 Menu
Hi there.
My Spry 2.0 menus look and behave great in IE, Firefox and Chrome but not in IOS (require 2 taps to bring down and the content is not hidden as the page is loaded).
Also, they don't sit properly in their containers in design view (they look fine in live view) which ruins the rest of my layout in design view (doesn't affect live or browser view).
Another way to explain it is that in design view, the menus are half way down the container and are not hidden (they show the bulleted, unformatted list).
Thanks very much for looking.
HTML
<ul id="MenuBar">
<li> <a href="#">.</a>
<ul>
<li> <a href="pricelist.html">Price List</a></li>
<li> <a href="services.html">Services</a>
</li>
<li> <a href="terms.html">Terms</a>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
</div>
CSS
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
background-image: url(Images/latesttoptabstexthire.png);
width: 155px;
height: 37px;
display:none;
width: 155px;
height: 37px;
.MenuBarLeftShrink {
float: none;
width: 155px;
height: 37px;
.MenuBarRightShrink {
float: none;
width: 155px;
height: 37px;
.MenuBarFixedLeft {
float: none;
width: 155px;
height: 37px;
.MenuBarFixedCentered {
float: none;
width: 155px;
margin-left:0px;
margin-right:0px;
height: 37px;
.MenuBarFixedCentered br {
display:block;
width: 155px;
height: 37px;
.MenuBarFixedCentered .SubMenu br {
display:none;
width: 155px;
height: 37px;
.MenuBarFullwidth {
float: none;
width: 155px;
height: 37px;
width: 155px;
height: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
#MenuBar .MenuItem {
border-width:0px;
border-style: none solid none solid;
width: 155px;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-right-color: #999;
border-left-color: #999;
#MenuBar .MenuItemFirst {
border-style: none none none none;
width: 155px;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 0px;
#MenuBar .MenuItemLast {
border-style: none solid none none;
width: 155px;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#FAF5E2;
width: 10em;
width:155px;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; }
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
border-style: solid solid none solid;
height: 14px;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 40px;
width: 101px;
#MenuBar .SubMenu .MenuItemFirst {
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
color:#999999;
width: 155px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
#MenuBar .MenuItemHover {
border-color: #cccccc #cccccc #cccccc #cccccc;
margin-left: 0px;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
color: #FAF5E2;
background: url(Images/latesttoptabstexthireselected%20-%20Copy2.png);
#MenuBar .MenuItemHover .MenuItemLabel{
color: #999900;
#MenuBar .SubMenu .MenuItemHover {
border-color: #cccccc #cccccc #cccccc #cccccc;
color: #990;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
color: #999900;
width: 155px;
#MenuBar .SubMenuVisible {
min-width:0%;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
height: 20px;
width: 155px;
#MenuBar.MenuBar .SubMenuVisible
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px;
#MenuBar .MenuLevel1 .SubMenuVisible {
min-width:0px; top: 0px;
left:100%;
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IEI'm sorry for your grief. But touch screen devices don't respond to mouse hover. Clicking twice to show sub-menus is normal behavior.
I can't say much about Design View other than it's not 100% reliable. Use Split View with Live View and Preview in browsers.
Pop-Menu Magic 2
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O. -
Spry 2.0 menu not showing in IE8
I have a webpage with a horizontal and vertical Spry 2.0 menu on the page. Both menus work correctly in Firefox, Chrome, Safari, and IE9, but the vertical menu does not show at all in IE8. In addition in IE8 the browser scroll bar disappears when the vertical menu is added. The test page is http://www.njslom.org/001banner5.html
I am using CS5 and the Spry 2.0 Widget in an html template.
Any help at all would be appreciated.
[email protected]
Page code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
body {
background-color: #EBEBEB;
margin-top: 0px;
</style>
<script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#MenuPublic1 {
background-color:#F2F2F2;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuPublic1FixedCentered br" rule bleow */
display:none;
.MenuPublic1LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1FixedLeft {
float: left;
width: 70em;
.MenuPublic1FixedCentered {
float: none;
width: 70em;
margin-left:auto;
margin-right:auto;
.MenuPublic1FixedCentered br {
clear:both;
display:block;
.MenuPublic1FixedCentered .SubMenu br {
display:none;
.MenuPublic1Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1 .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuPublic1 .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#F2F2F2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1 .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:#F2F2F2;
padding: 7px 28px 7px 28px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuPublic1 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
background-color:#F2F2F2;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuPublic1 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#F2F2F2;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1 .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1 .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
#MenuPublic1 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1 .SubMenuVisible {
background-color: #F2F2F2;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuPublic1.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuPublic1.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuPublic1 .MenuLevel1 .SubMenuVisible {
background-color: #F2F2F2;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuPublic1 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141544" binding="#MenuPublic1" />
<oa:widget wid="2141544" binding="#MenuPublic1_2" />
</oa:widgets>
-->
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuPublic1_2 */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuPublic1_2 so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuPublic1_2 {
background-color:#8ca7d2;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuPublic1_2FixedCentered br" rule bleow */
display:none;
.MenuPublic1_2LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2FixedLeft {
float: left;
width: 175px;
.MenuPublic1_2FixedCentered {
float: none;
width: 175px;
margin-left:auto;
margin-right:auto;
.MenuPublic1_2FixedCentered br {
clear:both;
display:block;
.MenuPublic1_2FixedCentered .SubMenu br {
display:none;
.MenuPublic1_2Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1_2 .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuPublic1_2 .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#8ca7d2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1_2 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1_2 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1_2 .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#ffffff;
background-color:#8ca7d2;
padding: 6px 10px 6px 10px;
width: 175px;
.SpryIsIE6 #MenuPublic1_2 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1_2 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: italic;
background-color:#0066ff;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuPublic1_2 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1_2 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1_2 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1_2 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1_2 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#0066ff;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1_2 .MenuItemHover {
background-color: #cae9fd;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1_2 .MenuItemHover .MenuItemLabel{
background-color: #cae9fd;
color: #000000;
#MenuPublic1_2 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1_2 .SubMenuVisible {
background-color: #0066ff;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuPublic1_2.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuPublic1_2.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuPublic1_2 .MenuLevel1 .SubMenuVisible {
background-color: #0066ff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuPublic1_2 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
.text-white { color: #FFF;
</style>
</head>
<body>
<table width="950" border="0" align="center" cellpadding="7" cellspacing="0">
<tr>
<td width="284" bgcolor="#0000CC"><strong class="text-white">Serving Municipal Government in <br />
New Jersey Since 1915</strong></td>
<td width="305" bgcolor="#0000CC"><div align="center"><div align="center"> <!-- Begin PicoSearch Query Box -->
<table style="background-color:#004d8c" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<form style="margin:0;" method="get" action="http://www.picosearch.com/cgi-bin/ts.pl">
<input type="hidden" name="index" value="520788" />
<table style="background-color:#004d8c" cellspacing="2" cellpadding="0" border="0">
<tr><td><a href="http://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=allhttp://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=all"></a></td>
<td align="right"><input type="text" name="query" value="" size="20" />
<input type="submit" value="GO" name="search2" /></td>
</tr>
</table>
</form>
</td></tr></table>
<span style="white-space: nowrap;">
</span><!-- End PicoSearch Query Box --></div></div></td>
<td width="319" bgcolor="#0000CC"><div align="right" class="text-white"><a href="http://www.njslom.org" class="text-white"><strong>HOME</strong></a> | <a href="http://www.njlmef.org" class="text-white"><strong>NJLM Educational Foundation </strong></a></div></td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
<td width="135"><img src="/images-head/head-logo-1.jpg" width="128" height="200" /></td>
<td width="815" valign="top"><p> </p>
<p> </p>
<p> I will be adding the Spry Content Slideshow in this area</p>
</td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#F2F2F2"><ul id="MenuPublic1">
<li> <a href="#">Classifieds</a>
<ul>
<li><a href="#">Classifieds & Job Listings</a></li>
</ul></li>
<li> <a href="#">NJ Municipalities Magazine</a>
<ul>
<li> <a href="#">Current Issue</a></li>
<li> <a href="#">Advertise</a> </li>
<li> <a href="#">Subscribe</a> </li>
<li> <a href="#">Submission Guidelines</a></li>
</ul>
</li>
<li> <a href="#">Seminars & Events</a>
<ul>
<li><a href="#">Events & Registration</a></li>
<li><a href="#">CEU Requirements</a></li>
</ul>
</li>
<li> <a href="#">Legislation</a>
<ul>
<li><a href="#">Legislative Committee</a></li>
<li><a href="#">Legislative Priorities</a></li>
<li><a href="#">Legislative Bulletin</a></li>
<li><a href="#">Conference Resolutions</a></li>
</ul></li>
<li> <a href="#">Issues & Documents</a>
<ul>
<li><a href="#">Issue Alerts</a></li>
<li><a href="#">Press & Media</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Sample Resolutions</a></li>
<li><a href="#">League Testimony</a></li>
</ul></li>
<li> <a href="#">NJLM Directories</a>
<ul>
<li><a href="#">Staff</a></li>
<li><a href="#">Executive Board</a></li>
<li><a href="#">League Officers</a></li>
<li><a href="#">League Attorneys</a></li>
<li><a href="#">League Affiliates</a></li>
<li><a href="#">League Committees</a></li>
</ul></li>
<p>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1
var MenuPublic1 = new Spry.Widget.MenuBar2("#MenuPublic1", {
widgetID: "MenuPublic1",
widgetClass: "MenuBar MenuPublic1LeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
</p></td>
</tr>
<tr>
<td width="175" valign="top" bgcolor="#F2F2F2"><p> </p>
<ul id="MenuPublic1_2">
<li> <a href="#">Home</a></li>
<li> <a href="#">Entertainment</a>
<ul>
<li> <a href="#">TV Listings</a></li>
<li> <a href="#">Music</a>
<ul>
<li> <a href="#">Hits</a></li>
<li> <a href="#">Ragga</a>
<ul>
<li> <a href="#">Roots</a></li>
<li> <a href="#">Reggaeton</a></li>
<li> <a href="#">Dancehall</a></li>
</ul>
</li>
<li> <a href="#">Country</a></li>
</ul>
</li>
<li> <a href="#">The Dirt</a>
<ul>
<li> <a href="#">Hollywood</a></li>
<li> <a href="#">NY Beat</a></li>
<li> <a href="#">London Scene</a></li>
</ul>
</li>
<li> <a href="#">The Web</a></li>
</ul>
</li>
<li> <a href="#">Politics</a></li>
<li> <a href="#">Sports</a>
<ul>
<li> <a href="#">Football</a></li>
<li> <a href="#">Baseball</a></li>
<li> <a href="#">Basketball</a></li>
<li> <a href="#">Racing</a>
<ul>
<li> <a href="#">F1</a></li>
<li> <a href="#">Indy Car</a></li>
<li> <a href="#">Stock Car</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1_2
var MenuPublic1_2 = new Spry.Widget.MenuBar2("#MenuPublic1_2", {
widgetID: "MenuPublic1_2",
widgetClass: "MenuBar MenuBarVertical MenuPublic1_2MenuBarVerticalLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
<p> </p></td>
<td width="773" valign="top" bgcolor="#F2F2F2"><!-- TemplateBeginEditable name="EditRegion3" -->
<p>EditRegion3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>This is the bottom of the page</p>
<!-- TemplateEndEditable --></td>
</tr>
</table>
</body>
</html>I get the following error message
Perhaps you could have a look at KB927917
Gramps -
Spry Widget SlideShow Basic (IE8 not showing all images)
Hi everyone:
I've read through the past posts, trying to find the solution so I wouldn't have to bother everyone if the solution to my problem was already here. I couldn't find it, although I did find similar posts about this problem but no out and out solution.
My problem:
I have added the Spry Image Slideshow-Basic into an .html page. The widget works well in Firefox, Chrome, Safari and IE7!! It does not work properly in IE8 as IE8 skips every second images...the even numbers. It does not work on my local computer and it also doesn't work on the server. I have uploaded all the files to the server and it still doesn't work properly.
I cannot seem to find the solution and I am reaching out to the great Adobe supporters for help.
You can see the test web page here:
http://www.fernweb.com/test/
There are six images in this group but it only shows numbers 1, 3 and 5.
Could someone please have a look and give me direction as to where the problem is?
Thanks so much everyone.
DarylThe problem is with the Spry.Widget.ImageSlideShow.PanAndZoomPlugin
If you leave that out, then all is well
A dirty fix is to add the following to the HEAD section of your document
<meta http-equiv="X-UA-Compatible" content="IE=7" /> -
When using Live View, site looks great, browser testing goes crazy
I am creating a new website (and I am really unexperienced with Dreamwaver CS5). But when I check my site using "Live View" everything looks great, the way it is supposed to. Then when I go to test it in my browswer (Primary browser is Chrome) it goes crazy: I at first noticed that I had saved one copy as an .asp but then resaved it to .xhtml I did delete the first line of code already that the .asp file created as it kept giving me an error on line 1.
Then I tried to do a spry drop-down menu bar, which I have deleted since I thought I was doing something wrong with that and I should just stick to what I half-way know.
If I were to preview the template page it gives me this error:
This page contains the following errors:
error on line 150 at column 76: error parsing attribute name
Below is a rendering of the page up to the first error.
Here is line 150:
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
If I were to test the index.xhtml page in the browser, it ignores most images (all but one), and the first nav-bar (an editable region) appears to the left instead of under the header. The layout is totally ignored and everything is on the left-hand side of the screen instead of in a two column layout.
I am not testing this on a server just off of my computer.
I am assuming that the error has something to do with the .asp file I first did and when I resaved it, since I don't know what I would be looking for, is still in there screwing it up.
Here is the code from the template page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Midwest Window Brokers | Page</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-image: url(/images/bkg.jpg);
background-repeat: repeat;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
text-align: left;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #060;
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #666;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFF;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 300px;
background: #ffffff;
padding-bottom: 10px;
.content {
padding: 10px 0;
width: 650px;
float: right;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #DDDECB;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #ADB96E;
color: #FFF;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-color: #DDDECB;
font-size: small;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#h-navbar {
font-weight: bold;
height: auto;
font-size: 18px;
line-height: 50px;
background-image: url(/images/navbar2.jpg);
#h-navbar1 {
background-image: none;
background-repeat: repeat-x;
-->
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('/images/home2.jpg')">
<div class="container">
<div class="header"><a href="/index.xhtml"><img src="../images/heading.jpg" alt="Midwest Window Brokers, Windows, Siding, Roofing, 605-791-5352" name="Insert_logo" width="950" height="200" align="right" id="Insert_logo" style="background: #FFFFFF; display:block;" /></a>
<div id="h-navbar1"><a href="/index.xhtml"><img src="/images/home.jpg" alt="home" width="159" height="51" id="Image1" onmouseover="MM_swapImage('Image1','','/images/home2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="/windows.html"><img src="/images/services.jpg" width="151" height="51" alt="services" /></a><a href="/freebay.xhtml"><img src="/images/specials.jpg" width="153" height="51" alt="specials" /></a><a href="/gallery.html"><img src="/images/gallery.jpg" width="152" height="51" alt="gallery" /></a><a href="/roofing.xhtml"><img src="/images/order.jpg" width="152" height="51" alt="order" /></a><img src="/images/blank.jpg" width="75" height="51" /><img src="/images/facebook.jpg" width="38" height="51" alt="facebook" longdesc="http://facebook.com/midwestwindowbrokers" /><img src="/images/twitter.jpg" width="37" height="51" alt="twitter" longdesc="http://twitter.com/midwestwindow" /><img src="/images/google.jpg" width="42" height="51" alt="google+" longdesc="http://https://plus.google.com/u/0/b/108071947231835835141/108071947231835835141/posts" /></div>
<!-- end .header --></div>
<!-- TemplateBeginEditable name="navbar" -->
<div id="h-navbar">
<div id="h-navbar2"> Content for id "h-navbar2" Goes Here</div>
</div>
<!-- TemplateEndEditable -->
<div class="sidebar1">
<ul class="nav">
</ul>
<p> <div id="wufoo-z7x3k1">
Fill out my <a href="http://midwestwindow.wufoo.com/forms/z7x3k1">online form</a>.
</div>
<script type="text/javascript">var z7x3k1;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'midwestwindow',
'formHash':'z7x3k1',
'autoResize':true,
'height':'601',
'async':true,
'header':'show'};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { z7x3k1 = new WufooForm();z7x3k1.initialize(options);z7x3k1.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script></p>
<!-- end .sidebar1 --></div>
<!-- TemplateBeginEditable name="Body" -->
<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h2>Clearing Method</h2>
<p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p><span style="font-size: 18px; color: #C00; font-weight: bold; font-style: italic;">Logo Replacement</span></p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<h4>Backgrounds</h4>
<p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
<!-- end .content -->
</div>
<!-- TemplateEndEditable -->
<div class="footer">
<p class="footer"><strong> <em>References Available!</em> We accept cash, check, Visa, Discover, MasterCard</strong></p>
Copyright 2012 Midwest Window Brokers Inc. All Rights Reserved.
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>I had saved one copy as an .asp but then resaved it to .xhtml
I'm assuming this is a static web site. Rename (F2) all your pages with .html or .htm extension.
.xhtml is not a valid extension.
Nancy O. -
Spry drop down menu not working after page created from template
Hi all.
I created a template and the drop down Spry menu is working fine on local testing on my browser as follows:
I then created a New Page from this above Template. I did no alteration to this new page and just saved it as index.html but when previewing it in the browser, the Spry drop down menu is not working and the page displays as follows:
Here is my site map:
Any help to show where I am going wrong would be much appreciated.
Thanks.Dear Nancy
Very grateful for your reply.
On Design View and Preview in browsers the index.dwt page spry works fine.
When I create a child page from this template page, the child page looks fine in design view but does the spry fails to preview in browsers (the spry just shows as words and not drop down menus).
Here is the code:
<!--
#apDiv1
#apDiv2
#apDiv3
#apDiv4
-->
<!--
#apDiv5
#apDiv6
#apDiv7
#apDiv8
#apDiv9
a:link
a:hover
#apDiv10
body {
margin-bottom: 0px;
margin-top: 0px;
#apDiv11
-->
!/cooltext454549176.png|height=170|width=631|src=/cooltext454549176.png!
!/logosmall.jpg|height=58|hspace=0|width=150|src=/logosmall.jpg|vspace=0!
Disclaimer:
Studentshub is a platform for listing services as advertised/promoted by the Companies and individuals concerned. Studentshub does not endorse any of the contents on this site. Studentshub accepts no responsibility for any arrangements, purchase, contracts, agreements, refunds, failure to deliver services etc between individuals, landlords, clubs, organisations, companies etc. This does not affect your statutory rights (2009)
*Contact !/bluebutton.gif|height=10|alt=Blue button|width=10|src=/bluebutton.gif!
Sitemap !/bluebutton.gif|height=10|alt=Blue button|width=10|src=/bluebutton.gif!*
© www.studentshub.co.uk *
!/bluebutton.gif|height=10|alt=Blue button|width=10|src=/bluebutton.gif!
!/cooltext454549388.png|height=138|width=700|src=/cooltext454549388.png!
[LIVE | #]
[CAMPUS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[HOUSE SHARE | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[RENT | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[BUY | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[WORK | #]
[EMPLOYMENT AGENCIES | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[PART TIME | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[VOLUNTEERING | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[WORK ABROAD | #]
[TRAVEL | #]
[BUS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[TRAIN | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[COACH | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[FLIGHTS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[CYCLE | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[FUN | #]
[NIGHTS OUT | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[DAYS OUT | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[GROUP OUTINGS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[HOLIDAYS | #]
[UK | #]
[ABROAD | #]
[SHOPPING | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[BOOKS | #]
[BOOKSHOPS | #]
[USED BOOKS | #]
[HEALTH | #]
[NHS DIRECT | #]
[HOSPITALS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[WALK IN CLINICS | #]
[DERBYSHIRE | #]
[NOTTINGHASHIRE | #]
[LEICESTERSHIRE | #]
[GUM CLINICS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[HOME | #]
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );
//-->
</script>
</body>
<!-- InstanceEnd --></html
Maybe you are looking for
-
How to insert a Jquery slideshow to a template based html page?
I would like to insert a simple jquery slideshow into an existing div in an html page which is linked to a template page. Do I add the js files and code to the template html or the child html where I want the slideshow? Do I need to divorce the page
-
System folder no longer recognized! Please Help!
Hello, I'm usually able to handle all my mac related problems, but this time I'm stumped. I'm writing this from my old ibook, as my main iMac is now very sick. Essentially, my system folder is not recognized anymore. I get the flashing "?" symbol at
-
Someone please help me to find a USA to US power adaptor for the Zen Mic
Help ! I recently received a 40th birthday present zen micro from a relati've in New York, however the plug is the USA 'two flat pin type'. I have detached it from the power supply to find two smaller pins underneath so please someone tell me where I
-
X-windows problem to "runInstaller" (soa_linux_x86_101310_disk1.cpio)
I opened a session to server by ssh. I'm able to run 'xclock' and 'xterm'. When I run '> ./runInstaller'. got a window then got shrunk. then when I clicked got shrunk more. I experienced this one when I installed a 10g database. Solution was to run "
-
Adobie Reader problem using OS Vista and IE9
Operating System = Windows Vista Browser = IE9 Adobe Reader long use without problems. Previously click on link within web page and view text. Now only white space and no text. Deleted and reinstalled Adobe Reader with version 10.1.3. Problem remains