Hi all,

I'm having problems getting a background image to display properly for navigation links. The width and height of the links seem to default to the size of the text instead of to the width and height I set. Can you tell me what I'm doing wrong.

Here's the CSS
Code:
ul.nav 
{
	position:absolute;
	margin:7px 0px 0px 0px;
	padding:0px 10px 0px 0px;
	width:780px;
	height:29px;
	z-index:10;
	list-style-type:none;
	text-align:right;
}

ul.nav li
{
	display:inline;
	padding-left:5px;
	height:29px;
	width:130px;
}

ul.nav li a
{
	width:125px;
	height:29px;
	text-decoration:none;
	background-image:url('../images/navBGArrow.jpg');
	background-position:center right;
	background-repeat:no-repeat;
}
Here's the markup
HTML Code:
    <nav>
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="About_Bridgette_Seiberlich.html">About Bridgette</a></li>
            <li><a href="portfolio.html">Portfolio Examples</a></li>
        </ul>
    </nav>