i need to add a frame about 1 inch down to the site im working on below so dont mind that
But have a look at the top?

http://rotate-ireland.com/mess/index.htm

See how you hover over links they jump a bit?
How do i get them not to jump left or right a few pixels?
Is it the border in different states?
Also how can i set them apart a little but more
and also how could i bring text down a few pixels to look centre between the top of page and that white line below it?

Is there a way

My css

ul.nav {
width:100%;
text-align:left;
list-style:none;
}

ul.nav li {
display:inline;
text-decoration: none;
}

ul.nav li a {display: inline-block; padding: 8Px 15px; text-decoration: none;} /*sets default styling for all links*/
ul.nav li a:link {color: #b2cccc; }
ul.nav li a:visited {color: #CCCCCC; }
ul.nav li a:hover {color: #ffffff; background: #7b0505;border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
ul.nav li a:active {color: #666666; background: #333333;}
ul.nav li a:focus {color: #ffffff; background: #7b0505;}

The reason they're jumping is because of the borders you've added to the hover state. That's adding 2 pixels to each one. You can try adding a border on the sides of the non-hover state, make it the same color as the background and it won't be seen, and the jumping should stop.

the backgorund is a light grey to dark grey gradient though, so using border with 1 solid image would show up?

Will i have to use gradient image maybe?

border: 1px solid transparent;

That worked, now how do i bring the text down a pixel or two from the top?

Put some top padding on the <a>