Forum PHP.pl

Witam, za zadanie mam napisanie skryptu który niezaleznie od rozdzielczości wyświetli obrazek na całym ekranie niezależnie od rozdzielczości, jednak jak zauważyłem podczas pierwszego wczytywania strony (jak nie ma plików w cache przeglądarki) linki które są dostosowywane w zależności od wysokości obrazka nie wyświetlają się w odpowiedniej pozycji od góry oraz z odpowiednimi marginesami, co po odświeżeniu strony daje pożądany efekt, zaś w przeglądarce chrome nie działa tak jak zakładałem, gdzie popełniłem błąd?

Podczas pierwszego ładowania skryptu na stronie: http://invadersmc.pl/

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("#page").height($(window).height() * 0.9);
    $("#links").width( $("#page").width() );
    var hPage = $("#page").height();  hPage *= -0.8;
    var wLinks = $("#page").height();  wLinks *= 0.07;  
    var wFonts = $("#page").height();  wFonts *= 0.03;  
 
    $("#links").css({ position: "relative", top: hPage });
    $("#links > a").css({marginLeft: wLinks, marginRight: wLinks})
    $("#links > a").css('fontSize', wFonts);
    $().prettyPhoto();
    $.prettyPhoto.open('/pliki/chapter/images/motoserce.jpg','<h1>MOTOSERCE</h1>','<p id="motoserce">Ogólnopolska Akcja Krwiodawstwa MOTOSERCE - <a target="_blank" href="http://www.motoserce.pl/start.php">oficjalna strona</a></p> ');
 
    });
</script>
[JAVASCRIPT] pobierz, plaintext 

kod html strony :

[HTML] pobierz, plaintext 
  <div id="container">
    <img id="page" src="/pliki/chapter/images/page.jpg" />
    <p id="links">
      <a href="poland">Poland</a>
      <a href="zabrze">Zabrze</a>
      <a href="tarnowskie-gory">Tarnowskie Góry</a>
      <a href="ruda-slaska">Ruda Śląska</a>     
    </p>
  </div>
[HTML] pobierz, plaintext