list with background images as buttons

[watts]

I'm trying to create a group of navigation buttons using <ul> and background images.  The problem is that no matter what I set the height and width of the <li> or <ul> or <a> the image only shows directly behind the words and I don't get the full button. 

html:
[code]
  <div id="siteNav">
    <ul id="siteNavList">
      <li id="stock"><a href="http://www.skyartstock.com" title="stock photos">stock photos</a></li>
      <li id="prints"><a href="http://www.skyartprints.com" title="fine art prints">fine art prints</a></li>
      <li id="aj"><a href="http://www.arjenandjerrineverkaik.com" title="a & j verkaik">a & j verkaik</a></li>
    </ul>
  </div>
[/code]

css:
[code]
#siteNav {
margin: 100px 0px 0px 800px;
width: 97px;
}

#siteNavList {
        white-space:nowrap;
list-style-type:none;
width: 97px;
}

#siteNav ul li {
font-size: 10pt;
}

#siteNav ul li a {
width: 97px;
height: 27px;
color: #FFF;
text-decoration: none;
}

#siteNav ul li a:visited {
color: #C36AC9;
text-decoration: none;
width: 97px;
height: 27px;
}

#stock a {
background-image: url(../images/SS-002311.jpg);
background-repeat: no-repeat;
width: 97px;
height: 27px;
}

#prints a{
background-image: url(../images/SP-915525.jpg);
background-repeat: no-repeat;
width: 97px;
height: 27px;
}

#aj a {
background-image: url(../images/AJ-002335.jpg);
background-repeat: no-repeat;
width: 97px;
height: 27px;
}
[/code]

If anyone has any ideas I'd love to hear them.

Thanks!

[michaellunsford]

I tried recreating your document on my end to test with, but your website requires a login to view the images in question.

Just a guess -- maybe lists don't support height and width? Tested with a <div> or <span>?

[watts]

I figured it out, I should have had the width and height in the style for the <li> not the <a>.

Thanks,
Kristin

[ToonMariner]

you were right in the first instance - put width and height on the a tag BUT remember to either float: left or display: block on the anchor otherwise it won't work.