Spry Drop Down Duplicated in Empty Space

Question

This is regarding this site: staging.istservice.com .
My spry menu is behaving very strangely. In Firefox there is
a duplicate ghost menu (just the subs) that appears on the far left
of the screen (it's a very long screen shot so I will give you the
link instead of posting: staging.istservice.com/GhostMenu.jpg
You can only see the full menu if you have a very wide
monitor (I had to spread it across two to get the screen shot). But
if you have even a somewhat wide monitor you can see the very left
side of the duplicate menu. When you hover over a drop down in the
page menu, the correlating ghost menu disappears. If you keep your
mouse hovered over it, they blink on and off very quickly.
For even further oddness, in Explorer this only show up when
I preview the local file. Once I post it (and thus avoid the
ActiveX warning) it disappears.
I can't seem to connect the dots here. I know firefox has
issues with spry but I was able to fix the spry-over-flash issue
with some janky workarounds. I’m still not quite sure why
they worked. However, the above bug pre-dated the workaround so I
doubt they caused it.
Any thoughts?

Answer 1

> You can only see the full menu if you have a very wide
monitor
In FF3 (not sure about earlier) you can use Ctrl+ scroll on
mouse to zoom to
see your problem without a wide monitor.
Check out your duplicate id's which may help when you fix
them
(mainContent), and the omitted end tag for <li>
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fstaging.istservice.com%2F
Jo
"tflavin" <[email protected]> wrote in
message
news:[email protected]...
> This is regarding this site: staging.istservice.com .
>
> My spry menu is behaving very strangely. In Firefox
there is a duplicate
> ghost
> menu (just the subs) that appears on the far left of the
screen (it's a
> very
> long screen shot so I will give you the link instead of
posting:
> staging.istservice.com/GhostMenu.jpg
>
> You can only see the full menu if you have a very wide
monitor (I had to
> spread it across two to get the screen shot). But if you
have even a
> somewhat
> wide monitor you can see the very left side of the
duplicate menu. When
> you
> hover over a drop down in the page menu, the correlating
ghost menu
> disappears.
> If you keep your mouse hovered over it, they blink on
and off very
> quickly.
>
> For even further oddness, in Explorer this only show up
when I preview the
> local file. Once I post it (and thus avoid the ActiveX
warning) it
> disappears.
>
> I can't seem to connect the dots here. I know firefox
has issues with spry
> but
> I was able to fix the spry-over-flash issue with some
janky workarounds.
> I?m
> still not quite sure why they worked. However, the above
bug pre-dated the
> workaround so I doubt they caused it.
>
> Any thoughts?
>
>
> /* 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: 225px;
> 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: 8.2em;
> position: absolute;
> left: -1000px;
> }
> /* Submenu that is showing with class designation
MenuBarSubmenuVisible,
> we
> set left to auto so it comes onto the screen below its
parent menu item */
> ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
> {
> left: auto;
> }
> /* Menu item containers are same fixed width as parent
> ul.MenuBarHorizontal ul li
> {
> width: 8.2em;
> }
> /* Submenus should appear slightly overlapping to the
right (95%) and up
> (-5%)
> */
> ul.MenuBarHorizontal ul ul
> {
> position: absolute;
> margin: -5% 0 0 95%;
> }
> /* Submenu that is showing with class designation
MenuBarSubmenuVisible,
> we
> set left to 0 so it comes onto the screen */
> ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
ul.MenuBarSubmenuVisible
> {
> left: auto;
> top: 0;
> }
>
> /**************************************************
> *****************************
>
> DESIGN INFORMATION: describes color scheme, borders,
fonts
>
> **************************************************
> *****************************/
>
> /* Submenu containers have borders on all sides */
> ul.MenuBarHorizontal ul
> {
> border: 1px solid #CCC;
> }
> /* Menu items are a light gray block with padding and no
text decoration
> */
> ul.MenuBarHorizontal a
> {
> display: block;
> cursor: pointer;
> background-color: #666666;
> padding: 0.5em 0.75em;
> color: #FFFFFF;
> text-decoration: none;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 10px;
> }
> /* 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: #999999;
> color: #FFF;
> }
> /* Menu items that are open with submenus are set to
MenuBarItemHover with
> a
> blue background and white text */
> ul.MenuBarHorizontal a.MenuBarItemHover,
ul.MenuBarHorizontal
> a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
a.MenuBarSubmenuVisible
> {
> background-color: #999999;
> color: #FFF;
> }
>
> /**************************************************
> *****************************
>
> SUBMENU INDICATION: styles if there is a submenu under a
given menu item
>
> **************************************************
> *****************************/
>
> /* Menu items that have a submenu have the class
designation
> MenuBarItemSubmenu and are set to use a background image
positioned on the
> far
> left (95%) and centered vertically (50%) */
> ul.MenuBarHorizontal a.MenuBarItemSubmenu
> {
> background-image: url(../Images/spryspacerTemp.jpg);
> background-repeat: no-repeat;
> background-position: 100% 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%;
> background-color: #1C5D9B;
> }
> /* Menu items that are open with submenus have the class
designation
> MenuBarItemSubmenuHover and are set to use a "hover"
background image
> positioned on the far left (95%) and centered vertically
(50%) */
> ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
> {
> background-image: url(SpryMenuBarRightHover.gif);
> background-repeat: no-repeat;
> background-position: 95% 50%;
> }
>
> /**************************************************
> *****************************
>
> BROWSER HACKS: the hacks below should not be changed
unless you are an
> expert
>
> **************************************************
> *****************************/
>
> /* HACK FOR IE: to make sure the sub menus show above
form controls, we
> underlay each submenu with an iframe */
> ul.MenuBarHorizontal iframe
> {
> position: absolute;
> z-index: 1010;
> }
> /* HACK FOR IE: to stabilize appearance of menu items;
the slash in float
> is
> to keep IE 5.0 from parsing */
> @media screen, projection
> {
> ul.MenuBarHorizontal li.MenuBarItemIE
> {
> display: inline;
> f\loat: left;
> background: #FFF;
> }
> }
>