[apple]

How do i set background images for li tags in css ? This is what i have so far but background images aren't appearing full size.
This is how it appears:

Code :

	<div id="navigation">
        	<ul>
            	<li><a href="#">home</a></li>
                <li><a href="#">terms of service</a></li>
                <li><a href="#">contact</a></li>
        	</ul>
        </div>

ul {
	list-style-type:none;
	padding:0;
	margin:0;
	}
	
li {
	list-style-type:none;
	padding:0;
	margin:0;
	}
#navigation {
	height:41px;
	width:728px;
	}
#navigation ul { 
	list-style: none;
	margin-left:500px;
	} 
#navigation li { 
	display:inline;
	background:url(images/button.png) no-repeat;
	margin-right:10px;
	}
#navigation a {
	padding-top:10px;
	}

[Shiro]

They may not be visible because you don't have enough padding for them to be seen. Try adding some padding/margins to the right and left edges of those to see if the images appear, and if they do, work backwards from there to clean up your code.

[apple]

where exaclty should i be using padding ?

[pgo]

What's button.png look like?

[apple]

like that ^

[apple]

anyone ?

[chaos.dave]

try declaring a height and width for the li tags in your CSS.

Example:

list-style-type:none;
	padding:0;
	margin:0;
        height:30px;
        width:60px;

obviously change the values to match the needs of your background images.

[bazzle]

As far as I know, you can't set a background image for an inline element.

You need to add display:block; to #navigation li and set a width and height.

Then you have to add float left to position them side by side.

[bazzle]

Plus you must have linked your background image incorrectly as it should show up straight away.

[safe as milk]

i'm fairly new to this but could you not make the your anchor's display as block elements, give them a height and width then put the image in as a background?