Horizontal Spry Menu displays incorrectly in Explorer

I looked in other discussions to find an answer to this, but I can't find the right answer.
My issue is that my Horizontal Spry Menu Bar, which displays correctly in Firefox and Chrome, displays vertically and on the left side of the page in Explorer.
I had a heck of a time getting the Menu Bar to work at all, so I'm sure there are issues in the coding, but don't know what they are.
Any help is appreciated.
Jean
jeanrivard.com
jeanrivard.com/vo

This appears to have worked. Thank you Gramps!
Jean

Similar Messages

  • Having problem with spry menu bar in Internet Explorer.

    I'm having a problem with my spry menu bars in Internet Explorer.
    Here are the pictures:
    Firefox
    Internet Explorer
    HERE ARE THE CODES:
    HTML CODE:
    <style type="text/css">
    <!--
    #apDiv1 {
        position:absolute;
        width:160px;
        height:126px;
        z-index:1;
        left: 205px;
        top: 424px;
        margin: 0 auto;
    -->
    </style>
    <style type="text/css">
    #apDiv3 {
        position:absolute;
        width:254px;
        height:206px;
        z-index:2;
        left: 123px;
        top: 1529px;
    #apDiv4 {
        position:absolute;
        width:250px;
        height:194px;
        z-index:3;
        left: 381px;
        top: 1528px;
    #apDiv5 {
        position:absolute;
        width:256px;
        height:200px;
        z-index:4;
        left: 636px;
        top: 1529px;
    #apDiv6 {
        position:absolute;
        width:349px;
        height:205px;
        z-index:5;
        left: 889px;
        top: 1530px;
    </style>
    <style type="text/css">
    #apDiv7 {
        position:absolute;
        width:887px;
        height:204px;
        z-index:6;
        left: 324px;
        top: 905px;
    #apDiv8 {
        position:absolute;
        width:1295px;
        height:74px;
        z-index:1;
        left: 212px;
        top: 668px;
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    <style type="text/css">
    #apDiv2 {
        position:absolute;
        width:209px;
        height:197px;
        z-index:2;
        top: 1220px;
        left: 171px;
    #apDiv9 {
        position:absolute;
        width:331px;
        height:97px;
        z-index:3;
        left: 385px;
        top: 1218px;
    #apDiv10 {
        position:absolute;
        width:292px;
        height:199px;
        z-index:4;
        left: 724px;
        top: 1218px;
    #apDiv11 {
        position:absolute;
        width:200px;
        height:115px;
        z-index:1;
    body {
        background-color: #000;
        background-image: url();
        text-align: center;
        color: #F00;
    .none {
        font-size: 80px;
        font-family: "Times New Roman", Times, serif;
        font-weight: bold;
    #apDiv12 {
        position:absolute;
        width:991px;
        height:60px;
        z-index:5;
        left: 198px;
        top: 192px;
    #apDiv13 {
        position:absolute;
        width:200px;
        height:115px;
        z-index:1;
        left: 588px;
        top: 322px;
    </style>
    <body onLoad="MM_preloadImages('images/WebConfroll.png','images/youthfootballroll.png','images/ statefbsweatshirt.png')">
    <p align="center" class="none"><img src="images/footballtitle.png" width="941" height="183"></p>
    <div align="center">
      <ul id="MenuBar2" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">[Placeholder]</a>
          <ul>
            <li><a href="#">[Placeholder]</a></li>
            <li><a href="#">[Placeholder]</a></li>
            <li><a href="#">[Placeholder]</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">[Placeholder]</a>
          <ul>
            <li><a href="#">[Placeholder]</a></li>
            <li><a href="#">[Placeholder]</a></li>
            <li><a href="#">[Placeholder]</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">Videos</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="#">2008 Videos</a>
              <ul>
                <li><a href="videos/2009 videos/Glenbard part one/partone.html">Glenbard South Game</a></li>
                <li><a href="#">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&# 160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[Placeholder]</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">2009 Videos</a>
              <ul>
                <li><a href="#">[Placeholder]</a></li>
                <li><a href="#">[Placeholder]</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">2010 Videos</a>
              <ul>
                <li><a href="#">[Placeholder]</a></li>
                <li><a href="#">[Placeholder]</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><span class="cent"><img src="images/bulldoghelmit.png" width="150" height="99" /></span></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p class="cent"> </p>
    <div align="center">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li> <a class="MenuBarItemSubmenu" href="#">Football Season 2008</a>
          <ul>
            <li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Defense%20Stats.pdf">Defense Stats</a></li>
            <li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Offense%20Stats.pdf">Offense and Records</a></li>
            <li><a href="http://page.bps101.net/web/t1350/BHS%20All%20Time%20Stats.pdf">AllTime Data</a></li>
            <li><a href="http://page.bps101.net/web/t1350/Football2009/Western%20Sun%202009.pdf">Western Sun Final Standings</a></li>
          </ul>
        </li>
        <li> <a href="#" class="MenuBarItemSubmenu">Football Season 2009</a>
          <ul>
            <li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Defense Stats</a></li>
            <li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Record Book and Offense</a></li>
            <li><a href="http://page.bps101.net/web/t1350/Football%202010/All-Time%20Data%202009.pdf">Alltime Data</a></li>
          </ul>
        </li>
        <li> <a class="MenuBarItemSubmenu" href="#">Football Season 2010</a>
          <ul>
            <li><a href="http://page.bps101.net/web/t1350/Football%202011/2011%20Checklist.pdf">2010-2011 Offseason Checklist</a></li>
            <li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Defense%20Stats%20Final.pdf">Defense Stats</a></li>
            <li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Stats%20Packet.pdf">Record Book and Offense</a></li>
            <li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20ALL%20TIME.pdf">Alltime Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <p align="center"> </p>
    <p align="center"> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><img src="images/Batavia Youth football.png" alt="" width="869" height="200" /></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/WebConfroll.png',1)"></a></p>
    <div align="center">
      <div align="center"></div>
      <div align="center"><a href="http://www.athletics2000.com/upstate8/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/WebConfroll.png',1)"><img src="images/WebConf.png" name="Image7" width="206" height="194" border="0" id="Image7" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/statefbsweatshirt.png',1)"><img src="images/statefbsweatshirt.jpg" name="Image6" width="375" height="199" border="0" id="Image6" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/youthfootballroll.png',1)"><img src="images/youth football.png" name="Image8" width="329" height="197" border="0" id="Image8" /></a></div>
    </div>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/youthfootballroll.png',1)"></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><img src="images/Logos.png" width="1167" height="199" /></p>
    <script type="text/javascript">
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    CSS CODE
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: auto 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 54em;
        border-top: thick solid #00F;
        border-left: thick solid #00F;
        border-right: thick solid #00F;
        border-bottom: thick solid #00F;
        height: 2.2em;
    /* 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;
        cursor: pointer;
        width: 18em;
        float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 18em;
        position: absolute;
        left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 18em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #000;
        padding: 0.5em 0.75em;
        color: #C96;
        text-decoration: none;
        text-align: center;
        height: 1.2em;
    /* 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: #900;
        color: #009;
    /* 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: #900;
        color: #FFF;
        text-decoration: underline;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        color: #FF0;
        font-family: "Lucida Console", Monaco, monospace;
    /* 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;
    The website is http://wwww.bataviabulldogfootball.tk

    Note that running your page through the W3C Validator gives this list of errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bataviabulldogfootball.tk%2F&charset=%2 8detect+automatically%29&doctype=Inline&group=0
    I see that you have a very thin doctype at the top. I suggest you create a new page in Dreamweaver and copy the bit at the top of the page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Then put that code in place of these lines from your current page:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    I see that you have two opening <body> tags. Delete one; it is not needed. Add the preload images from the second into the first body tag and delete the second.
    I see code below the closing </html> tag. Re position it before the closing </body> tag.
    Because of these errors mentioned above, it was impossible to see the page. Fix and reply here when you have done so.
    Also, it is not possible for me to divine what difficulty you are having. If you can please also express it in English (LOL), I'll be happy to suggest a correction for you!
    Beth
    p.s. Posting entire blocks of code is NEVER as helpful as giving us a link to the pages in action. I seldom read through code dumps here in the Forum.
    Message was edited by: Zabeth69

  • Horizontal Spry Menu appears as bullet point list in IE8 and below - fine in firefox, chrome and IE9

    This one is breaking my brain! I have an horizontal spry menu bar in my website that renders correctly in all browsers except ie 8 and below where it appears like an unordered list - almost like no CSS had been applied at all. You can check out the site here http://www.webhance.com.au. The spry css looks like this:
    @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: 130%;
    cursor: default;
    width: auto;
    float:right;
    /* 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;
    cursor: pointer;
    width: 150px;
    float: right;
    text-align:center;
    font-family:"AvantGarde Bk BT";
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 150px;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 150px;
    /* 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-right: 1px solid #9fe2fd;
    text-align:center;
    font-family:"AvantGarde Bk BT";
    background-color:#4c859d;
    color:#FFF;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    border-right: 1px solid #9fe2fd;
    display: block;
    cursor: pointer;
    background-color: #4c859d;
    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: #4c859d;
    color: #9cc9a0;
    /* 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: #4c859d;
    color: #9cc9a0;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    float: left;
    background: #FFF;
    The HTML for the section looks like this:
    <div class="header">
      <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html" id=button1>Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Services</a>
        <ul>
          <li><a href="design.html">Web Design</a>        </li>
          <li><a href="maintenance.html">Web Maintenance</a></li>
          <li><a href="social.html">Social Media</a></li>
        </ul>
      </li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a>    </li>
    </ul>
    <!-- end .header --></div>
    I really really need some help - hope someone out there can point me in the right direction :-)
    Julie

    Hi Gramps - thanks for getting back to me - I took advantage of your advice to others with some other issues I had and they worked a charm so I was really hoping to hear from you :-)
    Unfortunately removing media="only screen and (min-width: 769px) from the css call didn't resolve the problem.  Check it out on my index page www.webhance.com.au/index.html Any other ideas?
    Cheers, Julester

  • HELP PLEASE!!! Horizontal Spry Menu

    I'm having trouble with my horizontal spry menu. I have added
    it and it looks great in Firefox. No problems at all, exactly how I
    like it. But when previewed in Internet Explorer it doesn't show at
    all. There's nothing. I've inserted the "mark of the web." Nothing.
    I don't really know where I'm going wrong. I'm relatively new to
    Dreamweaver and am using CS4. Can someone please help?

    Thank you Beth,
    That has helped me a great deal, there is still a slight problem though... while the menus are falling vertically now they are not inline with the menu buttons, (slightly to the right each time).
    You suggested I upload the website to a server but I am not at this stage yet and I'm not sure how to do this either! I don't know if it's possible to help me without this? My code is still the same, the only difference now being that both ul.MenuBarHorizontal ul  and ul.MenuBarHorizontal ul li  have stated widths as you suggested; 8em.
    Maybe this will help show you the problem:
    I know this is really bad quality I think you can see how the sub menu isn't directly underneath the heading (highlighted in blue). I want the sub heading to be inline with the 'About us' heading, do you know how to do this?
    Thank very much for the help so far,
    Kyra

  • Horizontal Spry Menu Breaks in IE6

    I have created an horizontal spry menu using the spry widget
    in DreamWeaver CS3. I would like the width of each menu item to
    adjust to the text (width: auto;) and that works fine in current
    browsers (FireFox, IE7, Opera, Netscape) but in IE6 the menu items
    are displayed vertically instead of horizontally. As soon as I give
    them a width, it displays appropriately in IE6, but that changes
    the look. You can see the page in question at
    http://www.inachordwebdesign.com/ccc/test.html
    Is there any way to work around this problem with the older
    IE versions?
    Any help would be greatly appreciated! Please let me know if
    I need to upload any code. This is one of my first posts, so I'm
    not sure what all I need to post.
    Thanks!

    I have updated the Spry Assets as suggested, but still have
    the same results. Removing the float:left for the menu bar doesn't
    help with the item alignment in IE6 and actually introduces a
    problem in the current version of Firefox, so that isn't the
    problem either.
    Any other thoughts? The only thing that seems to force the
    menu bar to display horizontally in IE is to have fixed widths for
    the list items in the unordered list (ul.MenuBarHorizontal li). As
    soon as I change that from a defined width to auto, or remove the
    width designation altogether, it falls back to a vertical
    arrangement in IE6, though it works in all the more recent browsers
    just fine. We'd rally prefer to let the list items size
    automatically, but if there is no way around it, I'll have to try
    to replicate that effect by assigning a different width to each
    item. That will add a lot of extra code, unfortunately.
    Thanks.

  • Horizontal spry menu floats around differently in FF and IE

    Hi there !!
    I would like to ask you about the following:
    When I use a horizontal spry menu and have it adjusted for FireFox, I get a result I can live with.
    Except that the submenu's under the heading 'cultuur' and 'projekt' do not slide down altogether, but are horizontal as well...
    How can I fix it so that they are positioned under its 'parent' ??
    But that's my minor question, actually...
    When I open my site in Internet Explorer (7 & 8) the spry menu looks different; it is far more stretched. First it also floated left, but I managed to fix that. The major problem is that the submenu's appear on the left of the page. I can't get them under their respective parents at all.
    Can you please help me with that?
    My site:
    www.mnette.nl
    (if you need more info, I'm glad to provide it )

    When I use the original SpryMenuBarHorizontal.css, your page behaves extremely well. I realise that you wish to customise the menu to suit your site, but these modifications are to be made under strict rules so that the cross browser functionality is not compromised.
    Have a look at the following 10 commandments http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
    May I suggest that you ressurrect the original style sheet and work your way from there making sure that you keep to the above commandments.
    If you still have problems, please come back here for further assistance.
    Go Aussies and Hup Holland!
    Ben

  • ERROR with Horizontal Spry Menu & IE 7 ONLY!

    I created a new website with CS3 adding a horizontal Spry Menu across the top of the page.  I am having a problem with this menu in Internet Explorer 7 ONLY!  I don't have this problem with Firefox, Chrome or Safari.  I wouldn't care so much but IE is the dominant browser.  The site is: http://www.sunscapesolar.net.  The problem is that when you mouse over any of the top-level menu titles that have sub-menus below like: PRODUCTS, SYSTEMS, INCENTIVES, etc., the body text shifts down and I get a white box popping up that says "false." I've checked everything I know but since DW created the javascript code, I don't know where to go.  I have posted this problem three times and nobody has responded!  Someone has to know what's wrong!  Please help...  I don't want to create the site from scratch. . .
    Thanks in advance...
    Mike 

    fixed it myself - please ignore

  • Horizontal spry menu style appears turned off when on the internet though can view it in live mode!?

    The style of the horizontal spry menu seems as to have been turned off when on the web though is visible and functioning on CS4 Dreamweaver design and live views. I have styled the spry menu and can view it in the properties section though the style setting is there on the internet it looks as if the styles have turned off and appears unformatted vertically when it should be a cascading horizontal menu bar. Not sure where the error is, I have looked at the coding and as I'm not the most experienced with spry.....
    this is the coding above the head.
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript">
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    I have noticed that SpryMenuBarHorizontal.css doesn't appear in the spry assets folder, does this matter? (not sure how to insert into the assets menu).  Any help would be greatly appreciated!

    thanks for testing it. I'm not sure how to proceed though as the css file is in my local_sites/spry assets folder for the website. I've tried to point it to other (copies of SpryMenuBarHorizontal.css) and spry assets folder externally from the site and again internally in the root folder and seems to make little or no difference.
    Your suggestion of what it should read,(sorry to sound so naive at all this) though would you mind giving a step-by-step guide on how to go about it? as I'm obviously missing something in the setup process.
    thanks again for your help.

  • Level 2 Submenu problems - Horizontal Spry Menu

    Okay, I have successfully implemented a horizontal spry menu. Most links don't have drop downs but there are some that has submenus. For example.
    Main Link
       > Products
       > Services
              Service 1
              Service 2
              Service 3
    etc
    The 1st submenu works fine (i.e. the one that would show products and services) and the second level submenu links work okay as well (ie Service 1, 2 etc) BUT ONLY in Firefox, Safari and Chrome. I CANNOT for life nor money get the second submenu to work in ie8. It just doesn't show! I need help urgently!
    The site is in design process so there isn't a URL yet. If it would be helpful, I could upload everything onto my server so the files can be viewed. Just let me know what is required.
    Has anyone encountered anything like this before? All very weird...and needless to say...very annoying too.
    Thanks in advance for any suggestions.
    Ben

    Update - it's a problem with opacity!
    I wnated to have a submenu with 0.85 opacity. I had the following CSS in the file:
    ul.MenuBarHorizontal ul
    filter:alpha(opacity=85);
        -moz-opacity:0.85;
        -khtml-opacity: 0.85;
        opacity: 0.85;
    This resulted in the second submenu disappearing in IE8...but it worked okay in all the other browsers.
    Any idea for submenus with opacity in IE??
    Ben

  • Help with a very simple horizontal Spry menu

    Hi,
    I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
    This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover.  The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
    What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over.  As I said, without the border it works perfect.
    Any suggestions will be appreciated.

    steve0308 wrote:
    Hi,
    I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
    This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover.  The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
    What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over.  As I said, without the border it works perfect.
    Any suggestions will be appreciated.
    You also have to apply the border to the 'a' css selector. If you just apply it to the 'a:hover' css selector then the tab will grow slightly bigger because its adding more width and height to the overall structure.

  • Can you have a different colour horizontal Spry menu on multiple pages?

    Hi,
    I'm fairly new to Dreamweaver and CSS. So please forgive me ignorance.
    I've created a page with a horizontal spry menu bar, and have edited it according to how I want it to look.. Brilliant!. The problem I have is I want the exact same menu bar on multiple pages but using a different colour scheme for a couple of the pages!. Is this possible? Thanks

    I am sorry, but I do not see that you have added the suggested code to the document as per
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Touring Sport</title>
    <meta name="keywords" content="Football Tours, Youth Football Tours, Junior Football Tours, Boys Football Tours, Girls Football Tours, Ladies Football Tours, Mens Football Tours, European Football Tours, School Football Tours">
    <meta name="description" content="Football Tours in the UK and Europe.">
    <style type="text/css">
    <!--
    body {
         background-image: url(images/Touring%20Sport%20-%20Sports%20Tours,%20Schools%20Tours%20and%20Corporate%20Tours.jpg);
    a:visited {
         color: #660066;
    a:link {
         text-decoration: none;
         color: #660066;
    .Contact_Header {
         font-family: Helvetica;
         color: #660066;
         font-size: 95%;
         text-align: right;
    .Main_Text {
         font-family: Helvetica;
         color: #666;
         text-align: justify;
         font-size: 90%;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script><style type="text/css">
    <!--
    a:hover {
         color: #993399;
    --></style></head>
    Gramps

  • Spry Horizontal Menu displaying incorrectly in IE

    Hey,
    This is my first site designed using a spry menu. The menu looks great in Firefox and Safari, but is completely wrong in IE. I have designed the rest of the site to be centered on the page with a width of 970px.
    Here is a link to the current site: http://www.charlestonsertoma.org/
    What am I doing wrong? Thank you in advance for any insights, suggestions, or corrections!
    CSS CODE:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        width: auto;
        cursor: default;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        font-family: Georgia, "Times New Roman", Times, serif;
        position: relative;
        cursor: pointer;
        width: auto;
        float: right;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 12px;
        z-index: 1020;
        cursor: default;
        width: 8.6em;
        position: absolute;
        left: -1000em;
        text-align: center;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 8.6em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: 0% 0 0 8.4em;
        font-size: 12px;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: 0;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 0.5em 1.55em;
        color: #FFF;
        width: auto;
        text-decoration: none;
        text-align: center;
    ul.MenuBarSubmenuVisible a {
        display: block;
        cursor: pointer;
        padding: 0.5em 1.55em;
        background-color: #FFF;
        color: #999;
        width: auto;
        text-decoration: none;
        text-align:left;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        background-color: #FFF;
        color: #333;
        width: auto;
        font-family: Georgia, "Times New Roman", Times, serif;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #FFF;
        color: #333;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        font-family: Georgia, "Times New Roman", Times, serif;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;

    You have got yourself into a bit of bother starting at the very beginning.
    I think you need to sit back and reassess the situation. This is what you have got
    one column page
    header
    article
    footer
    To translate that into your document you will get
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style>
    html {
         background: url(http://www.charlestonsertoma.org/images/background.jpg) no-repeat center top;
    body {
         width: 970px;
         margin: auto;
    img {
         border: 0;
    #header {
         height: 570px;
         position: relative;
    #header img {
         position: absolute;
         top: 0;
    #header img#slide{
         height: 570px;
    #header #nav {
         position: absolute;
         top: 83px;
         left: 200px;
    #article {
         min-height: 400px;
    #footer {}
    /* MenuBar */
    ul.MenuBarHorizontal a {
         color: #FFF;
         background-color: transparent;
         padding: 0.5em 1.5em;
    ul.MenuBarHorizontal ul a {
         background-color: #96A2BA;
    ul.MenuBarHorizontal li {
         width: auto;
    ul.MenuBarHorizontal ul {
         width: auto;
    ul.MenuBarHorizontal ul li {
         display: block;
         float: none !important;
         width: auto;
         white-space: nowrap;
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
         background-color: #FFF;
         color: #333;
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
         background-color: #FFF;
         color: #333;
    ul.MenuBarHorizontal a.MenuBarItemSubmenu {
         padding: 0.5em 2.25em 0.5em 1.5em;
    @media screen, projection {
         ul.MenuBarHorizontal li.MenuBarItemIE      {
              background: transparent;
    </style>
    <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js" type="text/javascript"></script>
    <script>
    var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
         for (i=0;i<slideshowimages.arguments.length;i++){
              slideimages[i]=new Image()
              slideimages[i].src=slideshowimages.arguments[i]
    function slideshowlinks(){
         for (i=0;i<slideshowlinks.arguments.length;i++)
         slidelinks[i]=slideshowlinks.arguments[i]
    function gotoshow(){
         if (!window.winslide||winslide.closed)
              winslide=window.open(slidelinks[whichlink])
         else
              winslide.location=slidelinks[whichlink]
              winslide.focus()
    </script>
    <script src="http://www.charlestonsertoma.org/Scripts/swfobject_modified.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="header">
      <a href="javascript:gotoshow()"><img src="images/2.jpg" name="slide" id="slide"></a>
      <img src="http://www.charlestonsertoma.org/images/headercover1.png" alt="header" usemap="#header" />
      <map name="header">
        <area shape="rect" coords="14,3,199,80" href="index.html" alt="Home" />
        <area shape="rect" coords="840,6,907,52" href="contact.html"/>
        <area shape="rect" coords="917,6,962,52" href="http://www.facebook.com/sertomafootballclassic" />
      </map>
      <div id="nav">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
            <ul>
              <li><a href="club-history.html">History</a></li>
              <li><a href="charleston-chapter.html">Our Chapter</a></li>
              <li><a href="charleston-chapter.html">Chapter History</a></li>
              <li><a href="officers.html">Officers</a></li>
              <li><a href="meet-our-members.html">Meet Our Members</a></li>
              <li><a href="weekly-meetings.html">Weekly Meetings</a></li>
              <li><a href="upcoming-events.html">Events</a></li>
              <li><a href="registration.html">Join Now!</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">Our Charities</a>
            <ul>
              <li><a href="windwood-farm.html">Windwood Farm</a></li>
              <li><a href="eagle-harbor.html">Eagle Harbor</a></li>
              <li><a href="camp-sertoma.html">Camp Sertoma</a></li>
              <li><a href="volunteer-opportunities.html">Volunteer Opportunities</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#"> Sertoma Football Classic </a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="general-info.html">General Information</a>
                <ul>
                  <li><a href="general-info.html">Game Information</a></li>
                  <li><a href="matchups.html">Match-Ups</a></li>
                  <li><a href="teams.html">Teams</a></li>
                  <li><a href="sponsors.html">Sponsors</a></li>
                  <li><a href="tickets.html">Purchase Tickets</a>
                </ul>
              </li>
              <li><a class="MenuBarItemSubmenu" href="cheerleading.html">Cheerleading Information</a>
                <ul>
                  <li><a href="cheerleading.html">Party Information</a></li>
                  <li><a href="spirit-award.html">Spirit Award Point System</a></li>
                  <li><a href="classic-dos-and-donts.html"> Classic Do's & Dont's</a></li>
                  <li><a href="classic-rules.html"> Ticket Sale Rules & Requirements</a></li> 
                </ul>
              </li>
              <li><a href="famous-classic-alumni.html">Famous Classic Alumni</a></li>
              <li><a href="program.html">Program Advertising</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="registration.html">Become A Member</a>
             <ul>
              <li><a href="why-we-joined.html">Why We Joined</a></li>
              <li><a href="registration.html">Registration</a></li>
            </ul>
          </li>
          <li><a href="donate.html">Donate</a> </li>
        </ul>
      </div>
    <script>
    //configure the paths of the images, plus corresponding target links
    slideshowimages("http://www.charlestonsertoma.org/images/2.jpg","http://www.charlestonsertoma.org/images/1.jpg","http://www.charlestonsertoma.org/images/3.jpg", "http://www.charlestonsertoma.org/images/6.jpg","http://www.charlestonsertoma.org/images/5.jpg","http://www.charlestonsertoma.org/images/4.jpg","http://www.charlestonsertoma.org/images/7.jpg")
    slideshowlinks("index.html","index.html","index.html")
    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=5500
    var whichlink=0
    var whichimage=0
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage
    if (whichimage<slideimages.length-1)
    whichimage++
    else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
    slideit()
    </script>
    </div>
    <div id="article">
         <h2>Main Content</h2>
    </div>
    <div id="footer">
         <p>Footer</p>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Just copy and paste the above into a new document and view it in  browser.
    Gramps

  • Horizontal Spry Menu doesn't display correctly in browser.  Displays correctly in live view and prev

    Hello,
    I am new to web building and am having trouble with my Spry menu.  It won't display correctly.
    www.denverphotographics.com
    Please Help!!
    Thanks,
    Rob

    #1 Upload your Spry Assets folder to your remote server.  The necessary CSS & JavaScript files are 404 not found.   That's why your menu looks un-styled.
    #2 Loud, gratuitous, unsolicited music on web sites is a very bad idea.  It forces a lot of people to click away from your site and never return.   It so happens I was listening to other media when I clicked on your site.  That cacophony of competing noise was not the least bit enjoyable.
    Nancy O.

  • Spry menu displays fine in FF and Chrome but not in IE

    hello all -
    as stated my Spry menu drops down fine (vertical) in FF and Chrome but in IE8 it displays horizontal. pls help & ty!
    here is the CSS and an example page-
    http://www.thelders.com/BlueRidge/ContactUs.html
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    #MenuBar1 {
    margin:0 auto;
    width:876px;
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive {
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li {
    width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul {
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul {
    border: 1px solid #738dbb;
    background-color: #ddd9c3;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a {
    display: block;
    cursor: pointer;
    padding:6px 18px;
    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 {
    /* 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: #aac0db;
    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;
    /* 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;

    First off read the notice on the index page of this forum
    Announcement: Introducing Spry UI
    Then add the following style rules to your document
    ul.MenuBarHorizontal li {
        width: 8em;
    ul.MenuBarHorizontal ul {
        width: 8.2em;
    I hope this helps.
    Ben

  • 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 &#8211; 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">
    <!--
    a:link {
        color: #300;
    -->
    </style></head>
    <!-- Start Superstats code version 7.0b.  Copyright 2007 MyComputer.com, Inc. More info available at http://www.mycomputer.com --><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><!-- End Superstats tracking code. -->
    <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> &gt; <a href="LMNtestStart.html" class="navbar">Labour
              Market News</a></font></td>
              <td width="136" height="65"><!-- BEGIN: Constant Contact Border Email List Button -->
    <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>
    <!-- END: Constant Contact Border Email List Button --> </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>&quot;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.&quot; </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">&#8220;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,&#8221; says
                  John Cook, associate dean of technology with Keyano College. &#8220;The
                  other reason is expansion of the existing plants and new plants
                starting up.&#8221;</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">&#8220;We have been successful in taking people that had previously worked
                    in a paper mill,&#8221; says White with Syncrude. &#8220;The processes
                    are certainly different. They&#8217;re dealing with paper, rather
                    than oil, but we recently hired 18 (previous mill workers) and
                    it&#8217;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.&#8221; </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&#8217;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&#8212;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">&#8220;</font><font size="2" face="Arial, Helvetica, sans-serif">Primarily
                          when someone is starting out, they&#8217;re in the field,&#8221; says
                          Cook. &#8220;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&#8212;turning
                          valves, adjusting an instrument to control temperature,
                    pressure, flow, or level.&#8221;</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">&#8220;A process operator, whether in Fort McMurray, or in a gas plant
                                      in Medicine Hat, basically processes the upstream
      oil and gas until it&#8217;s
                                          purified enough to go through a pipeline
      outside the gates of the plant,&#8221; 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">&#8220;We only take as many students as we can guarantee work placement
                    spots, and students have to compete for a seat,&#8221; says Cook. &#8220;We
                          look at their educational background, their marks and then
                    there&#8217;s
                          an interview process with Keyano staff and industry people&#8212;just
                  like applying for a job.&#8221;</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">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </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>

Maybe you are looking for

  • EFI Update Fixes XP Performance ... Even with X1900

    Before installing Windows XP in my Mac Pro via Boot Camp, I just wanted to make certain that the recent EFI firmware update fixes all the issues, including for Mac Pros with the X1900 video card. Thanks, Clark

  • How do i format my hard drive on my iMac then reinstall snow leopard

    I updated Snow Leopard with Maverick, since then my machine is taking forever to open apps and runs very slow. I would like to do a clean install but forgotten how, It's an age thing.

  • How do I make a multi-line heading show up as a single line in the Table of Contents?

    I'm writing a document where the headings often have a line break in them for the sake of formatting. When I generate a Table of Contents, they show up as two entries on the same page instead of as a single heading. For example, if I have a section l

  • HT1218 Time Capsule is showing error code -6584)

    My Time Capsule is showing error code - "An unexpected error occurred (error code -6584)"; can someone tell me what this means? Correlated, Time Machine does not show any backed up data although it says that ~400 GB out of 1 TB is remaining.

  • Patch for Developer6i

    hi buddies....can any generous person send me the Developer-6i patch for database-10g on either of the following addresses of me: [email protected] [email protected] hoping a positive response,thanx in advance.