simple but cant fix

[deansaddigh]

basically my page has a sign in and when you click it and hover over forgot password some tool tips come up.

its all programmed in and even takes the red i set in the css but for somereason its not showing the arrow.

 

http://www.languageschoolsuk.com/index.php

 

.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; }
  .tipsy-inner { padding: 4px 5px; background-color: red; color: white; max-width: 200px; text-align: center; }
  .tipsy-north { background-image:url("images/tipsy-north.gif"); background-position: top center; } 
  
  .tipsy-south { background-image: url("images/tipsy-south.gif"); background-position: bottom center; }
  .tipsy-east { background-image: url("images/tipsy-east.gif"); background-position: right center; }
  .tipsy-west { background-image:url("images/tipsy-west.gif"); background-position: left center; }

 

Those arrows don't show up even though i believe the location is correct.

 

if you go here you can see the arrow thats meant to show up

http://aext.net/example/twitterlogin/#

 

Heres the call to the script

 

<script src="js/jquery.tipsy.js" type="text/javascript"></script>  
  
  <script type='text/javascript'>
    $(function() {
  $('#forgot_username_link').tipsy({gravity: 'n'});   
    });
  </script>    

 

and heres where it gets executred

 

 <p class="forgot-username"> <A id=forgot_username_link 
title="If you remember your password, try logging in with your email" 
href="#">Forgot your username?</A> </p>

 

any help would be amazing

 

Thanks

 

 

[haku]

Something wrong with your image:

 

http://www.languageschoolsuk.com/images/tipsy-west.gif

[deansaddigh]

Thanks so much Haku, i didnt even think to look at the image like that, because i downloaded them as part of a script. Fixed it now though thanks to you, just chucked them in photo shop converted them to pngs

 

Thanks again man, it was puzzling the hell out of me