Navigation button background image prob

[baseiber]

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

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

    <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>

[jogol]

add display:block; to ul.nav li a

[baseiber]

Thanks for the reply. While that fixes the width and height issue it makes the buttons display vertically. I had to float the li elements to get them to display horizontally again. Unfortunately, now they display in reverse order.

This simple update is becoming more and more complicated.

[jogol]

set ul.nav li to float:left and the order should be ok.