PDA

View Full Version : What's happening to my Spry?


mjclementz
02-26-2009, 05:34 AM
I've got something seriously funky that I need a CSS guru to uncover for me. I can't seem to get the submenu to appear under the menu when rolled over, or clicked on for that matter. This is happening in both Firefox and IE so I don't think it's a bug. I think I'm the bug.

As you may be able to tell I modified the CSS to change the background, width, etc. and I must confess I'm no expert with the CSS. I guess that's obvious or I wouldn't be here.

You can see this in action here. (http://envymyhealth.20m.com)

Thanks for your help!




/************************************************** *****************************

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: 75em;
margin: 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: 105%;
position: relative;
text-align: center;
cursor: pointer;
width: 200px;
float: left;
overflow: hidden;
background-color: #FFFFFF;
height: 20px;
}
/* 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: 12em;
position: absolute;
left: -1000em;
top: 36px;
height: 431px;
}
/* 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: 12.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: 0px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #CCFF99;
padding: 0.5em 0.75em;
color: #3366CC;
text-decoration: none;
height: 1em;
border: 5px;
}
/* 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-color: #33C;
color: #FFF;

edbr
02-26-2009, 06:00 AM
might be
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 12em;
position: absolute;
left: -1000em;
top: 36px;
height: 431px;
} comment out top: 36px;
height: 431px; and try

mjclementz
02-27-2009, 02:23 AM
Hmmm.. Unless I'm just missing something that seemed like an incomplete thought, friend.

The lack of advice has compelled me to just go ahead and delete the spry assets from my site and start fresh. (EDIT- DON'T DO THIS!!! See below)

I post this because I think there's nothing worse than when you're researching a problem and find a forum where someone is asking the same question only to reply to themselves with "oops.. I figured it out. Thanks anyways!"

That's just not very helpful.

Thanks for trying to help, guy above me.

mjclementz
02-27-2009, 02:35 AM
On second thought, DON'T do that. I'm lucky I had the spry assets on my server or I would've had some pretty wicked issues.

Rather than be hasty and delete all the assets, I'm simply going to go through each and return the changes back to default so as to restore the Spry menu to its original setting.

edbr
02-27-2009, 02:47 AM
not an incomplete though this is added code that positions the div, not standard
a new instance is easy to recreate the default in dw so i dont esee why you would be frightened of going back to the begining. you should always back up files you change espeially when not sure of what you are doing

mjclementz
02-27-2009, 03:16 AM
good advice. Thanks for the follow-up I see what you meant now. I ended up going non-Spry because I was tired of the hassle and it's not so necessary for me anyways at this time.

Here's the end result of my struggles. (http://envymyhealth.20m.com)