Spry Menu code patch for IE browser?

Does anyone remember the Adobe e-blast with the coding patch that was suppose to fix spry menu issues with IE browser? Now that I need it, I can not find it anywhere.

Hi PBSOakley,
You've posted your question in a forum for BrowserLab, a web service for cross-browser testing of web pages. I think you'll have much better luck if you repost your question in the Spry forums here:http://forums.adobe.com/community/labs/spry
Hope this helps,
Mark

Similar Messages

Spry menu appearing different in IE Browser

Hi there my spry menu is messing up when viewed in the Internet Explorer Browser. Everything appears fine when viewed in Firefox and Chrome, the URL is http://www.theboxinghistorian.com/
Here is a view of what it should be like and is when viewed in FireFox and Chrome
And this is the view in Internet Explorer (IE)
After several days of trial and error I deleted the whole script and associated CSS, however when i constructed another spry menu bar the same thing happened.
I then went of and set up a test site, entered a basic spry menu bar and it appeared fine when viewed in IE, basically I have tried everything, any help or feedback would be appreciated.

You have applied a width: auto; to the submenus. In some browsers, that is as good as saying "fill up my page horizontally with whatever you give me for submenus..." or something equally obnoxious, as you have seen!
In this rule:
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: auto;
     position: absolute;
     left: -1000em;
give a definite width (I suggest the same width that you gave the submenu items themselves, in this case 163px), and your submenu list items (which are made to float left, and will only stack up if they are in a confined space) should again fall where you want them.
Beth

Practices for maintaining source code patches for branch of OSS project?

There is this open source project I use and modify for my personal, private use...
I would like some best-practice/practical experience suggestions on methodology/tools to maintain a growing number of source code patches I have created for said software. (FYI It is generally not mandatory that I upgrade to new version of the software when it comes out. Sometimes I will use the version I have for several versions before getting the new one, and re-implementing my changes. And sometimes I don't even implement the changes; I just run it vanilla.)
Currently, I download the latest code from SVN, make my changes to the original code files, and keep track of my changes in a text file, which I then dutifully reference to re-create them when I feel like re-synching with the official version. What I would like to have instead is a separate base of code that contains just my modifications, and somehow include/import it as painlessly as possible whenever I get a new version of the official code from SVN.
What's the best way to go about it? That's why I'm here.
I realize these situations rarely, if ever, work out perfectly, and I can deal with that. I just want to improve on how things are, now, in anticipation of where I can see them going!
I have some ideas about how to implement this, but they are of the "naive" variety and I think any tips I could get on method or tools to use would go far. I mean ... is it as simple as declaring new versions of affected methods in my patch code and marking them "overrides"? Also, probably a dumb question but will SVN that will help me do this?
Thanks for reading, and any response.
PS - Sorry if this is the wrong forum, but I am just looking for general, tip-of-the-iceberg type tips/links, so I figured folks could drop a quick answer here. TY!

The patch program on *nix or Cygwin does exactly what you want, and you can create the patchfile using either Subversion or CVS (and any other source control system that provides a diff).
Here's the article that I always turn to to create a CVS Patch (I have to relearn patching every time I do it): https://developer.mozilla.org/en/Creating_a_patch
And here's the equivalent from the Subversion FAQ: http://subversion.tigris.org/faq.html#patch
When I've worked for companies that did local patches, we kept a separate source-control repository/module that held our patches for the various OS libraries that we used. When we'd upgrade, we'd apply the patches and verify they made sense (if you have a lot of patchfiles, this can be a royal pain). And most important, once we had a patched upgrade, we generated a new patchfile from it (because, again, patchfiles become obsolete, and trying to apply a patch from several versions back can sometimes be impossible).
And of course we submitted any bugfixes back to the projects...

Horizontal Spry Menu and Header Collapse in Browser

If you look at this webpage in anything other than IE (specifically Safari), the header and spry menu are kind of collapsed into about a 600px frame, as opposed to the designated 800px area. Any thoughts on why this is happening? It looks fine in IE however... hmmm
Thanks
Sean

Der nevermind. Answered my own question by opening my eyes.
Thanks
Sean

Spry menu not working on mobile browser

How are you with Mobiles, Originally, like a month ago, the main page worked on my Iphone, but the menu has since disapeared. Is there an issue with the spry or CSS.? Can anyone help with this please.   http://www.tompriceshs.wa.edu.au/publish/

sorry Gramps, good to here from you again, the correct is
http://www.tompriceshs.wa.edu.au/Publish/
I checked the original template and it work with
<div class="contentArea">
                <ul class="leftnavigation">
                    <li><a href="#" >This is definitely navigation item 1</a></li>
                    <li><a href="#" >Item 2</a></li>
                    <li><a href="#" >Item 3</a></li>
                </ul>
But I wanted a better menu and also added a div, now is
            </div>
            <div class="contentArea">
                <div id="leftNav" style="float: left; width: 200px; height: auto;">
                <ul class="leftnavigation"><ul id="MenuBar1" class="MenuBarVertical">
            <img src="SpryAssets/MenuBarRound.gif" width="176" height="8" align="absbottom" />
                  <li><a href="\index.htm">Home</a> </li>
                  <li><a href="news/news.html" class="MenuBarItemSubmenu">News</a>
                      <ul>
                        <li><a href="news/news.html">Latest News</a></li>
........................................etc etc to close with
</ul>
Thanks Skip

Disappearing horizontal spry menu in IE.

Hi,
I dont usually have any issues with spry menu, but this time the website was going to have lots of pages, and i wanted to be able to update the menu once so I made the menu as a library item. It looks good but in IE it shows bugs.
The whole menu showing up white in IE and only when you roll over it does it show the particular menu selection. Then I found a form on here that told me to change the position to "relative" now I have a new issue where the whole menu including the sub menu's has pushed all the content down and there is a big space and in the browser comparability it shows me its a "z-index bug". I have tried fixing it but it just does not want to work. Can anyone help, please.
Here is the website http://www.thesimplethings.ca
here is the spry menu code:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    cursor: default;
    width: auto;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 10;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 20;
    cursor: default;
    width: 13em;
    position: relative;
    left: -1000em;
    background-color: #424242;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 13em;
    background-color: #0689C4;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFF;
    color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #666;
    border-bottom-color: #666;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #0689C4;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #0689C4;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

I have noticed that you have removed the above. There is still a problem in IE6 in that the background colour remains white.
To solve this, remove the red parts and add the green parts
ul.MenuBarHorizontal {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    cursor: default;
    width: auto;
    font-family: Arial, Helvetica, sans-serif;
z-index: 10;
    background-color: #424242;
ul.MenuBarHorizontal ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 13em;
    position: absolute;
    left: -1000em;
ul.MenuBarHorizontal ul li {
    width: 13em;
    background-color: #424242;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFF;
    color: #FFF;
ul.MenuBarHorizontal a {
    display: block;
    cursor: pointer;
    background-color: #424242;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
ul.MenuBarHorizontal iframe {
    position: absolute;
    z-index: 1010;
   filter:alpha(opacity:0.1);
Gramps

Spry Menu issues in Internet Explorer

I have created a Spry menu for my website and although the menu appears to look fine in Firefox and Safari, the formatting changes in Internet Explorer(IE).
1.sub menu bar is not dropping down below the main menu bar it is appearing at the top of the screen.
2.When you hover over the sub menu bar items the font should be white however in IE it is appearing as an aqua color.
3.The menu bar is not straight across the page, at the beginning and end there are chunks of the menu bar that appear white.
Are there any fixes for these issues that would help to make the menu look consistent across all browsers. The website page is
www.applmgt.net/LMNtestpage/html, below is the code. Any help would be appreciated as soon as possible.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Process operators – woodbuffalo.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="mystylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style></head>
<script language="JavaScript" type="text/javascript">/* You may give each page an identifying name, server, and channel on the next lines. */var pageName = "CostIntro";var pageType = "";var pageValue = "0";var product = "";/**** DO NOT ALTER ANYTHING BELOW THIS LINE! ****/var code = ' '; </script>
<script src="http://code.superstats.com/code/ss/applicationswb/0/30b" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
br = navigator.appName + parseInt(navigator.appVersion);
if (code != ' ' || br == 'Netscape2') {
document.write(code);
} else {
document.write(' <im'+'g src="http://code.superstats.com/b/ss/applicationswb/1'+ '?pageName=' + escape(pageName) + '" alt="" border=0>'); }</script>
<noscript><img src="http://stats.superstats.com/b/ss/applicationswb/1" alt="" border=0></noscript>
<body vlink="#4E2C03">
<table width="760" border="0" cellspacing="0" cellpadding="2">
<tr>
    <td bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img src="images/buffalobanner2.jpg" width="760" height="142"></td>
</tr>
</table>
<table width="764" border="0" bgcolor="#4E2C03"cellspacing="0" cellpadding="0">
<tr>
    <td width="311" "height="60"><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif"><a href="index.html" class="navbar">www.woodbuffalo.net</a> > <a href="LMNtestStart.html" class="navbar">Labour
          Market News</a></font></td>
          <td width="136" height="65">
<div align="center">
<table width="135" border="0" cellspacing="1" cellpadding="2" bgcolor="#330000">
<tr>
<td bgcolor="#FFFFFF" align="center"><div style="float: right; margin-right:3px; margin-top:2px; background-color: #330000;"><a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" target="_blank"><img src="http://img.constantcontact.com/ui/images1/visitor/email5_trans.gif" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" border="0" align="center"></a></div>
<a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" style="text-decoration:none; font-weight:bold; font-family:Arial; font-size:13px; color:#000000;" target="_blank">Join our FREE Subscriber List</a></td>
</tr>
</table>
</div>
 </td>
<td width="299" height="65"><form action="http://www.applmgt.net/SearchResults.html" id="cse-search-box">
            <div>
              <input type="hidden" name="cx" value="011832208051241677611:jmojvtncciq" />
              <input type="hidden" name="cof" value="FORID:9" />
              <input type="hidden" name="ie" value="UTF-8" />
              <input type="text" name="q" size="31" />
              <input type="submit" name="sa" value="Search" />
            </div>
          </form>
            <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</table><ul id="MenuBar1" class="MenuBarHorizontal">
      <table width="780" border="0" >
        <tr>
          <td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
        </a>
          <ul>
            <li><a href="employINTRO.html">Introduction</a></li>
            <li><a href="aboutWages.html">Wages</a></li>
            <li><a href="employOG.html">Oil & Gas</a></li>
            <li><a href="employSERV.html">Service/Retail</a></li>
              <li><a href="employCONST.html">Construction</a></li>
            <li><a href="employGOVED.html">Gov't/Education</a></li>
            <li><a href="employFOREST.html">Forestry</a></li>
             <li><a href="employTRANS.html">Transportation</a></li>
            <li><a href="employHEALTH.html">Health</a></li>
        </ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
          <ul>
            <li><a href="trainINTRO.html">
            <script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
            Introduction</a></li>
            <li><a href="trainSKILLS.html">General Skills</a></li>
            <li><a href="trainSAFE.html">Safety</a></li>
          </ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
          <ul>
            <li><a href="aboutINTRO.html">Introduction</a></li>
             <li><a href="MediaEvent.html">Coming Events</a></li>
             <li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
      <ul>
        <li><a href="AboutCostHouse.html">Housing</a></li>
        <li><a href="AboutCostAcc.html">Other Accommodations</a></li>
      </ul>
    </li>
    <li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
    <li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
        <ul>
            <li><a href="mediaINTRO.html">Introduction</a></li>
            <li><a href="mediaLMN.html">Labour Market News</a></li>
        </ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
          <ul>
            <li><a href="linksINTRO.html">Introduction</a></li>
            <li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
      <ul>
        <li><a href="AboutCostHouse.html">Housing</a></li>
        <li><a href="AboutCostAcc.html">Other Accommodations</a></li>
      </ul>
    </li>
            <li><a href="linksEMPLIntro.html">Employer Websites</a></li>
            <li><a href="linksRESIntro.html">Resources</a></li>
            <li><a href="linksFACTSIntro.html">Fast Facts</a></li>
            <li><a href="ContactUS.html">Contact Us</a></li>
            <li><a href="privactStatement.html">Privacy Statement</a></li>
            <li><a href="disclaimer.html">Disclaimer</a></li>
            <li><a href="siteMAP.html">Site Map</a></li>
</ul>
          <ul>
    </td>
</tr> </td>
        </tr>
</table>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
    <td width="760" height="40" bgcolor="#FFFFFF"><p><font color="#4E2C03" size="4" face="Arial, Helvetica, sans-serif"><strong>Process
            operators: Maintaining a career in the oil sands industry</strong></font><img src="images/darkLine.gif" width="750" height="3"></p>
    </td>
</tr>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
    <td colspan="2" valign="top"><table width="760" border="0" cellspacing="0" cellpadding="4">
      <tr>
        <td width="135" valign="top"><table width="165" height="188" border="0" cellpadding="1" cellspacing="0" bgcolor="FFFFFF">
          <tr>
            <td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Main
                story</strong></font></td>
          </tr>
          <tr>
            <td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
          </tr>
          <tr>
             <td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>What's in a Name?</strong></font></td>
          </tr>
          <tr>
            <td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
          </tr>
          <tr>
            <td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Schools Offering Programs</strong></font></td>
          </tr>
          <tr>
            <td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
          </tr>
          <tr>
            <td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Apply for an Oilsands Job</strong></font></td>
          </tr>
          <tr>
            <td><p><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></p></td>
          </tr>
        </table>
          <p> </p>
          <table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="ddcb8f">
            <tr>
              <td><div align="left">
                <p><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><em>"A
                        process operator, whether in Fort McMurray, or in a gas
                        plant in Medicine Hat, basically processes the upstream
                        oil and gas until it's purified enough to go through
                        a pipeline outside the gates of the plant." </em></font></p>
                <p align="right"><font color="4e2c03" size="2" face="Arial, Helvetica, sans-serif"><strong>John Cook,<br>
                  associate dean of technology, Keyano College</strong></font></p>
                </div></td>
            </tr>
          </table>          <p> </p>
          <table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
            <tr>
              <td><div align="left">
                  <p align="center"><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><strong><a href="contactUS.html"><img src="images/bulletin/LMNWB200810vFinal1.gif" width="121" height="158" border="0"></a></strong></font><font color="#000000" size="3" face="Arial, Helvetica, sans-serif"><strong>Free Subscribe
                    Now!</strong></font></p>
</div>
              </td>
            </tr>
          </table>          <p> </p>
          <table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
            <tr>
              <td><div align="left">
                  <p align="center"><a href="mediaLMN1208.html"><font color="#000000" size="4.5" face="Arial, Helvetica, sans-serif"><strong>Next
                    issue...</strong></font></a></p>
                  <p align="center"><a href="mediaLMN1208.html"><strong><font color="333399" size="3" face="Arial, Helvetica, sans-serif"><img src="images/htmlbulletinimages/1008v5.png" width="125" height="159" border="0"></font></strong></a></p>
                  <p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Janitoral</font></strong></a></p>
                  <p align="center"><a href="mediaLMN1208.html"><img src="images/htmlbulletinimages/1008v6.png" width="123" height="141" border="0"> </a></p>
                  <p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Security</font> </strong></a></p>
              </div>
              </td>
            </tr>
          </table>          <p> </p>          <table width="155" height="141" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
            <tr>
              <td><div align="left">
                  <p align="center"><font color="#000000" size="2" face="Arial, Helvetica, sans-serif"><strong><font color="#FF9933">If
                    you like this article, you might also like:</font></strong></font></p>
                  <p align="center"><font color="#FF0000" size="3.5" face="Arial, Helvetica, sans-serif"><strong><a href="mediaLMN1206.html">Employment in the oilsands</a></strong></font></p>
              </div>
              </td>
            </tr>
          </table>          <p> </p></td>
        <td width="605" valign="top"><p><div class="floatrightgrey">
          <p><img src="images/htmlbulletinimages/1008v1" width="325" height="221"> </p>
<p><font size="1" face="Arial, Helvetica, sans-serif"><em>Process operators are expected to be in high demand in the next few years. One study reported that between 2006 and 2020, over 5,000 new plant and facility operators will be needed in the oil sands.</em></font></p>
</div>
          <font size="2" face="Arial, Helvetica, sans-serif">One study reported that between 2006 and 2020, over 5,000 new plant
          and facility operators will be needed in the oil sands. As construction
          of more and more oil sands projects ends and production begins, there
          is a change in the kind
          of workers most needed. More maintenance trades are needed and less
          construction trades workers are needed. Also, companies now need more
          operating and technical employees, such as process operators, power
          engineers, and instrumentation technicians.<p>A study recently put out by the Government of Alberta (Report on Phase
          2 of the Oil Sands Labour Resource Study) found that from 2006 to 2020,
          15,000 new employees would be needed for operations and maintenance
          in the oil sands industry. The study says there will be a need for
          over 5,000 plant and facility operators between 2006 and 2020. This
          includes process operators
          (noc 9232) and power engineers (noc 7351).
          </p><p><div class="floatleft">
<p><img src="images/htmlbulletinimages/1008v2" width="356" height="235">
    <em><font size="1"><br>
    Over the next few years, more plants and facilities will open up and the
    demand for process operators and power engineers will increase. There is
    advancement in this industry and even movement between industries.</font></em></p>
</div>
          </font>
          <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Opportunities</strong><br>
            Recently, there have been over 80 job postings for process operators
            and power engineers, so there is great opportunity in Wood Buffalo
            for this occupation.
          </font><font size="2"> </font></p>
            <p><font size="2" face="Arial, Helvetica, sans-serif">“Attrition
              is one reason (for the increased need) because a lot of the older
              guys are going to be coming to the age of retirement within a
              very short time and they will have to be replaced,” says
              John Cook, associate dean of technology with Keyano College. “The
              other reason is expansion of the existing plants and new plants
            starting up.”</font></p>
          <p><font size="2" face="Arial, Helvetica, sans-serif">Hazel White,
                recruitment advisor with Syncrude Canada Ltd. says they recently
                had a large number of process operator
                  positions
                  posted online
                  because of their practice to promote staff within the company.While
                  this is an entry-level position, most companies require that
                their employees have at least a high school diploma and their fourth
                  class power engineering ticket. For more information on education,
                  see Schools
                  on page 4.</font><font face="Arial, Helvetica, sans-serif">           </font>          </p>
          <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Process operators</strong><br>
            There are a few different kinds of process operators: refinery/upgrader
            process operator, gas plant operator, and oil and gas pipeline operator,
            to name a few. The jobs found in Fort McMurray are generally related
            to mineral and hydrocarbon processing in the oil sands industry.</font></p>
          <p><font size="2" face="Arial, Helvetica, sans-serif">When
                  searching for jobs, be aware that there are a number of different
              job titles for process operators. Usually, the title of the job
              is based on the process the employee is involved with or by the
              unit
                  in which the employee works. See the list on this page for
              other common
              job titles found recently on Job Bank.<img src="images/htmlbulletinimages/1008v3.png" width="209" height="365" align="right" class="floatrightnocut"></font></p>          <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Movement between
              industries</strong><br>
              There are industries other than oil and gas where process operators
              can work, such as pulp mills and chemical plants. They may process
              different products, but employers will often consider hiring workers
              from these other industries.</font></p>
              <p><font size="2" face="Arial, Helvetica, sans-serif">“We have been successful in taking people that had previously worked
                in a paper mill,” says White with Syncrude. “The processes
                are certainly different. They’re dealing with paper, rather
                than oil, but we recently hired 18 (previous mill workers) and
                it’s
                my understanding that all 18 have gotten their fourth class tickets
                since coming to Syncrude. We still need people with refinery experience,
              but it is possible.” </font></p>            <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Power engineering</strong><br>
              Process operators in the Fort McMurray area generally have their
                fourth or third class power engineering certificate, which allows
                them to
                process steam and operate boilers. Other process operators, such
                as pulp mill operators, don’t necessarily need this. </font></p>
              <p><font size="2" face="Arial, Helvetica, sans-serif">In
                  order to be called a power engineer, a person must be certified
                  through the Alberta Boilers Safety Association to operate pressure
              equipment (www.absa.ca). </font></p>
              <p><font size="2" face="Arial, Helvetica, sans-serif">There are
                  four different levels of power engineer—the lowest
                    is fourth class, going up to first class. For more information
                  on the Alberta Boilers Safety Association, contact their Fort
                    McMurray office
                at 780-714-3067.</font></p>            <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Field and control
              room operators</strong><br>
              There are basically two levels of process operators in Fort McMurray:
                  field operators and control room operators (or board operators). </font></p>
                <p><font size="2" face="Arial, Helvetica, sans-serif">“</font><font size="2" face="Arial, Helvetica, sans-serif">Primarily
                      when someone is starting out, they’re in the field,” says
                      Cook. “After a few years they can become a board
                      operator if they want to do that. They are more experienced
                      and are
                      kind of like
                      the team lead. They tell the field people what needs to
                      be done and if it needs manual operation, (the field operators)
                      go out and do it—turning
                      valves, adjusting an instrument to control temperature,
                pressure, flow, or level.”</font></p>
                <p><font size="2" face="Arial, Helvetica, sans-serif">Process
                    operators are responsible for the initial separation processes
                    or the special treatment
                        required to ensure that
                        impurities such
                        as water and sediments are removed from oil and gas in
                        the field. Once
                        separated, the oil or gas is transported by pipeline
                  to refineries, gas plants or markets.</font></p>
                <p><font size="2" face="Arial, Helvetica, sans-serif">Some duties
                    of a process operator are operating equipment to ensure that
                    the oil meets
                      specifications before it
                          goes into
                          a pipeline.
                    Some of the equipment could be:<img src="images/htmlbulletinimages/1008v4" width="302" height="201" class="floatrightnocut"></font></p>
                <ul>
            <li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">dehydration
                    units</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">vacuum and atmospheric
                  distillation columns</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">cokers</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">fractionators</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">pumps</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">steam
                    turbines</font></li>
            <li><font size="2" face="Arial, Helvetica, sans-serif">heat exchangers</font></li>
          </ul>          <p><font size="2" face="Arial, Helvetica, sans-serif">“A process operator, whether in Fort McMurray, or in a gas plant
                                  in Medicine Hat, basically processes the upstream
oil and gas until it’s
                                      purified enough to go through a pipeline
outside the gates of the plant,” says
                                Cook. </font></p>
          <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Co-op education</strong><br>
              There are many power engineering programs around northern Alberta
                    (see below) and some process operating courses. Keyano College
                    offers co-ops
                    for both courses and one of the advantages of this program,
                    besides being in Fort McMurray, is the job placements which
            are provided.</font></p>
          <p><font size="2" face="Arial, Helvetica, sans-serif">“We only take as many students as we can guarantee work placement
                spots, and students have to compete for a seat,” says Cook. “We
                      look at their educational background, their marks and then
                there’s
                      an interview process with Keyano staff and industry people—just
              like applying for a job.”</font></p>          <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Salary and benefits</strong><br>
              The pay range for this occupation varies greatly depending
                      on experience and training, but the range is about $20
                    to $47 per
                      hour, but averages
                      about $30 to $40 per hour. </font></p>
              <p><font size="2" face="Arial, Helvetica, sans-serif">Because these
                  positions are for ongoing production and maintenance of oil
                  sands projects,
                    employees are expected
                        to move to
                        Fort McMurray, regardless of whether they are doing shift
                        work or
            not.</font></p>
              <p><font size="2" face="Arial, Helvetica, sans-serif">Over the
                  next few years, there will be many more opportunities for people
                  wanting to get into a career in process
                    operating
              or power engineering.</font></p></td>
      </tr>
    </table></td>
</tr>
<tr>
    <td width="586"> </td>
</tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="4" bgcolor="FFFFFF">
<tr>
    <td height="10" colspan="2" bgcolor="#FFFFFF"><img src="images/darkLine.gif" width="750" height="3"></td>
</tr>
<tr>
    <td width="160" height="20" bgcolor="#FFFFFF"><div align="left"><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif">This
          website is funded by the Government of Alberta. </font></div>
    </td>
    <td width="199" align="center" valign="middle" bgcolor="#FFFFFF"><div align="right"><img src="images/GoA - EI 2Color C.PNG" width="170" height="31" border="0"></div>
</tr>
<tr>
    <td height="8" colspan="2" bgcolor="#DDCB8F"><table width="760" border="0" cellspacing="0" cellpadding="4">
        <tr>
          <td width="108"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="index.html">Home</a></font></strong></font></strong></font></div>
          </td>
          <td width="104"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="linksINTRO.html">Links</a></font></strong></font></strong></font></div>
          </td>
          <td width="117"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="contactUS.html">Contact
                          Us</a></font></strong></font></strong></font></div>
          </td>
          <td width="151"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="privacyStatement.html"> Privacy
                      Statement</a></font></strong></font></div>
          </td>
          <td width="119"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="disclaimer.html">Disclaimer</a></font></strong></font></div>
          </td>
          <td width="113"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="siteMAP.html">Site
                      Map</a></font></strong></font></div>
          </td>
        </tr>
      </table>
    </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">

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

Hi Nadia thanks for your help in trying to fix the spry menus.
I am new to Dreamweaver and therefore would appreciate a bit more help with the issues you identified.
I did replace the doctype. As for removing the menu from a table and putting it into a div, would you be able to identify in the code below how I would do that? Thanks
Spry Menu Code
</table><ul id="MenuBar1" class="MenuBarHorizontal">
      <table width="780" border="0" >
        <tr>
          <td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
        </a>
          <ul>
            <li><a href="employINTRO.html">Introduction</a></li>
            <li><a href="aboutWages.html">Wages</a></li>
            <li><a href="employOG.html">Oil & Gas</a></li>
            <li><a href="employSERV.html">Service/Retail</a></li>
              <li><a href="employCONST.html">Construction</a></li>
            <li><a href="employGOVED.html">Gov't/Education</a></li>
            <li><a href="employFOREST.html">Forestry</a></li>
             <li><a href="employTRANS.html">Transportation</a></li>
            <li><a href="employHEALTH.html">Health</a></li>
        </ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
          <ul>
            <li><a href="trainINTRO.html">
            <script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
            Introduction</a></li>
            <li><a href="trainSKILLS.html">General Skills</a></li>
            <li><a href="trainSAFE.html">Safety</a></li>
          </ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
          <ul>
            <li><a href="aboutINTRO.html">Introduction</a></li>
             <li><a href="MediaEvent.html">Coming Events</a></li>
             <li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
      <ul>
        <li><a href="AboutCostHouse.html">Housing</a></li>
        <li><a href="AboutCostAcc.html">Other Accommodations</a></li>
      </ul>
    </li>
    <li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
    <li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
        <ul>
            <li><a href="mediaINTRO.html">Introduction</a></li>
            <li><a href="mediaLMN.html">Labour Market News</a></li>
        </ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
          <ul>
            <li><a href="linksINTRO.html">Introduction</a></li>
            <li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
      <ul>
        <li><a href="AboutCostHouse.html">Housing</a></li>
        <li><a href="AboutCostAcc.html">Other Accommodations</a></li>
      </ul>
    </li>
            <li><a href="linksEMPLIntro.html">Employer Websites</a></li>
            <li><a href="linksRESIntro.html">Resources</a></li>
            <li><a href="linksFACTSIntro.html">Fast Facts</a></li>
            <li><a href="ContactUS.html">Contact Us</a></li>
            <li><a href="privactStatement.html">Privacy Statement</a></li>
            <li><a href="disclaimer.html">Disclaimer</a></li>
            <li><a href="siteMAP.html">Site Map</a></li>
</ul>
          <ul>
    </td>
</tr> </td>
        </tr>
</table>

Spry menu & jquery tweak

Hi!
I have two items I need help tweaking.
1) the page has the jQuery portfolio, and for some reason, just by having this inserted on the page has "blocked" my spry menu drop down for the portfolio links within.
2) I've repeated the jQuery gallery twice on the same page so as to compartmentalize different works...the ability to choose how to view the portfolio samples is not working on the second one, but works for the top one. Don't know why when the exact script has been duplicated?
Can you please help me address these issues so that I may tweak accordingly? Thank you!
http://c2cstudios.com/c2cstudios_11/illustration/index.html

The following is an example of placing two ad-gallery widgets in the one document.
<!DOCTYPE HTML>
<html>
<head>
<link href="jquery.ad-gallery.css" rel="stylesheet">
<style type="text/css">
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    color: #333;
    line-height: 140%;
select, input, textarea {
    font-size: 1em;
body {
    padding: 30px;
    font-size: 70%;
    width: 800px;
h2 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px dotted #dedede;
h3 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
.example {
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
ul {
    list-style-image:url(../jquery.ad-gallery.1.2.4/list-style.gif);
pre {
    font-family: "Lucida Console", "Courier New", Verdana;
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
code {
    font-family: "Lucida Console", "Courier New", Verdana;
    margin: 0;
    padding: 0;
#gallery, #gallery2 {
    padding: 30px;
    background: #e1eef5;
#descriptions, #descriptions2 {
    position: relative;
    height: 50px;
    background: #EEE;
    margin-top: 10px;
    width: 640px;
    padding: 10px;
    overflow: hidden;
     #descriptions .ad-image-description, #descriptions2 .ad-image-description {
          position: absolute;
     #descriptions .ad-image-description .ad-description-title, #descriptions2 .ad-image-description .ad-description-title {
          display: block;
</style>
<title>A demo of AD Gallery - Coffeescripter.com</title>
</head>
<body>
<div id="container">
    <div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/1.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t1.jpg" title="apolo ohno" class="image0">
              </a>
            </li>
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/2.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t2.jpg" title="simone" class="image1">
              </a>
            </li>
         </ul>
        </div>
      </div>
    </div>
    <div id="descriptions"></div>
    <p>Examples of how you can alter the behaviour on the fly;
    Effect: <select id="switch-effect">
      <option value="slide-hori">Slide horizontal</option>
      <option value="slide-vert">Slide vertical</option>
      <option value="resize">Shrink/grow</option>
      <option value="fade">Fade</option>
      <option value="">None</option>
    </select><br>
    </p>
    <div id="gallery2" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/1.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t1.jpg" title="apolo ohno" class="image0">
              </a>
            </li>
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/2.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t2.jpg" title="simone" class="image1">
              </a>
            </li>
         </ul>
        </div>
      </div>
    </div>
    <div id="descriptions2"></div>
    <p>Examples of how you can alter the behaviour on the fly;
    Effect: <select id="switch-effect2">
      <option value="slide-hori">Slide horizontal</option>
      <option value="slide-vert">Slide vertical</option>
      <option value="resize">Shrink/grow</option>
      <option value="fade">Fade</option>
      <option value="">None</option>
    </select><br>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.ad-gallery.js"></script>
<script>
$(function() {
          var galleries = $('#gallery.ad-gallery').adGallery();
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
          var galleries2 = $('#gallery2.ad-gallery').adGallery();
    $('#switch-effect2').change(
      function() {
        galleries2[0].settings.effect = $(this).val();
        return false;
</script>
</body>
</html>
Notice that the ID's for the second widget have changed as well as a second constructor and the addition of style rules for the extra ID's. Note also that the selector has changed to target the relevant gallery with the addition of #gallery and #gallery2
Gramps

Dreamweaver / Spry Menu / iWeb question

Hi,
I'll try to keep this brief. I'm not a talented web page designer... I know my way around iWeb and have poked around a bit in Dreamweaver.
In Dreamweaver I've created a simple Spry horizontal dropdown menu. I'd like to add that menu bar I've made into an iWeb page using "add html" snippet. I can't seem to get to work though. I am aware that Dreamweaver creates a folder called "SpryAssets" that is necessary for this to work, and I've attempted to move it into my iWeb root folder but still no success.
A) Is this even possible?
B) Can anyone walk me through how I can merge a Dreamweaver Spry Menu bar into an iWeb snippet?
Many thanks if you can give this a quick whirl and see if its possible.

Post-published pages do not show up in iWeb. iWeb is not an html editor that displays html pages, it generates html pages upon publish. So no. the page would not be visible in iWeb and anytime you made a change to your iWeb page you would need to publish the site, open the generated html page, and edit the html to add the spry menu.
As you've mentioned you have already created the spry menu so you have the spry menu code. Do as I mentioned in the first post: create a text box with easy to find words, publish, open the html file, replace CODEGOESHERE with your spry menu code. Add linked js and css to head of iWeb-generated html page. An example of the code to replace with your spry menu code would look like this:
<div>CODEGOESHERE</div>
replace CODEGOESHERE with your spry menu code. Then in head add links to spry .js and css
iWeb is a toy, dreamweaver is a professional tool used to develop prototypes of professional websites. You are looking for a bridge between the two which will become cumbersome. I recommend that you drop iWeb, learn html and css and use DW for your web development needs.

Master / Template Spry Menu?

I am new to Dreamweaver, teaching myself through online tutorials and have faired pretty well until now.
I have been building a website as a digital porfolio and now that I have more pages, managing the spry menu I initally created is becomeing more difficult.
So far, every time I add a page I update the spry menu bar on the main page, then copy and paste it onto all the pages that have the same menu and then re-upload every page to the internet. (Very Tedious)
I would like to create a master or template spry menu bar, that I can update that will automaticlly update on all pages using the same menu.
All the tutorials I have found have been on how to crate and poupulate the menu, so if someone could dirrect me to a tutorial more fit for what I'm trying ot achieve, I owuld be greatly appreciative.
If you like you can look at hte menubar I am refferign to at http://mgarito.com/Portfolio/Portfolio.html (only the tabs Graduate and Undergard have been populated with data thus far)

Heya Michael,
It may be that you're not using the correct file directory to point to your include file. If MenuBar.php is in the root of your site and the include is in a different directory you may have to insert the include with preceding ../ to point to the include file in a higher directory.
<?php include("../../spry_menu.php"); ?>
Also in MenuBar.php insert only the spry menu code not the doctype, head, body, etc. what I'd do is put the head js and css in the pages you have the menu bar and just put this in MenuBar.php
<ul id="PortfolioMenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="http://mgarito.com/Portfolio/Graphic/PlexiPlates/PlexiPlates.html">Graduate</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Graduate/TransbayHSR/TransbayHSR.html">Transbay HSR</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graduate/Firefly/Firefly.html">Firefly</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graduate/Gem/Gem.html">Gem</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graduate/LiveWork/LiveWork.html">Live / Work</a></li>
      </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Undergrad</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/NYC/NYC.html">NYC Gateway</a></li>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/ReadingRoom/ReadingRoom.html">Reading Room</a></li>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/AfricanArtMuseum/AfricanArtMuseum.html">African Art Museum</a></li>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/DoorWindowStair/DoorWindowStair.html">Door Window Stair</a></li>
      </ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Lighting</a>
      <ul>
        <li><a href="#" class="style8">Welded Wire Lamp</a> </li>
        <li><a href="#">Tower Lamps</a></li>
        <li><a href="#">Cantilever Lamp</a></li>
      </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Furniture</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Furniture/Easel/Easel.html">Easel</a></li>
      </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Fashion</a>
    <ul>
      <li><a href="http://mgarito.com/menubartest2.php">Accessories</a></li>
      <li><a href="http://mgarito.com">Clothing</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Graphic</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Graphic/PlexiPlates/PlexiPlates.html">Plexi Plates</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graphic/Pastel/Pastel.html">Pastel</a></li>
      </ul>
</li>
</ul>
<script type="text/javascript">

</script>

In Spry menu, can I make the dropdown colors different from the main one?

In this menu at the link, I would like to keep "who we are" in the color it is, but make its submenu colors different. I can't see to find in the CSS where to do that without changing both the main and sub menu colors.
Homepage

Based on the default Spry menu code you are correct that it is all or nothing. The only alternative you could do is create your own custom CSS class to use on all sub-menu items on the drop-down to override the colors. This declaration would need to be after the Spry submenu one that you have found because the browsers will read CSS from start to finish so the later declarations will override the earlier ones.

Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

Log-in to the Adobe Exchange with your Widget Browser and grab "Spry Menu 2.0."
http://labs.adobe.com/technologies/widgetbrowser/
In Widget browser, style the menu as desired and Save files to your DW Local Site folder.
Nancy O.

Spry Menu Bar 2.0 auto-width issues for sub items

I am testing the spry menu bar 2.0 and it displays perfectly in IE 9.0/8.0 but the auto width is not working for Firefox (testing 3.6.16), Chrome (testing 10.0.648.205), or Safari for windows. Content is being driven by PHP and MySQL. This is the first time I have come across something working better in IE than the other browsers. Great job on the IE patch script. How do I get the other browsers to cooperate? I moved the in page CSS generated by the widget browser to it's own CSS (called spry_menubar2_horizontal_sample_layout.css) and am including the files below in the head. The links below point to an exact copy of the files as the working copy of the files is located elsewhere.
SpryMenuBasic.css - link
SpryMenuBasicSkin.css - link
spry_menubar2_horizontal_sample_layout.css - link
SpryDOMUtils.js - link
SpryDOMEffects.js - link
SpryWidget.js - link
SpryMenu.js - link
SpryMenuBarKeyNavigationPlugin.js - link
SpryMenuBarIEWorkaroundsPlugin.js - link
the in page script is loacated directly under the <ul> lists.
Similar example with php removed:
<div id="navigation">
    <ul id="MenuBar">
      <li> <a href="http://www.videoonpointe.com/">Home</a> </li>
      <li> <a href="#">Gallery</a>
      <ul>
        <li> <a href="#">View Gallery</a></li>
        <li> <a href="#">Select Gallery</a>
          <ul>
        <li> <a href="#">Main Gallery</a>
          <ul>
            <li> <a href="#">a gallery</a></li>
        </ul>
        </li>
      </ul>
      </li>
        <li> <a href="#">Edit this Gallery</a></li>
        <li> <a href="#">Create Gallery</a> </li>
        <li> <a href="#" onClick="return confirm('This action cannot be undone. Are you sure?');">Delete this Gallery</a></li>
      </ul>
      </li>
            <li> <a href="#">Photo</a>
          <ul>
            <li> <a href="#">Edit Photo</a> </li>
            <li> <a href="#" onClick="return confirm('Deletion of this image cannot be undone. Are you sure?');">Delete Photo</a> </li>
            <li> <a href="#">Set as Gallery Thumbnail</a> </li>
            <li> <a href="#">Change Watermark</a> </li>
          </ul>
          </li>
      <li> <a href="#">Pricesheet</a>
        <ul>
          <li> <a href="#">Pricesheet Admin</a> </li>
    </ul>
      </li>
   </ul>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
           widgetID: "MenuBar",
           widgetClass: "MenuBar MenuBarLeftShrink",
           insertMenuBarBreak: true,
           mainMenuShowDelay: 100,
           mainMenuHideDelay: 200,
           subMenuShowDelay: 200,
           subMenuHideDelay: 200
</script>
</div>
Has anyone encountered this issue before? Any thoughts on how it can be fixed? Thank you for your help.

I am surprised no one has responded yet. Surely someone has encountered this before. Any thoughts?

Spry Menu Bar - Different Background Image Wanted for menu items

Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
         <li><a href="#">Help</a></li>
    </ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #0000;
    text-decoration: none;
    font: normal 12px Verdana, Geneva, sans-serif;
    background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

Spry Menu bar looks OK in Live View, not browser

I'm trying to insert a Spry menu bar in an existing site to replace one previously built with an F-source product. There is a Flash movie above the menu bar. It looks fine in Live View, but when I look at it in a browser, it expands to about ten times its height with only the last menu item visible (out of nine). It also displaces the Flash movie to the left and up. Any idea what's causing this, and how to fix it? Thanks for any help you can provide!
Live View:
Browser View:

Thanks for your help. I tried to add the code above the menu bar (you didn't specify whether to add before the body tag) but it didn't help in either location.
I've uploaded the page in question to the site. You can access the page via http://www.acsi-cybersa.com/index2.html
If you back up to the "www.acsi-cybersa.com" URL, you will see a working homepage with an f-source menu that is acting a bit squirrely, and which I am trying to replace with the Spry menu. The URL above "index2.html" is the working replacement for the home page.
If you can figure out what's happening with the Spry menu and how to fix it, I would be eternally grateful.
Thanks, Dan

Spry Menu code patch for IE browser?

Similar Messages

Maybe you are looking for