logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-22-2011, 06:19 PM   #1
mfarineau
 
Join Date: Feb 2011
Posts: 5
Unhappy Spry Submenu Alignment issue

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:
Code:
@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!
mfarineau is offline   Reply With Quote
Old 02-23-2011, 02:31 AM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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?
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 02-23-2011, 12:49 PM   #3
mfarineau
 
Join Date: Feb 2011
Posts: 5
Default

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!
mfarineau is offline   Reply With Quote
Old 02-23-2011, 02:54 PM   #4
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

If you inherited the site,did the menu ever work correctly?
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 02-23-2011, 02:59 PM   #5
mfarineau
 
Join Date: Feb 2011
Posts: 5
Default

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!
mfarineau is offline   Reply With Quote
Old 02-23-2011, 03:00 PM   #6
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 02-23-2011, 03:32 PM   #7
mfarineau
 
Join Date: Feb 2011
Posts: 5
Default

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 is offline   Reply With Quote
Old 02-23-2011, 04:35 PM   #8
mfarineau
 
Join Date: Feb 2011
Posts: 5
Default

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
mfarineau is offline   Reply With Quote
Old 02-23-2011, 07:12 PM   #9
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

You're lucky you ever found that one!
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:37 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com