PDA

View Full Version : gradient horizontal spry


rico1931
03-17-2009, 02:57 PM
Hello all,

I put a gradient image in my horizontal spry menu and it worked ok but the gradient did not apply to all the spry menu. For example it applied to the first spry menu Home button but then skipped the next button and applied to the 3rd contact us button.

Also in me 2nd button which is products it skipped the first and second level but the gradient applied to the 3rd level. This is odd and was wondering if there was anyway I can have it apply to ALL LEVELS of the spry menu

Here is the CSS where I put the gradient image


/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-family:sans-serif;
font-size:10px;
font-weight:bold;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-left-color:#EEEEEE;
border-right-color: #757575;
border-bottom-color:#FFFFFF;
background-image: url(../SiteImages/greygrad.jpg);
}



Can someone please tell me where I went wrong

rico1931
03-17-2009, 03:03 PM
Ok so I just figured it out. it skippes all of my menu button items that have the SpryMenuBarDown.gif and SpryMenuBarRight.gif background images. Does anyone know of a way on how I can still have it be gradient but be able to keep the arrow images in the same spot?

rico1931
03-19-2009, 02:08 AM
So I guess i found the answer. You need to make a .gif for each arrow and background. ugh I wish i wasn't so horrible with fireworks