Trouble With Image Nav Bar Showing Up, CSS Code Problem?

I am having trouble getting my image of a nav tool bar to show up on a page I am working on. I am working on it offline and can't seem t get it correctly to show, can anyone help? Here's the CSS code.

-
#nav {width: 960px; height: 36px; margin-bottom: 15px; z-index: 10; background: url(/images/nav.png) no-repeat;}
.nav {float: left; z-index: 10;}
.nav li {float: left; position: relative; z-index: 10;}
.nav li, .nav li a {height: 36px;}
.nav li a {background: url(/images/nav.png) no-repeat; display: block; overflow: hidden; text-indent: -99999px;}
.nav li.home, .nav li.home a {width: 79px; background-position: 0 top;}
.nav li.home:hover a {background-position: 0 -36px;}
.nav li.photos, .nav li.photos a {width: 95px; background-position: -79px top;}
.nav li.photos:hover a {background-position: -79px -36px;}
.nav li.stories, .nav li.stories a {width: 96px; background-position: -174px top;}
.nav li.stories:hover a {background-position: -174px -36px;}
.nav li.video, .nav li.video a {width: 81px; background-position: -270px top;}
.nav li.video:hover a {background-position: -270px -36px;}
.nav li.submit, .nav li.submit a {width: 90px; background-position: -351px top;}
.nav li.submit:hover a {background-position: -351px -36px;}
.nav li.store, .nav li.store a {width: 83px; background-position: -441px top;}
.nav li.store:hover a {background-position: -441px -36px;}
.nav li.about, .nav li.about a {width: 110px; background-position: -524px top;}
.nav li.about:hover a {background-position: -524px -36px;}
.nav li:hover .dropdown {display: block;}
.dropdown {z-index: 10; position: absolute; left: 0; top: 36px; display: none;}
.search {float: right; padding: 9px 0 0 0; margin-right: 9px;}
#s {width: 216px; height: 19px; padding: 7px 7px 0 7px; font-size: 11px; color: #aeaeae; background: url(/images/search_bkg.jpg) no-repeat; border: none; outline: none; float: left;}
.submit {width: 41px; height: 26px; background: url(/images/search_button.jpg) no-repeat; border: none; outline: none; float: left; overflow: hidden; text-indent: -99999px; cursor: pointer;}

 

Are you using an in-line style sheet? or are you referencing an external sheet? What do you mean by not showing properly? is it not showing at all?

 

I am not sure what you mean by in line style sheet or external sheet? Sorry, I mean it shows up like this:

http://img191.imageshack.us/i/headerdz.jpg/

I think it is part of another problem I have where the site is pushing a few things down and out. Like on the index page, everything looks "correct" but if I click on a post, I notice, the footer on that page appears to be off the wrapper. So I think it has something to do with the header page but not sure. i think it just might be a css issue.

 

I think its a html of some sort

 

Well, HTML and CSS goes Hand in Hand..! May be a problem of both... or either anyone..! but really it wont matter much...! It can be easily fixed... But CSS works are not that easy Little messy Though..!

 

So far I figured out by isolating the CSS that it is more of a HTML problem, so it could be a problem with my theme? I am using daydreams 2, and been having problems as of late. But I still can't figure out why the bottem part of the image is being pushed down?