What's wrong with my menu background image?

Question

The web site is here.

See that blue bar behind the menu items? It's 40 pixels high and one pixel wide, and used as a repeating background - so, why does it look strange after the right-most menu item?

The image is here, if anyone needs it.

The image is used thusly:

.menu_bar
{
 background-image: url("http://leonixsolutions.com/images/menu_background.jpg");
 background-repeat: repeat-x;
 font-size: large;
 padding-left: 160px;
 padding-top: 5px;
 text-align: center;
}

Answer 1

.pd_menu_01 has a background color of white declared, and is a div. Since divs are block level elements, they have a default width of 100%.

Either declare the div to be display:inline, wrap the menu in a span instead of a div, or make the background color transparent instead of white.

Answer 2

The real problem here is that .pd_menu_01 extends too far to the right (and with its white background, covers the gradient). Try making it inline-block with an auto width, or something similar, so that it doesn't extend further to the right than it has to. You could also set its background color to transparent (but in my browser, .pd_menu_01 makes the page too wide and thus introduces unnecessary and ugly horizontal scrollbars, so the width solution is still relevant).

Answer 3

Nothing is wrong with it,

Your menu container div.pd_menu_01 has a background color #ffffff remove it and you'll be fine...