Hi Michelle and Eric,
It's as much a problem with the maths as it is with the CSS, (this exact menu problem has cropped up here before).The size you are seeing is the max you can get with 9 menu items and with the image files that are provided:
navbar div = 920px wide
left.jpg and right.jpg : (28px + 28px) x 9 = 504px
That leaves 416/9 = 46px (maximum) per item background hightlighted effect, with 2px to spare (which accounts for the space at the far right of the navbar div).
The left & right.jpgs should ideally have been provided as the narrowest possible width (6px) for optimum flexibility to account for menus that might have more items in them. The 28px is unnecessary and somewhat limiting.
You can sort it, but you need to crop the two mentioned jpgs to 6px wide - being careful to crop to the correct side. (Two attached if you need them).
1. Crop the left.jpg and right.jpg images in your > cssmw_images folder to 6px wide (or replace them with the two attached)
2. To correct the 2px gap, adjust the #navbar rules in the cssmw/menu.css:
#navbar {
height: 38px;
background-color: #036; /* remove this */
background-image: url(CSSMenuWriter/cssmw_images/bg.jpg); /* add this */
background-repeat: repeat-x; /* add this */
padding-left: 1px; /* add this */
}
This gives:
#navbar {
height: 38px;
background-image: url(CSSMenuWriter/cssmw_images/bg.jpg);
background-repeat: repeat-x;
padding-left: 1px;
}
Example of outcome here.
