PDA

View Full Version : Spry Submenu Alignment issue


mfarineau
02-22-2011, 06:19 PM
Hi,
I've been pulling my hair out trying to get the submenu in a spry menu to line up properly in IE. Here is my CSS:

@charset "UTF-8";



/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */



/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */



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



LAYOUT INFORMATION: describes box model, positioning, z-order



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



/* The outermost container of the Menu Bar, an auto width box with no margin or padding */

ul.MenuBarHorizontal {

cursor:default;

font-size:100%;

list-style-type:none;

margin:-4px 0 0 10px;

padding:0;

width:auto;

}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

ul.MenuBarActive

{

z-index: 1000;

}

/* Menu item containers, position children relative to this container and are a fixed width */

ul.MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

position: relative;

text-align: left;

cursor: pointer;

float: left;

}


ul.MenuBarHorizontal li ul li a {

border-bottom:1px dotted #CCCCCC;

padding:5px 5px 0 25px;

}



ul.MenuBarHorizontal li ul li a:hover{

background-color:#E6E6E6;

}

ul.MenuBarHorizontal li ul li a:active{

background-color:#E6E6E6;

}





/* 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: 200px;

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: 200px;

padding:0px;

}

/* 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-left: 1px solid #CCC;

border-right: 1px solid #CCC;

border-bottom: 1px solid #CCC;

background-color: #fff;

color: #000;

display:block;

}

/* Menu items are a light gray block with padding and no text decoration */

ul.MenuBarHorizontal a {

color:#333333;

cursor:pointer;

display:block;

font-size:13px;

font-weight:bold;

height:25px;

padding:0.9em 2em;

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, ul.MenuBarHorizontal a:active

{

background-color: #fff;

color: #000;



}





/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color: #fff;

color: #000;

}



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



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

{

background-color: #fff;

color: #000;

}

/* 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-color: #fff;

color: #000;

}

/* 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-color: #fff;

color: #000;


}



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



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;

}

}





.bottomnav_inside {

background-color:white;

clear:both;

color:#999999;

font-family:Helvetica,Verdana,Arial,sans-serif;

font-size:0.7em;

margin-bottom:4px;

margin-left:38px;

padding-bottom:4px;

padding-right:12px;

padding-top:4px;

text-align:left;

width:909px;

}
Any help would be GREATLY appreciated!

DWcourse
02-23-2011, 02:31 AM
Spry 1.4 is an old version you should upgrade to 1.6.1. There's a link to the updater here: http://labs.adobe.com/technologies/spry/

Then it would help if you posted your page and gave us a link. Or at least were clearer about the problem. Is it lining up to the left, above or ?? compared to where it should?

mfarineau
02-23-2011, 12:49 PM
Thanks for the reply.
I know it's an outdated version of spry, however I'm reluctant to upgrade as I inherited this site from another department where I work and they have some pretty strict guidelines for upgrading that sort of thing.
Also, I can't post a link as the site I'm working on it is currently on a test server behind a firewall and can't be accessed publicly.

So here's the problem:
In IE 7+ instead of showing up directly beneath the parent menu, the spry submenu jumps down something like 45 pixels and to the left by about 175 pixels (No problems in FF, Chrome or Safari).

The parent menu is a horizontal menu with only the first option having a submenu. The submenu is a vertical menu.

I'm sorry I can't post more info like a screenshot or a link. I appreciate any advice you or anyone can offer!

DWcourse
02-23-2011, 02:54 PM
If you inherited the site,did the menu ever work correctly?

mfarineau
02-23-2011, 02:59 PM
Long story involving interdepartmental politics which I won't get into... but no, when I inherited the site the menu had not been optimized to work in IE... so now that's my job. Lucky me!

DWcourse
02-23-2011, 03:00 PM
I don't really see anything that jumps out as a problem in your code although the .bottomnav_inside style you added may cause a problem depending upon how it was used.

I'd recommend you start over with the default CSS and change it one or two items at a time and check the results and check the results in IE as you go. That way you can identify the problem style rule.

mfarineau
02-23-2011, 03:32 PM
Thanks for looking through my code. The ".bottomnav_inside" section you're referring to doesn't seem to have an effect on the submenu. I've tried commenting it out and have seen no effect. It was added by the original site authors so it may be a remnant of another site they used this as a template for.

I appreciate the advice about resetting the CSS and starting over, but to be honest at this point I'm much more likely to rip the menu out entirely and replace it with a nice jquery menu. This is my first experience with spry and I'm not really sure why anyone would use it over jquery in the first place.

Anyway I'm going to keep plugging away. If I happen to come across a solution in the spry css I'll post it here.
Thanks again!

mfarineau
02-23-2011, 04:35 PM
Woohoo! Problem Solved!
Thanks again to DWcourse and anyone else who took the time to look through my CSS.
Turns out, that particular CSS file is fine. My particular issue was in an IE only css file where for some reason someone added the lines:
ul.MenuBarHorizontal ul
{
margin-top:45px!important;
margin-left:-170px!important;
}

I don't know why that was in there to begin with, but pulling it out and forcing IE to use the "ul.MenuBarHorizontal ul" rules from the spry CSS was my fix.
Thanks again

DWcourse
02-23-2011, 07:12 PM
You're lucky you ever found that one!