Avatar of savache27
savache27
 asked on

Dreamweaver CS 5 Spry vertical menu gap

Hi,

I was wondering if someone can please take a look at the vertical spry menu I have on the following page:

http://www.jrtc-polk.army.mil/cpac/

If you go to "Pay & Leave" and then to "Salary &Wages" the menu items under that have a large gap with what appears to be a clear box around it. How can I get rid of the space? And is there anyway I can make it to where to border of the box is not visible? I'm including the CSS.

@charset "UTF-8";

/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 15em;
	color: #000;
}
/* 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;
	color: #000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	text-align: left;
	cursor: pointer;
	border: thin solid #333;
	color: #000;
	float: left;
	width: 15em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	padding: 0;
	list-style-type: none;
	position: absolute;
	z-index: 1020;
	cursor: default;
	left: -1000em;
	top: 0;
	color: #000;
	margin: 0%;
	width: 15em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: auto;
	color: #000;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	color: #000;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	width:  15em;
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: 1px solid #CCC;
	color: #000;
	font-size: x-small;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 1px solid #CCC;
	color: #000;
	position: absolute;
	padding-left: 100%;
	width: 15em;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	padding: 5px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color: #33C;
	color: #FFF;
	font-weight: normal;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
	left: auto;
	top: 0px;
}

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

 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.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	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.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}

Open in new window

Adobe DreamweaverCSSWeb Development

Avatar of undefined
Last Comment
savache27

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Dewmec

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
savache27

ASKER
Hi Dewmec,

Thanks so much for your help!! That definitely fixed the first issue. I'm sorry, I didn't explain myself very well with the border issue. When you hover over a menu item, and the submenu comes out, it's like there is a clear container or something that you can see. It surrounds the entire contents of the submenu, so you can see this almost clear line going between some of the menu items at the bottom of the last subitem. And that still probably doesn't make much sense.
Dewmec

Hi savache27,

I'm not sure if do know what you mean or not. I included an image of what I believe to be what you are referring to. In my attached image, a white line appears above the "Pay & Leave", below the "Salaries & Wages" and again above the "Wage Grade." Is that what you mean?

So if I'm understanding you correctly, you want to remove that white line that seems to be between the dark border and the blue background of the menu items. Is that correct?

Dewmec
WhiteLineIssue.jpg
savache27

ASKER
Yes, that's what I'm talking about! It looks worse on other parts of the menu. Is there a way to remove that?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
SOLUTION
Dewmec

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
savache27

ASKER
Dude, you ROCK!!! That fixed everything. Thank you SO much!!