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