<div>
read this 
<a href="http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA93A0159.html" rel="ugc nofollow">http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA93A0159.html</a>
</div>

<div>
Yes, I have seen this page. The Adobe content doesn't make any mention of borders. 
 
The most that I can see about borders is from the user comments on that page. Somebody asks about borders, and another says, &quot;You are free to style any aspect of the menubar you wish. If you want to place borders on the menu items, try adding CSS border properties to either the 
<li> or <a href="http://" rel="ugc nofollow"> elements.&quot; 
 
I have tried editing the </a></li>
<li><a href="http://" rel="ugc nofollow"> and </a><a href="http://" rel="ugc nofollow"> elements. I went to ul. MenuBarHorizontal a and ul. MenuBarHorizontal li, and selected &quot;Add Property&quot; then &quot;border&quot; and I entered &quot;1&quot;. Then I added &quot;border-color&quot; and specified a color. No border appears. 
 
So I'm trying to figure out what I have to select to add a border. 
 
Thanks.</a></li>
</div>

<div>
BTW, if you use &quot;border&quot; you need to specify style, color, size in the same line. 
 
border: solid black thin
</div>

<div>
Thanks Jason. That made the border appear. One thing -- the last button on the horizontal menu has been pushed over to the next line. 
 
I realize that putting in the 1-line border adds pixels, but the table width was set at 100%, not a specific amount of pixels. Is this an easy fix? 
 
Thx 
 
(In case it matters, I'm attaching the code.) 

<pre><code class="code-100 nolinks" id="code-125320">@charset &quot;UTF-8&quot;;
 
/* 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: 12px;
	cursor: default;
	width: 100%;
}
/* 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: center;
	cursor: pointer;
	width: 20%;
	float: left;
	border: solid grey thin;
}
/* 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 #666;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #333333;
	padding: 0.5em 0.75em;
	color: #FFFFFF;
	text-decoration: none;
	border: 1;
	border-color: #666666;
}
/* 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: #33C;
	color: #FFF;
}
/* 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: #33C;
	color: #FFF;
}
 
/*******************************************************************************
 
 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 &quot;hover&quot; 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 &quot;hover&quot; 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;
	}
}
</code></pre>
</div>

<div>
There's a typo at the very end of the CSS: 
 
&nbsp; ul.MenuBarHorizontal li.MenuBarItemIE 
&nbsp; &nbsp; &nbsp; &nbsp; { 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f\loat: left; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #FFF; 
&nbsp; &nbsp; &nbsp; &nbsp; } 
 
Since I cannot see the page in action, I wonder if that typo above is causing problems for you. 
 
If not, send me a link so I can view in a browser myself.
</div>

<div>
I can't show the page in action, since it is local, and still being constructed. 
 
Are you certain that is a typo? That is entirely generated by Dreamweaver, and not edited by me. In fact, that section is listed under &quot;Browser Hacks&quot; and is not to be edited by inexperienced slobs like me. 
 
Would it help to include the HTML?
</div>

<div>
&gt;&gt; and is not to be edited by inexperienced slobs like me 
 
The Spry stuff is still pretty buggy, so I'm not at all sure that slash should be there. &nbsp;Test it...it's not like we are going to hurt anything. 
 
&gt;&gt;&nbsp;Would it help to include the HTML? 
 
Your HTML, menu js and menu CSS, yes.
</div>

<div>
That's fine. &nbsp;All I needed was the MenuBar ul anyway and the css and js files to make sure I replicate you as closely as possible.
</div>

<div>
<div class="content wysiwyg-content">
I have created a Spry Menu, but I want to separate each button with a border. Can this be done? If so, how? Which entry under &quot;SpryMenuBarHorizontal.css&quot; do I slect to make this happen? 
 
Thanks!
</div>
</div>

I have created a Spry Menu, but I want to separate each button with a border. Can this be done? If so, how? Which entry under "SpryMenuBarHorizontal.css" do I slect to make this happen?

Thanks!

Can I Add Borders to a Spry Menu?

Adobe Dreamweaver is a web development tool featuring both WYSIWYG and code editors that allow the user to quickly and easily build websites in a wide variety of languages, including ASP, ASP.NET, ColdFusion and PHP. It also offers support for CSS and JavaScript.

Adobe Dreamweaver

Web applications are systems that run in browsers that perform functions normally associated with other client-based programs. One of the most commonly used web applications is email; instead of downloading individual emails to a local machine, the data is shown through a website. Other examples of web applications are collaborative systems like a wiki or an online game.