Spry Menu Background Images?? Help?

#1

I am trying to create a template with a horizontal spry menu bar, and I don't
enjoy the standard box shape, so I figured I would use a background image to
display a gradient rounded rectangle in the CSS for the outermost container
(ul.MenuBarHorizontal) and then a regular gradient rectangle (either with or
without an aarow depending on the existence of sub-menus or not) in the CSS li
(ul.MenuBarHorizontal li) but to my chagrin I can't get the rounded rectangle
to show up. Anyone have any suggestions?

#2

put the link to the image in this part of the css file for the menu i have made
menus with gradient images, and they work good

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-image:url(../pictures/buttons.jpg);
background-repeat:repeat-x;
padding: 0.4em 0.7em;
color: #eee9e9;
text-decoration: none;
}

Also in this section of the css

/* 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(../pictures/buttons.jpg);
background-repeat:repeat-x;
background-position: 95% 50%;
}

#3

put the link to the image in this part of the css file for the menu i have made
menus with gradient images, and they work good

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-image:url(../pictures/buttons.jpg);
background-repeat:repeat-x;
padding: 0.4em 0.7em;
color: #eee9e9;
text-decoration: none;
}

Also in this section of the css

/* 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(../pictures/buttons.jpg);
background-repeat:repeat-x;
background-position: 95% 50%;
}

#4

Thanks for the input Mike, I was able to do that, but it still is just blocks,
not rounded (Except that on the sub-menus the image doesn't scale to fit the
button, as some of the sub-menu items have text on two lines and some are
shorter than their parent and so those areas get all jacked up with the image
repeating but I don't quite understand how). What I am trying to do is to have
the entire main menu look like one rounded rectangle, so with placing the image
in those portions of the CSS I can either have each individual block be it's
own rounded rectangle (which I don't want) or have it stay as a regular
rectangle (which I also don't want). But that still leaves me with the issues
with the sub-menus and the image only extending as far as the actual text on
the sub-menu. It's a hott mess.

#5

Thanks for the input Mike, I was able to do that, but it still is just blocks,
not rounded (Except that on the sub-menus the image doesn't scale to fit the
button, as some of the sub-menu items have text on two lines and some are
shorter than their parent and so those areas get all jacked up with the image
repeating but I don't quite understand how). What I am trying to do is to have
the entire main menu look like one rounded rectangle, so with placing the image
in those portions of the CSS I can either have each individual block be it's
own rounded rectangle (which I don't want) or have it stay as a regular
rectangle (which I also don't want). But that still leaves me with the issues
with the sub-menus and the image only extending as far as the actual text on
the sub-menu. It's a hott mess.

#6

So I've got the sub-menus to not have the crazy repeating images (I had
apparently left the image in another place in the CSS too) but the image still
only goes as far as the text in the sub-menu and then it is just gray. I would
like the image to extend as far as the box that the sub-menus are in. Also I
still have the issues with some of the sub-menu items being on multiple lines
and the image simply being centered vertically. (Is there a way to get the
image to scale) I also couldn't get the image to repeat for the sub-menus.

#7

So I've got the sub-menus to not have the crazy repeating images (I had
apparently left the image in another place in the CSS too) but the image still
only goes as far as the text in the sub-menu and then it is just gray. I would
like the image to extend as far as the box that the sub-menus are in. Also I
still have the issues with some of the sub-menu items being on multiple lines
and the image simply being centered vertically. (Is there a way to get the
image to scale) I also couldn't get the image to repeat for the sub-menus.

#8

So how I ended up fixing this problem was I created new classes for the different menus and was able to assign different background images to the new classes.

#9

So how I ended up fixing this problem was I created new classes for the different menus and was able to assign different background images to the new classes.