Custom Navbar Alignment Issue

So i'm trying to customize my navbar and Im using the following css code.

But I can't seem to align the menu in the background. (inside red brackets to the blue line) Also, how can I change the size of each tab to size of the new background image?.

Thanks in advance!

Hello,

We probably could help you better if you shows your website, what is the link?

zh

Sorry here it is.

http://order.panticakes.com/

I was playing with the coding so If someone can please help, thanks!

try this

#menu {
background: url("../images/store_navbar.png") no-repeat transparent;
height: 90px;
width: 980px;
z-index: 1;
}
#menu ul {
left: 65px;
list-style: none outside none;
margin: 0px;
padding: 0px;
position: relative;
top: 15px;
}

Additionally,

(1) If (e.g., in current Firefox) you hit Control- three times so as to unzoom enough to see the entirety, it's all right-shifted as it stands (probably still without his suggestion having been tried).

(2) The "relative" and "absolute" positioning commands, and the layering commands, differ among browsers, notably as to (surprise) IE and as to its versions and various proprietary spinoffs which have their own quirks (e.g., AOL). Which browser are you already routinely using? You'll probably want to look at your changes in at least two browsers.

(3) Accordingly, add to his suggestions resizing, repositioning, etc., the "container" or any other governing "class" items, in concert. It may take a while to make it settle down as you want it to appear, but it's doable.

(4) Make backups beforehand of whatever files you amend.

Worked great on IE FF and GC!

Thanks

Please mark it Solved . . .