Spry:repeat vs. Internet Explore 7.0

Hi,
I've made a very simple example with the Spry Framework -
using the Spry.repeat
The example works fine in Fixefox, but IE 7.0 won't display
the data (no error message)
HTML-file
http://www.mg04.dk/clausreiss/test_xml.html
XML-file
http://www.mg04.dk/clausreiss/data/cafetownsend.xml
What is wrong? -Please help me!
jsnedker

Everything works fine for me "as is" if I run it from my own
http server. You might want to look into the Content-Type your
server is sending for the XML file:
Content-Length 681
Content-Type application/octet-stream
Last-Modified Tue, 08 Jan 2008 19:46:46 GMT
Accept-Ranges bytes
Etag "989c0342f52c81:18c96b"
Server Microsoft-IIS/6.0
X-Powered-By --InsPanel--
http://www.inspanel.com,
ASP.NET
MicrosoftOfficeWebServer 5.0_Pub
Date Tue, 08 Jan 2008 21:15:16 GMT
The content-type should be either "text/xml" or
"application/xml" for XML files.
--== Kin ==--

Similar Messages

  • Spry Accordion in Internet Explorer 6 - panel visibility

    I am totally in love with the ease of Dreamweaver and these sprys I could not do my fancy eyecandy stuff without it.
    Sadly I must check that our Grandma Internet Explorer 6 works with my page.
    I have a spy accordion and I have removed all colors and put it in a div that has a background image.
    When you click on a tab and a panel slides down then as it slides in FF or IE7/8 the text of the panel is revealed progressively.
    In IE6 ALL of the text of the panel is immediately revealed and then the sliding down action happens.  Similarly when you close it the sliding up action happens first and then the panel text dissappears.  As I said it only happens with IE6.
    I am wondeing what I need to do to fix this.  I am sorry but I do not have a live version of my page.

    Glad to know that you have fixed the problem.
    I have checked the compatibility of spry and the ie7.js fix JavaScript files, and there was some compatibility issues in the past, but these (should have), been fixed.
    The problems with messing up the display in IE6, are probably caused by IE6's css usage being brought into line with the standard css usage, which will cause problems for many if you do not know about them.
    To help you with future IE problems here is a link showing most (if not all) know problems with the IE browsers.
    http://www.positioniseverything.net/index.php, the link for IE only problems is under, 'browser specific bug demos'.
    Hope this is helpfull.
    PZ

  • Help me Plz. I am unable to view spry dataset in Internet Explorer 8

    I am a new user of dreamweaver CS5. I have designed some pages which are using Spry Dataset. It is working perfect in Firefox and IE 7 but it's not showing any thing in IE 8.
    Here is the link of  my site
    http://www.dsdforu.com/WomensKSDWCollection.html
    I was trying to solve it by myself but I can't. Can any one tell me what am I doing wrong? or what woould be the solution.
    Thanks for your time.
    Suboohi

    A very quick and dirty solution, paste the following into the <HEAD> section
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    This will help, but keep searching for a proper solution.
    Ben

  • Menu problem in Internet Explorer

    I am having a problem with a Spry menu in Internet Explorer 9 and 8. Using Dreamweaver CS5.5 I have set up a horizontal menu bar and in all the browsers that I have tested it on it works fine on both a Mac and a PC, until I try Internet Explorer. When the file is stored locally and I view it (with Parallels Desktop) in IE instead of seeing the menu I see a large light green box that covers not only the menu area but the surrounding area too. I thought the problem might be with Parallels Desktop so I put the site online and now the green box is gone, but instead of the menu being displayed across the page it is in the centre of the page and vertical.  Can anyone shed some light on this for me please?
    The pages can be seen here: <http://www.colinbowling.com/ss/index.html>
    Thanks
    Colin.

    Have a look at the following
    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: none;
        background: #FFF;
    The original value is left.
    Gramps

  • Is Internet Explorer incompatible with Airport Extreme for connecting wirelessly to the Internet?

    repeat -is Internet Explorer incompatible with Airport Extreme for connecting to the Internet- I am trying to hook  up my sister's / Windows 7...HP mini computer to my wireless connection (Airport Extreme to cable /BrightHouse ) all I get is -failed due to 'error 651' -am about to call the jockeys at the cable company to see if they have work-around. Any comment appreciate. Thanks./jimiros

    Diane,
    I have added very few apps to my G5. The majority of my time is spent editing photos with PhotoshopCS3. I have software updates set to run weekly and have always kept them up to date. I really believe it's a disk permissions issue...but repairing them doesn't help.
    *+Upon installation, I used Archive and Install.+* While I agree that Erase and Install may sound like a good idea, it makes me nervous. I do have everything backed up on a bootable CMS drive, but I'm a photographer and was hoping to not have to erase the G5.
    Yes, as I mentioned in the original post, I've downloaded and installed the Airport firmware update. And all software is up to date.
    All was working just dandy before the upgrade. Unfortunately now it's sounding like I may have to erase my hard drive and install fresh.
    If I do that, is it just a matter then of dragging my photos from the backup disk to the G5? And documents? Etc?? The thought of getting all my photos and important information back on the G5 seems a bit staggering.

  • My verticle Spry menu will not work in Internet Explorer

    I know a lot of people have posted about similar issues, and I've researched multiple "solutions" on multiple forums for something that will work, but nothing has solved the problem so far.
    Here is a link to the prototype homepage: http://www.abrasivesales.com/indexnew.html
    Everything looks great on my mac when opened in Firefox or Safari, however when opened on Internet Explorer on a PC, the menu ceases to be verticle, instead extending horizontally past the end of the screen.  Also, the menu items adopt a white background color, and none of the submenu items will appear when their parent menu item is rolled over.
    PLEASE HELP....this issue has kept me from launching the site for a week now, and my superiors are wondering why this problem is taking me longer than it did to build the homepage in the first place, so I'd love to look like less of an idiot.
    I assuming this is a CSS issue, so I've posted my CSS code below:
    @charset "UTF-8";
    /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
        margin: 0;
        padding: ;
        list-style-type: none;
        font-size: 12px;
        cursor: default;
        font-weight: bold;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        left: 0px;
        top: 0px;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are same fixed width as parent */
    ul.MenuBarVertical li
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 150px;
        margin: 0;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
        margin: 0 0 0 100%;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        left: -1000em;
        top: 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
        left: 0;
        width: 165px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
        width: auto;
    #masterContainer #container #sidebar #sideNav2 li ul li {
        top: -400px;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
        border: 0
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
        border: 0
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        padding: 2px 3px;
        color: #333;
        text-decoration: none;
        font-family: "Comic Sans MS", cursive;
        font-size: 13.5px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
        background-color: #33C;
        color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
        background-color: #1A6AF4;
        color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarVertical li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    #masterContainer #container #sidebar #sideNav2 {
    #masterContainer #container #sidebar li ul li  {
        background-color: #F4EC9A;
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    float: left;

    I solved one of my own problems.  It turns out I still had a setting for width set to "auto" instead of a pixel amount.  So now my menu displays normally and my submenus are no longer invisible.
    One one tab, "Products", I set the top at -430px, which internet explorer seems to ignore.  I'm so close!  I'll search for the answer but any help is greatly appreciated.

  • Spry Menu Bar Horizontal Problem in Internet Explorer

    I'm having a problem with a spry menu bar. It works fine in Firefox and Google Chrome, but in Internet Explorer the submenus shift to the right.
    And here's the 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 auto;     padding: 0;     list-style-type: none;     font-size: 100%;     cursor: default;     width: 54em;     border-top-width: thick;     border-right-width: thick;     border-bottom-width: thick;     border-left-width: thick;     border-top-color: #00F;     border-right-color: #099;     border-bottom-color: #093;     border-left-color: #0F9;     top: auto;}/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ul.MenuBarActive{     z-index: 1000;}/* Menu item containers, position children relative to this container and are a fixed width */ul.MenuBarHorizontal li{     margin: 0;     padding: 0;     list-style-type: none;     font-size: 100%;     position: relative;     text-align: center;     cursor: pointer;     width: 18em;     float: left;     color: #F00;     background-color: #0000FF;}/* 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;     border: black;}/* 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;     text-align: center;}/* 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%;     text-align: center;     font-family: "Lucida Console", Monaco, monospace;     font-weight: bold;     color: #FF0;     border: 3px solid #039;}/* 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: fixed;     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;               }}
    WHAT DO I DO? HELP ME, THANKS.
    Ummmmmmm HELLOO.
    SOMEONE HELP ME.
    ....boy you guys are reallllly helping

    Ohhhh noooo now it looks like this.
    I don't know what to do!!!!
    Here, let me give you the css code and the 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>
    <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>
    <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>
    @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;
    DON'T GIVE UP ON ME. PLEASE.

  • DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8

    Hi,
    I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
    It works well in Google Chrome.
    It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
    Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
    Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
    The menu can be seen at work by clicking on this link:
    www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
    Below are all the scrips involved.
    Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 10;
        padding: 0;
        list-style-type: none;
        font-size: 80%;
        cursor: default;
        width: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-align: center;
        /*whole menu moves*/
        margin-left: 100px;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* My Note --Top buttons' background, height and font size adjust-- */
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        /* My note --I added the height and background-image as Main-Buttons.jpg-- */
        height: 55px;   
        background-image: url(../Main-Buttons.jpg);
        margin: -2;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: center;
        /*text-align: left;*/
        cursor: pointer;
        width: 99px;
        float: left;
    /* My note --Submenu font size adjust-- */
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        /*height:38px;*/
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 87%;
        z-index: 1020;
        cursor: default;
        width: 160px;
        position: absolute;
        left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        /* My note --this margin alligns the drop buttons up and down-- */
        margin-top: 24px;
        height: 25px;   
        left: auto;
    /* My note --drop menu size adjustments-- */
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        height: 25px;
        width: 160px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position:absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        /*border: 1px solid #CCC;*/
    /* My note --Text Allignment global-- */
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        /*height: 40px;*/
        text-align: center;
        /*vertical-align: center;*/
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        text-decoration: none;
        /*zzzzzzzz Text Color*/
        color: #333;        /*background-color: #CCC;*/
        letter-spacing: -0.00px;
        margin-left: 1px;   
        margin-right: 0px;
        /*alligns text up or down globally*/
        margin-top: 1px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        /*background-color: #33C;
        color: #FFF;*/
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-image: url(../Main-Buttons-mouse-over.jpg);    /*background-color: #33C;
        color: #FFF;*/
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* My note --mouse over-- */
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
        background-repeat: no-repeat;
        background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f&#92;loat: left;
            background: #FFF;
    Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
    // SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    SpryMenuBar.js
    This file handles the JavaScript for Spry Menu Bar.  You should have no need
    to edit this file.  Some highlights of the MenuBar object is that timers are
    used to keep submenus from showing up until the user has hovered over the parent
    menu item for some time, as well as a timer for when they leave a submenu to keep
    showing that submenu until the timer fires.
    var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.BrowserSniff = function()
        var b = navigator.appName.toString();
        var up = navigator.platform.toString();
        var ua = navigator.userAgent.toString();
        this.mozilla = this.ie = this.opera = this.safari = false;
        var re_opera = /Opera.([0-9&#92;.]*)/i;
        var re_msie = /MSIE.([0-9&#92;.]*)/i;
        var re_gecko = /gecko/i;
        var re_safari = /(applewebkit|safari)&#92;/([&#92;d&#92;.]*)/i;
        var r = false;
        if ( (r = ua.match(re_opera))) {
            this.opera = true;
            this.version = parseFloat(r[1]);
        } else if ( (r = ua.match(re_msie))) {
            this.ie = true;
            this.version = parseFloat(r[1]);
        } else if ( (r = ua.match(re_safari))) {
            this.safari = true;
            this.version = parseFloat(r[2]);
        } else if (ua.match(re_gecko)) {
            var re_gecko_version = /rv:&#92;s*([0-9&#92;.]+)/i;
            r = ua.match(re_gecko_version);
            this.mozilla = true;
            this.version = parseFloat(r[1]);
        this.windows = this.mac = this.linux = false;
        this.Platform = ua.match(/windows/i) ? "windows" :
                        (ua.match(/linux/i) ? "linux" :
                        (ua.match(/mac/i) ? "mac" :
                        ua.match(/unix/i)? "unix" : "unknown"));
        this[this.Platform] = true;
        this.v = this.version;
        if (this.safari &amp;&amp; this.mac &amp;&amp; this.mozilla) {
            this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (&lt;ul&gt; tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a menu
    Spry.Widget.MenuBar = function(element, opts)
        this.init(element, opts);
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
        this.element = this.getElement(element);
        // represents the current (sub)menu we are operating on
        this.currMenu = null;
        this.showDelay = 250;
        this.hideDelay = 600;
        if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' &amp;&amp; typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie &amp;&amp; typeof document.uniqueID == 'undefined'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        if (Spry.is.ie &amp;&amp; Spry.is.version &lt; 7){
            try {
                document.execCommand("BackgroundImageCache", false, true);
            } catch(err) {}
        this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
        this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
        this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
        this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
        this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
        this.hoverClass = 'MenuBarItemHover';
        this.subHoverClass = 'MenuBarItemSubmenuHover';
        this.subVisibleClass ='MenuBarSubmenuVisible';
        this.hasSubClass = 'MenuBarItemSubmenu';
        this.activeClass = 'MenuBarActive';
        this.isieClass = 'MenuBarItemIE';
        this.verticalClass = 'MenuBarVertical';
        this.horizontalClass = 'MenuBarHorizontal';
        this.enableKeyboardNavigation = true;
        this.hasFocus = false;
        // load hover images now
        if(opts)
            for(var k in opts)
                if (typeof this[k] == 'undefined')
                    var rollover = new Image;
                    rollover.src = opts[k];
            Spry.Widget.MenuBar.setOptions(this, opts);
        // safari doesn't support tabindex
        if (Spry.is.safari)
            this.enableKeyboardNavigation = false;
        if(this.element)
            this.currMenu = this.element;
            var items = this.element.getElementsByTagName('li');
            for(var i=0; i&lt;items.length; i++)
                if (i &gt; 0 &amp;&amp; this.enableKeyboardNavigation)
                    items[i].getElementsByTagName('a')[0].tabIndex='-1';
                this.initialize(items[i], element);
                if(Spry.is.ie)
                    this.addClassName(items[i], this.isieClass);
                    items[i].style.position = "static";
            if (this.enableKeyboardNavigation)
                var self = this;
                this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
            if(Spry.is.ie)
                if(this.hasClassName(this.element, this.verticalClass))
                    this.element.style.position = "relative";
                var linkitems = this.element.getElementsByTagName('a');
                for(var i=0; i&lt;linkitems.length; i++)
                    linkitems[i].style.position = "relative";
    Spry.Widget.MenuBar.KEY_ESC = 27;
    Spry.Widget.MenuBar.KEY_UP = 38;
    Spry.Widget.MenuBar.KEY_DOWN = 40;
    Spry.Widget.MenuBar.KEY_LEFT = 37;
    Spry.Widget.MenuBar.KEY_RIGHT = 39;
    Spry.Widget.MenuBar.prototype.getElement = function(ele)
        if (ele &amp;&amp; typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
        if (!ele || !className || !ele.className || ele.className.search(new RegExp("&#92;&#92;b" + className + "&#92;&#92;b")) == -1)
            return false;
        return true;
    Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
        if (!ele || !className || this.hasClassName(ele, className))
            return;
        ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
        if (!ele || !className || !this.hasClassName(ele, className))
            return;
        ele.className = ele.className.replace(new RegExp("&#92;&#92;s*&#92;&#92;b" + className + "&#92;&#92;b", "g"), "");
    // addEventListener for Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent('on' + eventType, handler);
        catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
    Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
        var layer = document.createElement('iframe');
        layer.tabIndex = '-1';
        layer.src = 'javascript:""';
        layer.frameBorder = '0';
        layer.scrolling = 'no';
        menu.parentNode.appendChild(layer);
        layer.style.left = menu.offsetLeft + 'px';
        layer.style.top = menu.offsetTop + 'px';
        layer.style.width = menu.offsetWidth + 'px';
        layer.style.height = menu.offsetHeight + 'px';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
        var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
        while(layers.length &gt; 0)
            layers[0].parentNode.removeChild(layers[0]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (&lt;ul&gt; tag)
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
        var menus = root.getElementsByTagName('ul');
        for(var i=0; i&lt;menus.length; i++)
            this.hideSubmenu(menus[i]);
        this.removeClassName(this.element, this.activeClass);
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return Spry.is.safari &amp;&amp; (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 &amp;&amp; event.target.parentNode == event.relatedTarget));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
        if(this.currMenu)
            this.clearMenus(this.currMenu);
            this.currMenu = null;
        if(menu)
            this.addClassName(menu, this.subVisibleClass);
            if(typeof document.all != 'undefined' &amp;&amp; !Spry.is.opera &amp;&amp; navigator.vendor != 'KDE')
                if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
                    menu.style.top = menu.parentNode.offsetTop + 'px';
            if(Spry.is.ie &amp;&amp; Spry.is.version &lt; 7)
                this.createIframeLayer(menu);
        this.addClassName(this.element, this.activeClass);
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
        if(menu)
            this.removeClassName(menu, this.subVisibleClass);
            if(typeof document.all != 'undefined' &amp;&amp; !Spry.is.opera &amp;&amp; navigator.vendor != 'KDE')
                menu.style.top = '';
                menu.style.left = '';
            if(Spry.is.ie &amp;&amp; Spry.is.version &lt; 7)
                this.removeIframeLayer(menu);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length &gt; 0 ? submenus[0] : null);
        if(menu)
            this.addClassName(link, this.hasSubClass);
        if(!Spry.is.ie)
            // define a simple function that comes standard in IE to determine
            // if a node is within another node
            listitem.contains = function(testNode)
                // this refers to the list item
                if(testNode == null)
                    return false;
                if(testNode == this)
                    return true;
                else
                    return this.contains(testNode.parentNode);
        // need to save this for scope further down
        var self = this;
        this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
        this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
        if (this.enableKeyboardNavigation)
            this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
            this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
        this.lastOpen = listitem.getElementsByTagName('a')[0];
        this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length &gt; 0 ? this.subHoverClass : this.hoverClass);
        this.hasFocus = true;
    Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
        this.clearSelection(listitem);
    Spry.Widget.MenuBar.prototype.clearSelection = function(el){
        //search any intersection with the current open element
        if (!this.lastOpen)
            return;
        if (el)
            el = el.getElementsByTagName('a')[0];
            // check children
            var item = this.lastOpen;
            while (item != this.element)
                var tmp = el;
                while (tmp != this.element)
                    if (tmp == item)
                        return;
                    try{
                        tmp = tmp.parentNode;
                    }catch(err){break;}
                item = item.parentNode;
        var item = this.lastOpen;
        while (item != this.element)
            this.hideSubmenu(item.parentNode);
            var link = item.getElementsByTagName('a')[0];
            this.removeClassName(link, this.hoverClass);
            this.removeClassName(link, this.subHoverClass);
            item = item.parentNode;
        this.lastOpen = false;
    Spry.Widget.MenuBar.prototype.keyDown = function (e)
        if (!this.hasFocus)
            return;
        if (!this.lastOpen)
            this.hasFocus = false;
            return;
        var e = e|| event;
        var listitem = this.lastOpen.parentNode;
        var link = this.lastOpen;
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length &gt; 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
        if (!opts[3])
            opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
        var found = 0;
        switch (e.keyCode){
            case this.upKeyCode:
                found = this.getElementForKey(opts, 'y', 1);
                break;
            case this.downKeyCode:
                found = this.getElementForKey(opts, 'y', -1);
                break;
            case this.leftKeyCode:
                found = this.getElementForKey(opts, 'x', 1);
                break;
            case this.rightKeyCode:
                found = this.getElementForKey(opts, 'x', -1);
                break;
            case this.escKeyCode:
            case 9:
                this.clearSelection();
                this.hasFocus = false;
            default: return;
        switch (found)
            case 0: return;
            case 1:
                //subopts
                this.mouseOver(listitem, e);
                break;
            case 2:
                //parent
                this.mouseOut(opts[2], e);
                break;
            case 3:
            case 4:
                // left - right
                this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
                break;
        var link = opts[found].getElementsByTagName('a')[0];
        if (opts[found].nodeName.toLowerCase() == 'ul')
            opts[found] = opts[found].getElementsByTagName('li')[0];
        this.addClassName(link, opts[found].getElementsByTagName('ul').length &gt; 0 ? this.subHoverClass : this.hoverClass);
        this.lastOpen = link;
        opts[found].getElementsByTagName('a')[0].focus();
            //stop further event handling by the browser
        return Spry.Widget.MenuBar.stopPropagation(e);
    Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length &gt; 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if (this.enableKeyboardNavigation)
            this.clearSelection(listitem);
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            return;
        if (listitem.closetime)
            clearTimeout(listitem.closetime);
        if(this.currMenu == listitem)
            this.currMenu = null;
        // move the focus too
        if (this.hasFocus)
            link.focus();
        // show menu highlighting
        this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
        this.lastOpen = link;
        if(menu &amp;&amp; !this.hasClassName(menu, this.subHoverClass))
            var self = this;
            listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
    Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length &gt; 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            return;
        var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
        if(!listitem.contains(related))
            if (listitem.opentime)
                clearTimeout(listitem.opentime);
            this.currMenu = listitem;
            // remove menu highlighting
            this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
            if(menu)
                var self = this;
                listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
            if (this.hasFocus)
                link.blur();
    Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
        var child = element[sibling];
        while (child &amp;&amp; child.nodeName.toLowerCase() !='li')
            child = child[sibling];
        return child;
    Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
        var found = 0;
        var rect = Spry.Widget.MenuBar.getPosition;
        var ref = rect(els[found]);
        var hideSubmenu = false;
        //make the subelement visible to compute the position
        if (els[1] &amp;&amp; !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
            els[1].style.visibility = 'hidden';
            this.showSubmenu(els[1]);
            hideSubmenu = true;
        var isVert = this.hasClassName(this.element, this.verticalClass);
        var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
        for (var i = 1; i &lt; els.length; i++){
            //when navigating on the y axis in vertical menus, ignore children and parents
            if(prop=='y' &amp;&amp; isVert &amp;&amp; (i==1 || i==2))
                continue;
            //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
            if(prop=='x' &amp;&amp; !isVert &amp;&amp; !hasParent &amp;&amp; (i==1 || i==2))
                continue;
            if (els[i])
                var tmp = rect(els[i]);
                if ( (dir * tmp[prop]) &lt; (dir * ref[prop]))
                    ref = tmp;
                    found = i;
        // hide back the submenu
        if (els[1] &amp;&amp; hideSubmenu){
            this.hideSubmenu(els[1]);
            els[1].style.visibility =  '';
        return found;
    Spry.Widget.MenuBar.camelize = function(str)
        if (str.indexOf('-') == -1){
            return str;   
        var oStringList = str.split('-');
        var isFirstEntry = true;
        var camelizedString = '';
        for(var i=0; i &lt; oStringList.length; i++)
            if(oStringList[i].length&gt;0)
                if(isFirstEntry)
                    camelizedString = oStringList[i];
                    isFirstEntry = false;
                else
                    var s = oStringList[i];
                    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
        return camelizedString;
    Spry.Widget.MenuBar.getStyleProp = function(element, prop)
        var value;
        try
            if (element.style)
                value = element.style[Spry.Widget.MenuBar.camelize(prop)];
            if (!value)
                if (document.defaultView &amp;&amp; document.defaultView.getComputedStyle)
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(prop) : null;
                else if (element.currentStyle)
                        value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
        catch (e) {}
        return value == 'auto' ? null : value;
    Spry.Widget.MenuBar.getIntProp = function(element, prop)
        var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
        if (isNaN(a))
            return 0;
        return a;
    Spry.Widget.MenuBar.getPosition = function(el, doc)
        doc = doc || document;
        if (typeof(el) == 'string') {
            el = doc.getElementById(el);
        if (!el) {
            return false;
        if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
            //element must be visible to have a box
            return false;
        var ret = {x:0, y:0};
        var parent = null;
        var box;
        if (el.getBoundingClientRect) { // IE
            box = el.getBoundingClientRect();
            var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
            var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
            ret.x = box.left + scrollLeft;
            ret.y = box.top + scrollTop;
        } else if (doc.getBoxObjectFor) { // gecko
            box = doc.getBoxObjectFor(el);
            ret.x = box.x;
            ret.y = box.y;
        } else { // safari/opera
            ret.x = el.offsetLeft;
            ret.y = el.offsetTop;
            parent = el.offsetParent;
            if (parent != el) {
                while (parent) {
                    ret.x += parent.offsetLeft;
                    ret.y += parent.offsetTop;
                    parent = parent.offsetParent;
            // opera &amp; (safari absolute) incorrectly account for body offsetTop
            if (Spry.is.opera || Spry.is.safari &amp;&amp; Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
                ret.y -= doc.body.offsetTop;
        if (el.parentNode)
                parent = el.parentNode;
        else
            parent = null;
        if (parent.nodeName){
            var cas = parent.nodeName.toUpperCase();
            while (parent &amp;&amp; cas != 'BODY' &amp;&amp; cas != 'HTML') {
                cas = parent.nodeName.toUpperCase();
                ret.x -= parent.scrollLeft;
                ret.y -= parent.scrollTop;
                if (parent.parentNode)
                    parent = parent.parentNode;
                else
                    parent = null;
        return ret;
    Spry.Widget.MenuBar.stopPropagation = function(ev)
        if (ev.stopPropagation)
            ev.stopPropagation();
        else
            ev.cancelBubble = true;
        if (ev.preventDefault)
            ev.preventDefault();
        else
            ev.returnValue = false;
    Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
        if (!optionsObj)
            return;
        for (var optionName in optionsObj)
            if (ignoreUndefinedProps &amp;&amp; optionsObj[optionName] == undefined)
                continue;
            obj[optionName] = optionsObj[optionName];
    And last, here is the HTML code that has also not been modified in any way:
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
    &lt;script src="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;ul id="MenuBar1" class="MenuBarHorizontal"&gt;
      &lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;Buy&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop from Private Owner&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop Direct from Stores&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Buying&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Bid&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop from Auction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Bidding&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Trade&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop for Trades&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Trading&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;List Items&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items in Auction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items for Sale&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items for Trade&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Listing Items&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Intro&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Flash Site &amp;amp; Intro&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;My Xchange&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Activity&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Account&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mail&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Help&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Site Map&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;script type="text/javascript"&gt;
    &lt;!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //--&gt;
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Thanks in advance for any of your help.
    Jose H.

    Hello Nancy,
    I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now.  Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
    In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
    By the way.. the IE8 security measure did pop up while working from the server.
    Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
    Good luck.. as I know it can become a complicated task when creating custom Spry menus.
    <b>Here is the finished CSS script</b>
    <code>@charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 10;
        padding: 0;
        list-style-type: none;
        /* font size for top menu*/
        font-size: 80%;
        cursor: default;
        width: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-align: center;
        /*whole menu moves*/
        margin-left: 100px;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* My Note --Top buttons' background, height and font size adjust-- */
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        /* My note --I added the height and background-image as Main-Buttons.jpg-- */
        height: 55px;   
        background-image: url(../Main-Buttons.jpg);
        margin: -2;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: center;
        /*text-align: left;*/
        cursor: pointer;
        width: 99px;
        float: left;
    /* My note --Submenu font size adjust-- */
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 87%;
        z-index: 1020;
        cursor: default;
        width: 160px;
        position: absolute;
        left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        /* My note --this margin alligns the drop buttons up and down-- */
        margin-top: 0px;
        height: 25px;
        left: auto;
    /* My note --drop menu size adjustments-- */
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        height: 25px;
        width: 162px;
        /* New addition */
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position:absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        /*border: 1px solid #CCC;*/
    /* My note --Text Allignment global-- */
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        /*My note -- took out borders &amp; changed text color to #333(black)&amp; added my own mouse not over image-- */   
        /*border: 0px solid #333332;*/
        background-image: url(../Main-Buttons.jpg);
        /*height: 40px;*/
        text-align: center;   
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        text-decoration: none;
        /*My note --Text Color-- */
        color: #333;        /*background-color: was #CCC;*/
        letter-spacing: -0.00px;
        margin-left: 1px;   
        margin-right: 0px;
        /*alligns text up or down globally*/
        margin-top: 1px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        /* My note --took out all backgound &amp; text color for mouse over-- */
        /*background-color: #33C;
        color: #FFF;*/
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        /*My note -- took out background &amp; text &amp; added my own mouse over image-- */
        background-image: url(../Main-Buttons-mouse-over.jpg);
        /*background-color: #33C;
        color: #FFF;*/
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        /* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
        height: 40px;
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* My note --mouse over-- */
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
        background-repeat: no-repeat;
        background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f&#92;loat: left;
            /* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
            background: #3e6487;
    </code>
    <b>Here is the modified HTML script</b>
    <code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
    &lt;script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;ul id="MenuBar1" class="MenuBarHorizontal"&gt;
      &lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;Buy&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop from Private Owner&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop Direct from Stores&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Buying&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Bid&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop from Auction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Bidding&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Trade&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shop for Trades&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Trading&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;List Items&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items in Auction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items for Sale&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List Items for Trade&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help Listing Items&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Intro&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Flash Site &amp;amp; Intro&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;My Xchange&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Activity&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Account&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mail&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;!-- My note --the bellow line was: &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; --- changing it to: &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Contact Us&lt;/a&gt;     corrected the height of the Contact us button wich did not have sub menus and because of this only diplayed at half size vertically in IE8 //--&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Contact Us&lt;/a&gt;
      &lt;li&gt;&lt;a href="#" class="MenuBarItemSubmenu"&gt;Help&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Site Map&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;script type="text/javascript"&gt;
    &lt;!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //--&gt;
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    </code>
    And Richard.. Thanks again for the time and your help, truly appreciated.
    Jose H.

  • 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

  • Spry Menu screwing up in Internet Explorer

    My site works perfectly in Chrome and Safari, but in Internet Explorer, the spry menu goes behind a video I have on my home page when it drops down. Again, this doesn't happen with Chrome or Safari. Is this just an IE bug that people often have a problem with? Is it fixable? Here is my code:
    Home Page HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Proud2BCatholic : Home</title>
    <link rel="shortcut icon" href="Images/favicon.ico" />
    <link href="Proud2BCatholic_Final.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="home_header"> <img src="Images/P2BC Header.jpg" width="999" height="200" /></div>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="home.html" target="_self">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Catholic Faith</a>
        <ul>
          <li><a href="prayers.html" target="_self">Prayers</a></li>
          <li><a href="novenas.html" target="_self">Novenas</a></li>
          <li><a href="devotions.html" target="_self">Devotions</a></li>
          <li><a href="saints.html" target="_self">Saints</a></li>
          <li><a href="mary.html" target="_self">Mary</a></li>
          <li><a href="sacraments.html" target="_self">Sacraments</a></li>
        </ul>
    </li>
    <li><a href="videos.html" target="_self">Videos</a></li><li><a href="resources.html" target="_self">Resources</a></li>
        <li><a href="blogs.html" target="_self">Blogs</a></li>
        <li><a href="#" class="MenuBarItemSubmenu">College Tips</a>
          <ul>
            <li><a href="dosanddonts.html" target="_self">Do's and Don'ts</a></li>
            <li><a href="collegesuccess.html" target="_self">College Success</a></li>
            <li><a href="findingafit.html" target="_self">Finding a Fit</a></li>
    <li><a href="whycollege.html" target="_self">Why College?</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">Scholarships</a>
          <ul>
    <li><a href="searchengines.html" target="_self">Search Engines</a></li>
    <li><a href="outsidescholarships.html" target="_self">Outside Scholarships</a></li>
    <li><a href="generalinformation.html" target="_self">General Information</a></li>
    <li><a href="p2bcscholarship.html" target="_self">P2BC Scholarship</a></li>
          </ul>
        </li>
    </ul>
      <div id="home_body">
        <div id="home_news">
    <h2>"Finding a good college is hard. For you, it's even harder. Why? Because you're Catholic! We here at Proud2BCatholic.com want to help you find the Catholic college of your dreams so that you can more easily continue your journey as a Catholic student!"
    <br />
    <br />
    -The Proud2BCatholic Staff
    </h2>
        </div>
        <div id="home_video">
        <iframe width="440" height="277" src="http://www.youtube.com/embed/q5UDRgLGteg" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
      <div id="home_fblike">
        <div id="home_fblike_content">
        <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FProud2BCa tholic&amp;width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=tru e&height=235" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:235px;" allowTransparency="false"></iframe>
        <br />
        <iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=P2BCVideo" style="overflow: hidden; height: 95px; width: 260px; border: 0;" scrolling="no" frameBorder="0" allowTransparency="true"></iframe>
        </div>
      </div>
    </div>
      <div id="foot_contain">
        <div id="foot_content">
          <div align="center">FUS Admissions | 1235 University Blvd. | Steubenville, OH 43952 | <a href="mailto:[email protected]" title="email us!" target="_new">[email protected]</a> | ©2011 Proud2BCatholic</div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Spry CSS:
    @charset "UTF-8";
    ul.MenuBarHorizontal
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              cursor: default;
              width: auto;
              padding-left: 115px;
    ul.MenuBarActive
              z-index: 1000;
    ul.MenuBarHorizontal li
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              position: relative;
              text-align: center;
              cursor: pointer;
              width: 110px;
              float: left;
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    ul.MenuBarHorizontal ul
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              z-index: 1020;
              cursor: default;
              width: 110px;
              position: absolute;
              left: -1000em;
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
              left: auto;
    ul.MenuBarHorizontal ul li
              width: 110px;
    ul.MenuBarHorizontal ul ul
              position: absolute;
              margin: -5% 0 0 95%;
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
              left: auto;
              top: 0;
    ul.MenuBarHorizontal ul
              border: 0;
    ul.MenuBarHorizontal a
              display: block;
              cursor: pointer;
              background-color: #FFFFFF;
              padding: 0
    .em 0.75em;
              color: #1C4D00;
              text-decoration: none;
              padding-top: 5px;
              text-align: center;
              padding-bottom: 5px;
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
              background-color: #FFFFFF;
              color: #A39E42;
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
              background-color: #FFFFFF;
              color: #A39E42;
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
              background-image: url(SpryMenuBarDown.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
              background-image: url(SpryMenuBarRight.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
              background-image: url(SpryMenuBarDownHover.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
              background-image: url(SpryMenuBarRightHover.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    ul.MenuBarHorizontal iframe
              position: absolute;
              z-index: 1010;
              filter:alpha(opacity:0.1);
    @media screen, projection
              ul.MenuBarHorizontal li.MenuBarItemIE
              display: inline;
              f\loat: left;
              background: #FFF;

    John is quite correct, I have answered in the Spry Forum though I did not realise that it was a YouTube video that you were talking about. Goes to show that showing your code goes a long way to supplying a solution.
    For now, have a look at what Zabeth69 (where is she???) said about a year ago http://forums.adobe.com/message/2715476#2715476
    Gramps

  • Spry Drop Down Problem in Internet Explorer

    I have built my spry drop down and it is working in all browsers except for IE.  I really need help with this. Attached is my code or you can view it at roemtech.com/menubarattempt.html.  It is rendering it vertically and stacking the buttons on top of each other.  Check it out in Internet explorer to see what I mean. Thanks so much for the help.
    JBelsher
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Template Model</title>
    <link href="webelements.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <style type="text/css">
    .BulletAlignment { text-align: left;
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header">
        <div align="right" class="FirstNameText"><strong><em>The First Name in Classroom Audio Systems</em></strong></div>
        <div style="background-color:#000; width:1024px; float: left;">
          <div>
    <ul id="DropDown" class="MenuBarHorizontal">
                        <li><a href="index.html">Home</a></li>
              <li><a href="Classroom-Audio-Systems.html" class="MenuBarItemSubmenu">Products</a>
                <ul>
                  <li><a href="classroom-audio-amplifiers.html">Amplifiers</a></li>
                  <li><a href="classroom-audio-speakers.html">Speakers</a></li>
                  <li><a href="classroom-audio-accessories.html">Accessories</a></li>
                </ul>
              </li>
              <li><a href="classroom-audio-specs.html">Specs</a> </li>
              <li><a href="classroom-audio-tips.html">Tech Tips</a></li>
              <li><a href="classroom-audio-contacts.html">Contacts</a></li>
            </ul>
          </div>
        </div>
        <div style="height:30px;"></div>
      </div>
    <!--End Header-->
    </div>
    <!--End of Content-->
      <div class="footer"><span style="padding-top:10px; font-size: 12px;">&copy; 2010 Roemtech LLC, All Rights Reserved 1491 N. Kealy Ave. Suite 8, Lewisville, Texas 75057</span></div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("DropDown", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      </script>
    </body>
    </html>

    It needs to be versions 6 and higher of Internet Explorer.  I will attach my CSS below.  Just note all of the notes are still in there from dreamweaver.  Thanks for looking at this.
    James
    @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: 120%;
    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;
    width: 120px;
    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%;
    cursor: default;
    width: 8.5em;
    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.5em;
    /* 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
    /* 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: #09F;
    text-decoration: none;
    text-align: center;
    /* 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: #000;
    color: #09F;
    font-size: 100%;
    text-align: center;
    /* 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: #333;
    color: #09F;
    text-align: center;
    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: repeat-x;
    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: none;
    background: #FFF;

  • 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>

  • Spry Menu Bar not showing up in Internet Explorer 7

    So, after hours of playing with CSS code yesterday and today,
    I finally got my Spry navigation bar laid out the way I would like
    it to display in Safari. It look a very long time for me to
    customize it the way I wanted it, but it the end, it turned out
    fine.
    Then... to my horror, I jumped into Internet Explorer 7, and
    there is no navigation bar to be seen. I've heard of some problems
    when viewing Spry menus in different browsers, but I never heard of
    the menu simply not being displayed.
    Any ideas on why this would occur? You can view the page I'm
    working on
    here.
    Any insights would be greatly appreciated. Thanks!

    I am sorry, but I do not see a SpryMenuBar in your document nor do i see a problem with the menubar that you do have. I have tested in IE7+
    Gramps

  • Spry menu works in Firefox and Safari, but not Internet Explorer

    I designed my school website in CS4 and  CS5.  The left spry menu bar appears correctly in Firefox and Safari, but in Internet Explorer the gray background and buttons do not appear.  You can only see the text and when you scroll over the text, it disappears even though when you click on it, the link does appear.  The website is http://ml.chinookschools.org.  I created the site on a mac and I am hosting it on a mac mini server on my network at school.  I am a beginner with Dreamweaver and I'm not sure if someone can help me with this, but I would sure be appreciative for any help offered. Here is the source code for the main template page:
    </style>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div id="wrapper">
      <div id="header"><a href="../index.html"><img src="../images/header.jpg" width="950" height="121" /></a>
        <div id="apDiv1"><a href="http://chinookschools.org/" target="_blank"><img src="../images/hslink.gif" width="170" height="60" /></a></div>
      </div>
      <div id="bodyArea">
        <div id="left">
          <ul id="MenuBar1" class="MenuBarVertical">
            <li><a href="../calendar.html">Calendar</a>            </li>
            <li><a href="../contactinfo.html">Contact Information</a></li>
            <li><a href="../currenthappenings.html" class="MenuBarItemSubmenu">Current Happenings</a>
              <ul>
                <li><a href="../harwoodhappen.html">Mr. Harwood - K</a></li>
                <li><a href="../haslerhappen.html">Ms. Hasler - K</a></li>
                <li><a href="../tedwardshappen.html">Mrs. T. Edwards - 1</a></li>
                <li><a href="../lewishappen.html">Mrs. Lewis - 1</a></li>
    <li><a href="../whitneyhappen.html">Mrs. Whitney - 2</a></li>
    <li><a href="../weinheimerhappen.html">Mrs. Weinheimer - 3</a></li>
    <li><a href="../cedwardshappen.html">Mrs. C. Edwards - 4</a></li>
    <li><a href="../macleodhappen.html">Mrs. MacLeod - 5</a></li>
    <li><a href="../mackenziehappen.html">Mrs. MacKenzie - 6</a></li>
    <li><a href="../surberhappen.html">Mrs. Surber - Ex. St.</a></li>
              </ul>
            </li>
            <li><a href="../PDFs/gifted.pdf">Gifted &amp; Talented</a></li>
            <li><a href="../libraryhappen.html">Library News</a></li>
            <li><a href="../pto.html">PTO</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">School Information</a>
              <ul>
                <li><a href="../activities.html">Activities</a></li>
                <li><a href="#" class="MenuBarItemSubmenu">Class Schedules</a>
                  <ul>
                    <li><a href="../harwood.html">Mr. Harwood - K</a></li>
                    <li><a href="../hasler.html">Ms. Hasler - K</a></li>
                    <li><a href="../tedwards.html">Mrs. T. Edwards - 1</a></li>
                    <li><a href="../Lewis.html">Mrs. Lewis - 1</a></li>
    <li><a href="../whitney.html">Mrs. Whitney - 2</a></li>
    <li><a href="../weinheimer.html">Mrs. Weinheimer - 3</a></li>
    <li><a href="../cedwards.html">Mrs. C. Edwards - 4</a></li>
    <li><a href="../macleod.html">Mrs. MacLeod - 5</a></li>
    <li><a href="../mackenzie.html">Mrs. MacKenzie - 6</a></li>
                  </ul>
                </li>
    <li><a href="../edlinks.html">Educational Links</a></li>
    <li><a href="../PDFs/handbook.pdf">Handbook</a></li>
    <li><a href="../PDFs/newsletter.pdf">Newsletters</a></li>
    <li><a href="../schoolforms.html">School Forms</a></li>
    <li><a href="../studyhall.html">Study Hall</a></li>
              </ul>
            </li>
            <li><a href="../staff.html">Staff</a>        </li>
            <li><a href="../index.html" class="MenuBarVertical">Home</a></li>
          </ul>
        </div>
    <div id="right"><!-- TemplateBeginEditable name="Editable Area" -->
    <!-- TemplateEndEditable --></div>
        <div id="footer">
          <div align="center"></div>
          <div align="center"></div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    You are not using the latest Spry files
    The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
    Then, if you have a look near the bottom of SpryMenuBarVertical.css you will see that the white background colour has been specified for IE as in
    @media screen, projection
        ul.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
    Change the value to #CCC and it will have fixed that part of the problem.
    When you upgrade to the later version of Spry, make sure to keep a copy of the CSS file as a reference to modifying the new CSS file.
    Gramps

  • Spry Alignment and Positioning Problem in Internet Explorer 6 and 7

    I am designing a website at http://atoment.007gb.com, and neither me, nor my partner can figure out why the Spry Horizontal Menu Bar is loading the way it is in Internet Explorer.  We are doing this for a school project, and eye appeal and workability is a top priority.  I changed and customized most of it, but even if i did keep it the same, it still wouldn't work. I have only the best confidence, that even given the amount i have changed, you will still be able to help me with my alignment problem.
    The Submenu Buttons Tile across the page, when they are supposed to go straight down...
    the Submenu overlaps the main menu when you hover over it
    and the darned thing wont center in any of my browsers, but thats the least of my worries.
    Here is the CSS Codes
    #MasterNavigator {
    width: 1024px;
    height: 75px;
    #Navigator {
    margin-left: auto;
    margin-right: auto;
    clear: both;
    #NavigatorButtonsLeft  {
    background-image: url(../_images/MenuButtonBackgroundLeft.png);
    width: 128px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    vertical-align:center;
    #NavigatorButtonsMiddle {
    background-image: url(../_images/MenuButtonBackground.png);
    width: 128px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    vertical-align:center;
    #NavigatorButtonsRight {
    background-image: url(../_images/MenuButtonBackgroundRight.png);
    width: 128px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    vertical-align:center;
    #NavigatorButtonsSub {
    background-image:url(../_images/SubMenuButtonBackground.png);
    width: 128px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    And here is my HTML code:
    Home
    Publishing
    Videos
    Patents
    Wallpapers
    Avatars
    Userbars
    Digital Design
    Digital Gallery
    3-D Gallery
    Sci-Fi
    Technology
    Structures
    Vehicles
    Concepts
    Web Design
    Templates
    Graphics
    About Us    
    Atom Enterprises
    Slamerz
    The images I used are 20% Transparent, and are listed below.
    http://atoment.007gb.com/_images/MenuButtonBackgroundLeft.png
    http://atoment.007gb.com/_images/MenuButtonBackground.png
    http://atoment.007gb.com/_images/MenuButtonBackgroundRight.png
    http://atoment.007gb.com/_images/SubMenuButtonBackground.png
    Please try your best to help me.

    0087adam wrote:
    ok, but how can I make it work with what I have.  All the css codes are the
    same, they just have been renamed.
    The original SpryMenuBarHorizontal.css does not have any issues in any of the browsers. If you go and modify the original, and it does not work anymore, then the logical conclusion is that you have made one or (more likely) multiple mistakes.
    In other words, you cannot make it work with what you already have.
    My advice is that you replace the original CSS and work from there; but instead of changing the original CSS, make your changes in a separate stylesheet so that you can monitor and test the code at each change. For instance if you want to change the colour of the text you make a style rule that overrides the original in your new stylesheet as follows:
    ul.MenuBarHorizontal a {
        color: #333;
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
        color: #FFF;
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
        color: #FFF;
    If you want to change the background colour to an image, then follow the same procedure, testing your code at each step.
    I hope this helps.
    Ben

Maybe you are looking for

  • Cross reference help needed

    Here is the situation: I create automatic figure number in my document. That is working fine. In my text, when I want to cross reference the figure (i.e. "FIGURE 3-3"), I click in the location in the text and use "Type"... "Interactive"... "Insert cr

  • Backing up Satellite P 25

    I have a Satellite P25 S526 which I bought in either 2004 or 2005.  I have had only minor problems with it until now.  I will get in to that in later post but for now here is the problem. The laptop came with a cd-rw and DVD drive there was no floppy

  • Loading Flat file - error

    Hi Experts, I got a dump as an excel file from a user. I am supposed to load them in BI. When I try to open that file using notepad, I see junk data and when I see the preview of the file - I see Junk data as well. The excel file has about 20 columns

  • Distorted sound on Apple TV 3

    Hi, I just bought an Apple TV (gen. 3). But I seem to have some problems with the sound. It is connected to my TV through HDMI and I have a speaker set connected directly to my TV. The problem is that the sound is distorted and the bass is all wrong.

  • How do I limit number of emails shown?

    after updating to IOS& my ipads and Iphone 4s show a count of all emails in my POP (Yahoo) account. I am also unable to set the number to download, as was possible with previous IOS versions.