Spry SSI IE8 Artifact Problem

we have setup our intranet site with several spry menus. So that we do not have to copy content we have master menu files and are using server side includes like the following: 
The menus work but we are having problems with how the menu displays. All looks well until we scroll down on the page. The menu displaces and looks like it follows the page content. When we put the menu code directly into the page this does not happen. When you mouse over the 'displaced' menu the position resets to its correct position... sometimes, others it just disappears all together. Help would be appreciated as we are looking at putting this new site into production soon.
Pic below.... First glance all is as it is supposed to be...
Then...

This is probably a stupid question, but have you adjusted the links to supporting files within your menu include?
To put it another way, if you include a file from another dirctory/folder, then all of the links to supporting files (JS and CSS) should be the same as if these files were called from the parent page.
Better still, place all refered to CSS and JS files within the parent document and strip the included document from all code with the exception of the menu markup and the menu constructor.
For more info read here http://foundationphp.com/tutorials/sprymenu/ssi.php
I hope this helps.
Ben

Similar Messages

Photoshop CS5 update doesn't fix artifact problem in the menu bar !

Hi to all,
I've installed the new update (december 7) recommended by Adobe, but that doesn't fix the Artifact problems in the menu bar !!!
More, with my Windows 7 Pro (French language), Photoshop CS5 video pilot create artifacts in the menu bar in several situations.
With Windows classic Theme chosen, theme management disabled:
1. Opening a photo and applying a filter (especially Noise Reduction).
2. Opening a photo and changing some preferences.
3. Opening a photo with Windows 7 File Explorer working cause the pilot to crash with a black screen, ans followed by a message saying that Win 7 has recovered the video pilot.
To suppress most of the problems, I need to Activate "Themes" and choose an Aero theme or the Basic Theme.
I also need to activate some items that slow the PC !
Very strange !
Could someone help, me please ?
Have a Nice Day.
Thierry

Yes, I've an Asus ENGT220/G/DI/1GD3, tried Windows default pilot, 2009 Asus pilot "nv19045_Win7Vista64.zip", and 2010 latest version "nv25919_Win7Vista64.zip", no change !
More, I've exchanged the video car by a "monster" ENGTX465 with it's driver, NO CHANGE !
So what to do ?!
Help, please !

Spry on ie8 problem

Hi All,
First of all i do apologize if i am posting this in the wrong
place,
my problem is that when i create a spry menu, its all messed
up when looked at from ie8
but it looks all OK in ie6 and other browsers, i read about
an explorer hack on the net but
not sure on how to do it, or maybe there is another simple
way to get round this problem.
I am a bit of a newbie so please try to be not so complicated
in the replies :)
i made a test page, the url is www.hanpacific.com/test.html
maybe that might help
i am using dreamweaver cs3
thanks very much to all that reply

A few problems. First your Spry is out of date. Download the
updater package to update from your current version to the latest
1.6.1:
http://labs.adobe.com/technologies/spry/home.html
Second, be sure to note that IE 8, is NOT a final release.
Thus it is not a good idea to test at this point. You are at least
1 year out from IE 8 going final, probably around the same time as
Office 2009/2010 and Windows 7. Be sure to look at your site
statistics and, if the beta for IE 8 has a high enough percentage,
then consider tweaking the code. Also remember IE 8 is based on the
CSS 2.1 standards unlike Firefox, Safari and Chrome which are using
the CSS 3 standards. This should not affect the menu but is
something to keep in mind when styling the buttons.

Spry Menu Bar Positioning Problem in IE

I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
<ul id="MenuBar2" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
      <ul>
        <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
        <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
        <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
      </ul>
    </li>
</ul>
<ul id="MenuBar3" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
      <ul>
        <li><a href="#">SLIDING DOORS</a></li>
        <li><a href="#">BI-FOLD DOORS</a></li>
        <li><a href="#">ROOM DIVIDERS</a></li>
      </ul>
    </li>
</ul>
Here is the page where you can see the problem if you view it with IE, and see that it's fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
http://2113web.com/indeco/index.html
I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
Below is the CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    font-weight:bold;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    white-space: nowrap;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    float: none;
    background-color:#f5f5e8;
    height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 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:none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding: 0.5em 0.75em;
    color: #59330d;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: transparent;
    color: #afa06f;
/* 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: transparent;
    color: #afa06f;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Perry

Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    padding: 0.5em 2em 0.5em 0.75em;"
With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
Perry
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    margin-top: 40px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #f5f5e8;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
      background-color: #f5f5e8;
    color: #afa06f;
/* 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: #f5f5e8;
    color: #afa06f;
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
/* 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
/* 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
/* 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
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);
    background: transparent;
/* 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;

Pre IE8 layout problem

Hi, I have used a h6 tag with a blank line to create a space at the bottom of the header div on my website - though it is rather ugly it does work in ie8 and ff to give a space, but not in previous versions of ie. I have been beating my head against a wall to try and figure out the correct way around the problem. Also the spry menu sits in the right place in the 2 browsers but again is in the wrong place foir ie7 and 6. I understand you can introduce a line of code -

but what would work to give the space and put the menus in the right place?
many thanks for your help
m
site www.michaelcrabtree.co.uk
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
    <h1>michael crabtree portraits</h1>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../index.html">home</a>        </li>
      <li><a href="../michael about/michaelabout.html">about</a></li>
      <li><a href="../press/pressabout.html">press</a></li>
      <li><a href="../corporate/corporatePRabout.html">corporate</a></li>
      <li><a href="../family about/familyabout.html" class="MenuBarItemSubmenu">portrait</a>
        <ul>
          <li><a href="../family about/familyabout.html">about</a></li>
          <li><a href="../family/locationgallery.html">on location</a></li>
          <li><a href="../family/studiogallery.html">studio portrait</a></li>
          <li><a href="../family/familygallery1.html">gallery 1</a></li>
          <li><a href="../family/familygallery2.html">gallery 2</a></li>
          <li><a href="../family about/FAQ.html">FAQ</a></li>
          <li><a href="../family about/familyprices.html">prices</a></li>
          <li><a href="../pictureproblems.html">tuition</a></li>
          <li><a href="../clientlogin.html">client login</a> </li>
        </ul>
      </li>
      <li><a href="../recent/recentpublications.html">recent</a></li>
      <li><a href="../contactpage.html">contact</a></li>
    </ul>
    <h6><br />
    </h6>
</div>

For the margin problem try increasing the 2em to 3 or 4 em. (1em = the size of your default font, normally = 12 - 14px)
(use the IE conditional statement in your original post for older versions of IE).
Your version of spry is 1.4, so if you are using CS3 or 4, follow the link below and install the extension called spry updater for CS3/4, using the extension manager then restart DW, go to Site (in the main menu) and select spry updater..
If you are using a version before CS3 (MX - MX2004 - 8), download the new version of spry and replace your old versions with the new ones.
http://labs.adobe.com/technologies/spry/
PZ

Spry and IE8 - errors

I have just installed IE8 beta and I now notice that when
viewing websites containing the Spry menu bar an addittional box
opens with the words failed... whenever I move accross the menu...
this only happens in IE8
Is there a fix available to ensure all Dreamweaver CS3
elemements work in ie8 ?
Steve

"Koolguy" <[email protected]> wrote in
message
news:fsf37p$arf$[email protected]..
> IE8 is out for testing and also to allow developers to
see if there are
> issues
> with websites prior to it's launch... we would be slack
in my opinion if
> we
> didn't check and fix potential Ie8 errors... especially
as we charge a lot
> for
> our services... and our clients expect the best.
>
> To fix this problem is actually easy... all one need do
is update to the
> latest spry element by visiting the spry home page on
adobe... this fixes
> all
> Ie8 errors.
>
>
http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fspry
No it doesn't, and nor should it. It fixes general errors in
Spry. Spry is a
lab experiment. Someday it will probably be very good. IE7
Beta caused a
panic and lots of folks did some "beta fixes"... and then had
to undo and
redo a lot of work upon the final release.
I strongly advise anyone seeing issues with a page in IE8 to
simply log in
to Microsoft's beta forum and report it. If you attempt to
fix a bug now,
you might be setting the stage for a broken page when the
finished version
of IE8 ships.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

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

</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;         [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.

Spry dropdown z-index problems in IE

Hello
I'm having some trouble with the spry horizontal dropdown in
IE, and it's interaction with SmoothGallery. In every browser (with
the exception on IE 6&7 of course) the higher z-index values of
the menu cause it to overlay the JS image gallery below it. In IE
however it does not.
http://www.digitalrift.co.uk/projects/woods/
Works fine on every browser tested so I can't see how it'd be
a fault with the z-index values used. Anyone have a suggestion as
to a workaround for good ol' IE?
Thanks

All right, well I just figured out my problem, and hopefully this will help anybody else.
I was positioning my images using <position: absolute;> While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it.
The solution I found was changing the position attribute to "static" rather than "absolute". The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place.
While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

Spry Menu Bar transparency problem - one solution

Like many other people I have spent several frustrating days trying to solve the problem of Spry Menu Bar sub-menus appearing to be transparent (text, etc. underneath the sub-menus shows above/through the sub-menu items). This problem manifested itself in IE7, but not in Netscape, Safari or Firefox.
I thought it must be the dreaded IE z-index problem.
I have been through most other people's questions and replies on the Adobe forums, tried all kinds of z-index changes and various other mods to my own CSS and/or the Spry CSS's - all to no avail.
My situation:
I have a Spry Menu Bar above a clicktrail and a text block. Both the clicktrail and the text block showed through the sub-menu items, which drop-down over them.
All three items are located in relative-positioned divs, necessary because the whole page design is contained in a self-centralizing container div and absolute-positioned divs screw up the whole page layout when the screen size or browser window size changes.
(Sorry, I can't upload the files to a website at the moment.)
The solution that works for me in Dreamweaver CS4:
I selected the divs for the clicktrail and the text block, one at a time, and selected Modify > Arrange > Send to Back in Dreamweaver CS4.
I then selected these two items again and selected Modify > Arrange > Bring to Front.
Finally I selected the div containing the Spry Menu Bar and selected Modify > Arrange > Bring to Front. The thought behind this was that this would put the Spry Menu Bar on top of everything else - and it works!
This solution works in all four browsers, but don't ask me how! I can't see any change in any CSS, nor in my template code. All I can see is a strange, flashing vertical line (like an enormous cursor - about 10 cm [3"] high) in the middle of the template page only (and only in Dreamweaver) if I click on the page background. I can neither find an explanation for this nor anything in the coding which might cause it. By the way; the z-index for the menu div =2, the z-index for the clicktrail div is not defined and the z-index for the div for the text block is set to auto. I haven't tried other values and to be honest I'm not sure what they were set to before I applied the above 'solution'.
But hey - who the hell cares - my site works!
I hope this helps someone else out of an absolute hell-hole...if someone out there can explain where to find the code that had been changed or added by doing this I'd like to know. I don't like things I can't explain - even if they do work!

This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #fff;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps

Spry submenu z-index problem in IE

My sub menus in IE are going behind the page content on my wordpress blog page.
I'm not sure if this is a spry or wordpress problem, but I had this problem on a few other (non wordpress) pages and fixed it by adding "z-index:10000;" under "#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */".
In wordpress I have a plug in called "custom headers and footers" where I can put in html code for the menu.
In this I've added "z-index:100000000;" under the following menus :
#MenuBar, .nav
and
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
The background area of the menu is also about twice the height it should be in IE, this isn't as big a problem, but I would like to fix that too.
I think I found out a while ago that it's not possible to make the menus shiny in IE as they are in every other browser.
Also in firefox when I'm on the blog page and I hover over the "Strawberry switchblade" menu it makes the text in all the menus go darker.

All right, well I just figured out my problem, and hopefully this will help anybody else.
I was positioning my images using <position: absolute;> While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it.
The solution I found was changing the position attribute to "static" rather than "absolute". The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place.
While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

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

Spry horizontal menu alignment problem

There is an issue I am dealing with that is causing problems.
I am trying to avoid having the borders double up in thickness, anywhere within the menu.
I have achieved this by using the left and bottom border everywhere I can and then adding class or id tags where appropriate and adding my own top and right borders.
Works fine everywhere except at the top of the dropdown section of the submenus where it connects with the main horizontal menu.
I would like that top box of the submenu to align perfectly with the main horizontal menu bar so that there is a clean single pixel line.
A clean contiuous line around all menu objects.
When I add a top border on that top box of the submenu, I can adjust the placement a little but it always seems to either over ride the main horizontal menu, which causes me to either lose the border or double up on it.
if I have a border completely around both the horizontal menu and the submenu, then when I align them so that the borders sit on top of each other, I get an artifact at the corners of the lines that appear as a gap. It is NOT clean.
I can edit the position of the submenu in the CSS code below, I have done this with the margin-top statement. I have adjusted that between 0 and -1, and will inlcude images of the problem. Hopefully this will work.
I want a very clean continous line around the menu boxes that does NOT leave gaps, does NOT double up in thickness or leave any strange looking artifacts anywhere.
Any help would be greatly appreciated!
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
margin-top: 0px;
    margin-left: 0px;

Posting screenshots only demonstrates the problem. For anyone to troubleshoot it for you, they need to see the actual menu. Upload the problem page to a public website, and post the URL here. Then someone can have a look at it for you.

Spry validation select widget problem

Dreamweaver CS3
Im using spry validation for my form but the two spry validation select widgets I am using are not working. When I test them I keep getting errors that nothing has been selected when something has in fact been selected. I've used spry validation before with no problems but this is the first time using the spry validation select widget.
My code:
<tr>
            <td valign="top">Page in Question*</td>
            <td valign="top"><span id="spryselect1">
              <label>
              <select name="select1" id="select1">
                <option selected="selected">Home</option>
                <option>About Us</option>
                            </select>
              </label>
              <span class="selectRequiredMsg">Please select an item.</span></span></td>
          </tr>
          <tr>
            <td valign="top">Which Internet Browser do you use?*</td>
            <td valign="top"><span id="spryselect2">
              <label>
              <select name="select2" id="select2">
                <option selected="selected"> </option>
                <option>Internet Explorer</option>
                <option>Firefox</option>
                <option>Safari</option>
                <option>Opera</option>
                <option>Google Chrome</option>
                <option>Other</option>
              </select>
              </label>
              <span class="selectRequiredMsg">Please select an item.</span>              </span></td>
          </tr>
Appreciate the help.

Hi Daniel,
Im having the same problem, can you please tell me what you did? I understand you found the problem?
Thank you!

Spry menu response time problems with IE

We implemented the spry vertical menu for showing the
categories of a products catalog. It has almost 1400 categories
organizad at about 5 levels, some categories have about 20
subcategories. These categories are in a coldfusion session
variable.
It works perfect in mozilla, but in IE7 and IE6 in some
computers, present this problem:
- The response time is slow when you change from one category
that has subcategories to ahother. If you see the Windows Task
Manager of the computer while you use the menu, the processor use
go up to the top level.
And the effiecience of the menu decrease.
See in
http://edit.panamericana.com.co/
Thanks,
Alejandro

mdr4win wrote:
i dont think you understood my question, wasnt about body background, but abut the spry image slideshow to work properly in IE
I was not talking about body background, but about having markup that screws up your document when using a browser. Body background just happened to be there. Perhaps you would do well to have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flittletreats.org%2F.
I have noticed that you ignored my solution; your document still shows two bodies.
Perhaps I should have mentioned that I tested in IE6 through to IE9 using IETester and the above was the only thing stopping IE from performing properly.
How did you determine that the slideshow was not working correctly in IE and which versions of IE?
Grumps

Spry vertical menu background problem in IE

The background of the <li> items show as white on the spry menu items here. http://www.steveelson.com/index.html. Menu items are .pngs, but I've used the iepngfix.htc fix, but still have the problem in IE 8 and 9. So I assume it's a css problem, but can't figure it out.

Save a copy of the css file as you have altered it, but under a new name. You might want to save a copy of your menu, too, so you'll have something to refer to. Then delete your menu widget and re-insert it.
You will most likely be very surprised at how easy it is to style it up (referring from time to time to your saved, former stylesheet).
If your page works without your menu, you should be successful inserting your menu to it.
Beth

Spry SSI IE8 Artifact Problem

Similar Messages

Maybe you are looking for