Styling a wordpress list.

Ok so this is what I have for a sidebar in my wordpress index.php file, but the images that I created for li links are not showing up.

<div id="navigator">
			<ul id="nav">
				<li><a class="home" href="##"><img src="
<?php include (ABSPATH . '/wpthemes/wp-content/themes/HTML/images/home.gif'); ?>" width="28" height="13" alt="home" /></a></li>
				<li><a class="sports" href="##"><img src="images/sports.gif" width="36" height="11" alt="sports" /></a></li>
				<li><a class="about" href="##"><img src="images/about.gif" width="31" height="11" alt="about" /></a></li>
				<li><a class="links" href="##"><img src="images/links.gif" width="27" height="12" alt="links" /></li>
				<li><a class="wedding" href="##"><img src="images/wedding.gif" width="49" height="11" alt="weddings" /></a></li>
				<li><a class="contact" href="##"><img src="images/contact.gif" width="59" height="12" alt="contact us" /></a></li>
			</ul>
		</div>

HTML:

As you can see I even tryed making the call on php on the home link and the image is still not showing up.

 

try linking with wordpress code

<img src="<?php bloginfo('template_url'); ?>/images/home.gif" />

Code (markup):

this is the url of the template

 

When you load your page from the server check the source code and then put the link to the image in your navigation bar and check that it's pointing to the picture correctly.

 

I got it working, just direct linked it.

 

Notice the image path should be relative with the style sheet(css file) path . ( In many occassions, they are such problems. )
Compare the php template source and the html source (from browsers), you will find the problem .