CSS help needed

[RFH Reseller: schofieldandwhite]

Unfortunately, the time has come where I must once again seek assistance from the masters of their trade

I write quite a lot of fanfiction, so I decided to write a script that would read a fanfiction from a text file, and display it like a book. The script works fine although there were some initial problems with sessions ( zonealarm pro), but the CSS is just not behaving properly; it is completely ignoring the positioning directives I have specified for the next page links.

Unfortunately, only people who fit certain criteria will be able look at my problem; the criteria is your screen aspect ratio (width / height) must be at least 1.6 (ie a widescreen monitor), you must have JS enabled (So I can detect your screen resolution), and your browser window must be maximised. Oh, and it currently does not work with IE thanks to MS's constant refusal to comply with W3C standards.

Once page three, being the third page, be reached; you will see 2 boxes full of boring text (my real fanfictions are better than that, honest :p). Looking to the left of the left box, about a 3rd of the way down the box, you will see the next page link peeking out at you from behind the left box. There, good sirs, lieth the problem. That link, according to the CSS, should be positioned absolutely 10px from the bottom of the page. The CSS works because I am able to change the link colour; it is just ignoring the positioning directives. This has myself and several of my CSS-savvy friends flummoxed.

If you fit the criteria, you can see the problem for yourself at http://www.schofieldandwhite.com/SCC...st/fanfiction/

If not, here is the code in case you can debug it from that:

switch($widescreen)
{
        case true:
                  $elementWidth = (($width - 50) / 2);
                  echo '<style type="text/css">
                  <!--
                  .wrapper {
                  display:block;
                  postion:absolute;
                  bottom:10px;
                  }
                  .page1 {
                  position:absolute;
                  top:10px;
                  margin-top:5px;
                  margin-left:5px;
                  margin-right:5px;
                  margin-bottom:5px;
                  background-color: ' . $bg .';
                  border: medium outset ' . $bd .';
                  max-width: ' . $elementWidth .';
                  width: ' . $elementWidth .';
                  font-size: ' . $size .'px;
                  color: ' . $fg .';
                  display: inline;
                  text-align:left;
                  z-index:0;
                  }
                  .page2 {
                  position:absolute;
                  top:10px;
                  margin-top:10px;
                  margin-left:10px;
                  margin-right:10px;
                  margin-bottom:10px;
                  left:'. ($elementWidth + 20) .'px;
                  background-color: ' . $bg .';
                  border: medium outset ' . $bd .';
                  max-width: ' . $elementWidth .';
                  width: ' . $elementWidth .';
                  font-size: ' . $size .'px;
                  color: ' . $fg .';
                  display: inline;
                  text-align:left;
                  z-index:0;
                  }
                  a {
                  postion:absolute;
                  bottom:1%;
                  text-align:left;
                  display:block;
                  z-index:2;
                  }
                  -->
                  </style>
                  <div class="page1" id="page1" align="left">' . readStory($fileName,$pageNum) .'</div><div class="page2" id="page2" align="right" padding-left="50">' . readStory($fileName,($pageNum + 1)) .'</div>';
                  break;
        case false:
                  echo '<style type="text/css">
                  <!--
                  .page {
                  margin-top:10px;
                  margin-left:10px;
                  margin-right:10px;
                  margin-bottom:10px;
                  background-color: ' . $bg .';
                  border: medium outset ' . $bd .';
                  font-size: ' . $size .'px;
                  color: ' . $fg .';
                  display: inline;
                  text-align:left;
                  z-index:0;
                  }
                  a {
                  postion:absolute;
                  bottom:1%;
                  text-align:left;
                  display:block;
                  z-index:2;
                  -->
                  </style>
                  <div class="page" id="page1" align="left">' . readStory($fileName,$pageNum) .'</div>';
                  break;
}
if ($pageNum == '0')
{
        echo '<div class="wrapper"><br /><br /><br /><br /><br /><br /><br /><a href="read.php?title='. urlencode($title).'&page='. ($pageNum + 1).'">Next Page</a></div>';
}
/*elseif ($pageNum >= ceil($storyLength / 2700))
{
        echo '<br /><a href="read.php?title='. urlencode($title).'&page='. ($pageNum - 1).'">Previous Page</a>';
}*/
else
{
        echo '<div class="wrapper"><br /><br /><br /><br /><br /><br /><br /><a href="read.php?title='. urlencode($title).'&page='. ($pageNum - 1).'">Previous Page</a> <a href="read.php?title='. urlencode($title).'&page='. ($pageNum + 1).'">Next Page</a></div>';
} 

[RFH Reseller: schofieldandwhite]

umm... well... never mind, it was a typo