Wont show Sprite image?

[xyz101]

Why wont this show my sprite image as the background of the yellow bordered box?There is an example here:If anyone could come with some examples on what i should change, that would be great..Just let me post allready, need more text comapred to the code in this post -.-Here is my code:Html:\[code\]<div class="repeat"> <div style='width:100%;'> <div style='float:left;margin-top:107px;margin-left:50px;width:80px;height:100px;border:1px solid yellow;'> <div class="menu"> <ul id='nav'> <li class='front'><a href='http://stackoverflow.com/questions/12805016/?p=front'>Front</a></li> </ul> </div> </div> <div style='float:left;margin-top:107px;margin-left:10px;width:80px;height:100px;border:1px solid yellow;'></div> <div style='clear:both;'></div> </div></div>\[/code\]Css:\[code\].repeat { float:left; width: 884px; height: auto; min-height:700px; background: url(images/repeat.png) repeat-y; z-index:2;}.menu { width:80px; height:100px; position:relative; } ul#nav { list-style: none inside; } ul#nav li { display: inline; } ul#nav li a { display: block; height: 40px; float: left; } ul#nav li.front a{ width:80px; background: url(images/menu/p1.png) top center no-repeat; } ul#nav li a:hover { background-position: bottom center; } ul#nav li.front2 a{ width:80px; background: url(images/menu/p1.png) bottom center no-repeat; }\[/code\]