Hello all,

I have a simple horizontal Spry menu I'm working on. The menu is single level
- no submenus. The problem is that I cannot get the text to center
vertically..it's always at the top of each cell. I have tried both the 1.4 and
1.6 .js files.

I'm at a loss and any help would be sincerely appreciated.

Thanks!

Here is the code:

---------------------------- HTML ------------------------

<table width="950" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30" valign="middle"
background="../SpryAssets/menubarbg.jpg"><ul id="MenuBar1"
class="MenuBarHorizontal">
[LI]<a href="home.php">Home</a> </li>
[LI]<a href="facilities.php">Facilities</a></li>
[LI]<a href="events.php">Event Schedule</a></li>
[LI]<a href="contacts.php">Contacts</a> </li>
[/BULLET]
</td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

------------------------------------ CSS
------------------------------------------

cht "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */



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

Spry CSS compatible with IE6, IE7, Firefox 2.0.0.6, Opera 9.21, Safari 1 beta
after modified.


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


UL.MenuBarHorizontal {
WIDTH: auto;
CURSOR: default;
LIST-STYLE-TYPE: none;
font-family: Arial, Helvetica, sans-serif;
FONT-SIZE: 11px;
font-weight: bold;
text-decoration: none;
padding: 0px;
MARGIN: 0px;
height: 30px;
}
UL.MenuBarActive {
Z-INDEX: 1000;
}
UL.MenuBarHorizontal LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN: 0px;
WIDTH: auto;
CURSOR: pointer;
LIST-STYLE-TYPE: none;
POSITION: relative;
TEXT-ALIGN: auto;
font-family: Arial, Helvetica, sans-serif;
FONT-SIZE: 11px;
font-weight: bold;
}
UL.MenuBarHorizontal UL {
Z-INDEX: 1020;
LEFT: -1000em;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
MARGIN: 0px;
WIDTH: 180px;
CURSOR: default;
LIST-STYLE-TYPE: none;
POSITION: absolute;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
FONT-SIZE: 11px;
font-weight: bold;
}
UL.MenuBarHorizontal UL.MenuBarSubmenuVisible {
LEFT: auto;
}
UL.MenuBarHorizontal UL LI {
WIDTH: 180px;
}
UL.MenuBarHorizontal UL UL {
MARGIN: 0px 0px 0px 0px;
POSITION: absolute;
}
UL.MenuBarHorizontal UL.MenuBarSubmenuVisible UL.MenuBarSubmenuVisible {
LEFT: auto;
TOP: 0px;
}
UL.MenuBarHorizontal UL {

}

/* Menu link text containers */

UL.MenuBarHorizontal A:link, UL.MenuBarHorizontal A:Visited,
UL.MenuBarHorizontal A:Active {
WIDTH: auto;
DISPLAY: block;
CURSOR: pointer;
COLOR: #FFFFFF;
TEXT-DECORATION: none;
background-repeat: repeat-x;
background-image: url(menubarbg.jpg);
height: 30px;
TEXT-ALIGN: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
border-right-width: 2px;
border-right-color: #FFC3C6;
border-right-style: groove;

}
UL.MenuBarHorizontal A:hover {
COLOR: #fff;
background-repeat: repeat-x;
background-image: url(menubarbghover.jpg);
}
UL.MenuBarHorizontal A:focus {
COLOR: #fff;
background-image: url(menubarbg.jpg);
}
UL.MenuBarHorizontal A.MenuBarItemHover {
COLOR: #fff;
}
UL.MenuBarHorizontal A.MenuBarSubmenuVisible {
COLOR: #fff;
WIDTH: auto;
}
UL.MenuBarHorizontal A.MenuBarItemSubmenu {
WIDTH: auto;
background-image: url(menubp.jpg);
PADDING-TOP: 0.7em;
PADDING-BOTTOM: 0.7em;
PADDING-LEFT: 1em;
PADDING-RIGHT: 1em;
background-position: right top;
background-repeat: no-repeat;
}
UL.MenuBarHorizontal A.MenuBarItemSubmenuHover {
COLOR: #fff;
WIDTH: auto;
margin: 0px;
background-image: url(menubarbg.jpg);
background-repeat: repeat-x;
background-position: left top;
background-color: #666666;
}
/* this is for sub-sub menu */
UL.MenuBarHorizontal UL A.MenuBarItemSubmenu {
WIDTH: auto;
}
UL.MenuBarHorizontal A.MenuBarItemSubmenuHover {
WIDTH: auto;
}
UL.MenuBarHorizontal UL A.MenuBarItemSubmenuHover {
WIDTH: auto;
}
UL.MenuBarHorizontal IFRAME {
Z-INDEX: 1010;
POSITION: absolute;
}


media Screen, Projection
{
UL.MenuBarHorizontal LI.MenuBarItemIE {
DISPLAY: inline;
FLOAT: left;
}

}
ul.MenuBarHorizontal a.MenuBarItemSubmenu-sports {
background-image: url(../images/bg-subNav-motorsports.gif);
background-repeat: no-repeat;
PADDING-TOP: 0.6em;
PADDING-BOTTOM: 0.7em;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
background-position: left top;
text-transform: uppercase;
width: 110px;
text-align: center;
font-size: 12px;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu4 {
PADDING-TOP: 0.6em;
PADDING-BOTTOM: 0.7em;
PADDING-LEFT: 1em;
PADDING-RIGHT: 1em;
background-color: #c5171e;
font-size: 12px;
font-weight: normal;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu4:hover {
background-color: #630c0f;
}
ul.MenuBarHorizontal #current {
background-color: #630c0f;
}