[SOLVED] why isn't this working?

[eMonk]

the following code isn't loading "images/blueslate_backgroundOVER.gif" on mouse hover (just the top half of it). i got this tutorial from www.13styles.com/css-menus/slate/ and it works fine on this site but i can't seem to get it working myself on a fresh html page. any ideas?

 

<style type="text/css">
<!--
/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;}
-->
</style>
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div></div>

[eMonk]

nevermind, figured it out.

 

code:

padding:14px 22px 0 22px;height:28px;

 

should be:

padding:14px 22px 0 22px;height:42px;

 

typos in tutorials...