Spry Menu border issues

Dashsa · Aug 18, 2009

Hello I have a Spry menu that works well I am trying to set it up so that when you mouse over the sub menu It adds a border BUT I don't want a border over the main headings.
The main headings are rollovers and that is fine but I do not want them to have a border. It works correctly for the menu items that have a submenu but it does not work for the items that do not have a submenu.
Here is the page and the spry CSS.
thanks
D

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bay 10 Ventures - Contact Us</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('Images/company.gif','Images/navMenu/Ohome.gif','Images/navMenu/Ocompany.gif','Images/navMenu/Oportfolio.gif','Images/navMenu/Opress.gif','Images/navMenu/Oaffiliations.gif','Images/navMenu/Ocontact.gif','Images/navMenu/Ologin.gif')">
<div id="wrapper">
  <div id="HeadBanner">
	<img src="Images/headBanner.png" width="964" height="128">
  </div>
          <div id="NavBar"> 
            <ul id="MainNavBar" class="MenuBarHorizontal">
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','Images/navMenu/Ohome.gif',1)""" class="Cont_Cell"><img src="Images/navMenu/home.gif" name="Image21" width="171" height="29" border="0"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','Images/navMenu/Ocompany.gif',1)"><img src="Images/navMenu/company.gif" name="Image22" width="126" height="29" border="0"></a>
      <ul>
        <li><a href="#"><img src="Images/navMenu/mission.gif" border="0"></a></li>
        <li><a href="#"><img src="Images/navMenu/president.gif" border="0"></a></li>
        <li><a href="#"><img src="Images/navMenu/sustain.gif" border="0"></a></li>
      </ul>
      </li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','Images/navMenu/Oportfolio.gif',1)"><img src="Images/navMenu/portfolio.gif" name="Image23" width="117" height="29" border="0"></a>
        <ul>
          <li><a href="#"><img src="Images/navMenu/chomes.gif" border="0"></a>            </li>
          <li><a href="#"><img src="Images/navMenu/renovate.gif" border="0"></a></li>
          <li><a href="#"><img src="Images/navMenu/exproj.gif" border="0"></a></li>
        </ul>
    </li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image24','','Images/navMenu/Opress.gif',1)"><img src="Images/navMenu/press.gif" name="Image24" width="95" height="29" border="0"></a>
      <ul><li><a href="#"><img src="Images/navMenu/cllentls.gif" border="0" width="95" height="30"></a></li>
      </ul>
      </li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','Images/navMenu/Oaffiliations.gif',1)"><img src="Images/navMenu/affiliations.gif" name="Image25" width="125" height="29" border="0"></a>
      <ul>
        <li><a href="#"><img src="Images/navMenu/archit.gif" border="0"></a></li>
        <li><a href="#"><img src="Images/navMenu/design.gif" border="0"></a></li>
        <li><a href="#"><img src="Images/navMenu/craftmen.gif" border="0"></a></li>
        <li><a href="#"><img src="Images/navMenu/other.gif" border="0"></a></li>
      </ul>
      </li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','Images/navMenu/Ocontact.gif',1)"><img src="Images/navMenu/contact.gif" name="Image26" width="136" height="29" border="0"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image27','','Images/navMenu/Ologin.gif',1)"><img src="Images/navMenu/login.gif" name="Image27" width="192" height="29" border="0"></a></li>
            </ul>
  </div>
<br clear="left">
<br clear="left">
<div id="Contact_Main_Content">
<form action="#" method="post" name="contUs">
<table width="400" border="0">
  <tr>
     <td class="Cont_TD" colspan="8">&nbsp;</td>
     </tr>
     <tr>
    <td class="Cont_TD">Name:</td>
    <td><input type="text" class="Cont_Cell"></td>
    <td class="Cont_TD" align="right">Email</td><td colspan="3" ><input type="text" class="Cont_Cell"></td>
    </tr>
    <tr>
    <td class="Cont_TD">Address: </td> 
    <td><input type="text" class="Cont_Cell"></td>
    </tr>
    <tr>
     <td>&nbsp;</td>
    <td ><input type="text" class="Cont_Cell"></td>
    </tr>
    <tr>
     <td>&nbsp;</td>
    <td><input type="text" class="Cont_Cell"></td>
    </tr>
    <tr>
     <td>&nbsp;</td>
    <td><input type="text" class="Cont_Cell"></td>
    </tr>
    <tr>
<td class="Cont_TD">City</td>
<td ><input type="text" class="Cont_Cell"></td>
<td class="Cont_TD" width="05%" align="right">State</td>
<td width="5%"><select name="state" size="1" class="Cont_Cell">
	<option value="AK">AK</option>
	<option value="AL">AL</option>
	<option value="AR">AR</option>
	<option value="AZ">AZ</option>
	<option value="CA">CA</option>
	<option value="CO">CO</option>
	<option value="CT">CT</option>
	<option value="DC">DC</option>
	<option value="DE">DE</option>
	<option value="FL">FL</option>
	<option value="GA">GA</option>
	<option value="HI">HI</option>
	<option value="IA">IA</option>
	<option value="ID">ID</option>
	<option value="IL">IL</option>
	<option value="IN">IN</option>
	<option value="KS">KS</option>
	<option value="KY">KY</option>
	<option value="LA">LA</option>
	<option value="MA">MA</option>
	<option value="MD">MD</option>
	<option value="ME">ME</option>
	<option value="MI">MI</option>
	<option value="MN">MN</option>
	<option value="MO">MO</option>
	<option value="MS">MS</option>
	<option value="MT">MT</option>
	<option value="NC">NC</option>
	<option value="ND">ND</option>
	<option value="NE">NE</option>
	<option value="NH">NH</option>
	<option value="NJ">NJ</option>
	<option value="NM">NM</option>
	<option value="NV">NV</option>
	<option value="NY">NY</option>
	<option value="OH">OH</option>
	<option value="OK">OK</option>
	<option value="OR">OR</option>
	<option value="PA">PA</option>
	<option value="RI">RI</option>
	<option value="SC">SC</option>
	<option value="SD">SD</option>
	<option value="TN">TN</option>
	<option value="TX">TX</option>
	<option value="UT">UT</option>
	<option value="VA">VA</option>
	<option value="VT">VT</option>
	<option value="WA">WA</option>
	<option value="WI">WI</option>
	<option value="WV">WV</option>
	<option value="WY">WY</option>
</select>
</td>
<td class="Cont_TD" align="right">Zipcode</td>
<td><input type="text" class="Cont_Cell" size="10"></td>
    </tr>
    <tr>
    <td colspan="2" class="Cont_TD">Phone</td> 
    <td colspan="2"><input type="text" class="Cont_Cell" size="50"></td>
    </tr>
    <tr>
    <td colspan="2" class="Cont_TD" colspan="2">How did you hear about us? </td> 
    <td colspan="2" colspan="2"><input type="text" class="Cont_Cell" size="45"></td>
    </tr>
    <tr>
    <td colspan="2" class="Cont_TD" colspan="2">How can we help you?</td> 
    <td colspan="4" colspan="2"><textarea class="Cont_Cell" rows="3" cols="60"></textarea></td>
  </tr>
    <tr>
     <td class="Cont_TD" colspan="8"><center><input type="submit" value="Submit Form">&nbsp;&nbsp; <input type="reset"></center></td>
     </tr>
</table>

</form>
</div>
<br clear="left">
<div id="cont_Logo">
<img src="Images/btvLogo.gif">
<span id="cont_Text">
<b>Contact Us</b><br>
Mailing Address: xxxxx<br>
Our offices are located at: xxxx<br>
Phone: xxx  Fax: xxx<br>
Email us at: bay10@bay10ventures.com<br>
</span>
</div>
<div id="footer">
Site Map | Terms of Use | Privacy Policy | © 2009 xxxx, Inc.. All rights reserved. | xxx xxxx
</div>

<!-- End Wrapper Div -->
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MainNavBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Here is the Spry generated CSS - You can see what I have changed around line 107 ish

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
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [URL unfurl="true"]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/URL] */
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;
	background-color: #FFFFFF;

}
/* 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: 8.2em;
	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: 8.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: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
/* BG COLOR --DASH*/
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #FFF;
//	padding: 0.5em 0.75em;
	color: #333;
	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
{
	background-color: #FFFFFF;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
/* DASH--OnMouse Over --DASH*/
/* this is the orig styles replaced --ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible --*/
ul.MenuBarHorizontal a.MenuBarItemHover,a.MenuBarSubmenuVisible
{
	background-color: #FFF;
	color: #FFF;
border:#336666 thin solid;
}

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

 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
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* 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-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* 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-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* 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-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.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;
	}
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Spry Menu border issues

Dashsa

Programmer

Similar threads

Part and Inventory Search

Sponsor