bulletproof navigation

[littleWingUKC]

I am working through a book called bulletproof web design and one of the projects was a redesign of a navigation using css and small tiled images. I got everything working nicely and expanded it a little to see it working in practice but there is one problem. I cant seem to move the tabs over to the right without extending the navigation bars width.

http://jaytesting.netai.net/index.html

When I increase the padding-left it moves the tabs as I want but also increases the width of the bar, which I dont want.

#navigation{
float:left;
width:100%;
/*no margin, so there is no space between nav bar and page sides*/
margin:0;
/*set the distance of the tabs from the top and left sides of the page*/
padding-top:10px;
padding-left:0px;
/*remove bullet points from list items*/
list-style:none;
/*apply yellow background color AND display border image to repeat horizontally across the bottom of navigation bar*/
background: #FFCB2D url(border.gif) repeat-x bottom;
}

Any ideas how it can be done? Its probably really simple but Im still learning.
Thanks

[rnd me]

shrink by whatever you pad :


padding-left:25%;
width:75%;


looks good for me in FF3...

or you can wrap a div around the ul, move most of the css rules to that, and give it a padding-left, or a margin-left to the ul...

[littleWingUKC]

that works perfectly, thanks for helping out!