I'm trying to get my nav bar to display my links horizontally. Well actually I got that, and I got my background image to show for them as well. What I am having problems with is when I do the mousover it only wants to display the hover background image to the size of the text link and not the entire size of it.

I am using inline to make the links one after another and cannot find a good work around for it other than to do display:block but then they are vertical links and not horizontal and the inline-block style isn't supported by any major browser so... any ideas?

Currently I tried to pad my links out so that the image would show and it worked kinda...but when I move my mouse over the link it adds the padding for my li and the additional padding for my hover and so it moves my links over like 40px to the right on hover and it just doesn't work. I can't really figure this one out aside from actually putting the image into the html page and using javascript to change it.

ul#links
{
    width:900px;
    height:40px;
    background-image:url(../images/link.png);
    background-repeat:repeat-x;
    margin:0;
    padding:0;
}

#links li
{
    display:inline;
    padding:0 40px 20px 40px;
    background-color:#000000;
}

#links li a:hover
{
    background-image:url(../images/hover.png);
    background-repeat:repeat-x;
    padding:0 40px 20px 40px;
}

Hi,

Do you have a test url ?

Yeah, sorry I thought i included it.

http://levijackson.net/sites/Missing%20Piece/

Add this:
#links li a{display: block;}
That will make the link take up the full width of the list.

You have bigger problems, that menu is all over the place in Firefox, but solve one problem at a time

I had tried that earlier and I just tried it again, all that does is make it display block and take it out of inline styling. It should work because i saw that as how it was done on some examples but it doesn't work here for some reason.

The display: inline for the horizontal menu should be on #links li, display:block goes on the <a>inside the <li>.

You also need to put the background on the <a> and set the margin and padding the same as you have it for the a:hover, that should stop the jumping around.