Dreamweaver CS 5 Spry vertical menu gap

savache27
savache27 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Hi savache27,

I believe I have the solution to your problem. In your SpryMenuBarVertical.css file, change the "left: auto;" to "left: 0px;". It resolves the issue on my local machine and should for you as well.

So change from:
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: auto;
	color: #000;
}

Open in new window

To the following:
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0px;
	color: #000;
}

Open in new window


As far as the border question, do mean that you just don't want to have any borders at all, so that it is just square boxes with text inside them for the menu? If so, then in that same SpryMenuBarVertical.css file, locate:
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;
}

Open in new window

And then change the "border: " to "border: 0px" as follows:
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	text-align: left;
	cursor: pointer;
	border: 0px;
	color: #000;
	float: left;
	width: 15em;
}

Open in new window

If I understood you correctly, this is what you were looking for. Let me know how this works out for you. Thanks.

Dewmec

Author

Commented:
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.

Commented:
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
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Yes, that's what I'm talking about! It looks worse on other parts of the menu. Is there a way to remove that?
Commented:
Hi savache27,

Yes, I think I got what you were looking for this time. Some of the fix is actually in the same part of the .css file as your fix from the other problem with you menu. What you need to do is go to your SpryMenuBarVertical.css file again and locate:
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0px;
	color: #000;
}

Open in new window

It should look familiar, since this is where we corrected to "left: 0px" from before. Now all you need to do is add "border: none;" like the following:
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0px;
	color: #000;
	border: none;
}

Open in new window

Now one more thing. Go all the way to the very bottom of that .css file and locate the following:
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}

Open in new window

And change the "background: #FFF;" to "background: #000;" as follows:
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #000;
	}
}

Open in new window

That's it! That will remove that annoying white border that you see whenever you hover on the menu. The first change to border none eliminates the top borders and most other white lines and then the last change eliminates the remaining few between menus vertically and elsewhere.

In case you wanted to reference it, I attached a copy of the completed SpryMenuBarVertical.css with the corrections. Let me know how this all works out for you. Thanks.

Dewmec
SpryMenuBarVertical.css

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial