I've put up the standalone page at http://stevenxu.ca/uploads/layouttest.php.
The page experiences a peculiar failure when running in IE7 (strictly IE8 in Compatibility View). A similar error occurs in IE6 when I use XP mode (along with a few other errors), but I'm not too worried about IE6 compatibility.
Namely, the input box is left-aligned when it should be centred as an inline element. Relevant CSS:
form#prompt {
position: absolute;
height: 300px;
width: 600px;
margin: -150px 0 0 -300px;
top: 50%;
left: 50%;
text-align: center; }
form#prompt input#password {
margin: 10px auto;
padding: 5px 10px;
text-align: center;
width: 398px;
display: inline; }
Relevant HTML:
<form id="prompt">
<input type="text" name="password" id="password" />
</form>
Now the really peculiar thing is that when you trigger the submit listener on the form, which returns false and initializes the callback $('#prompt_output').text(' ').css('opacity',0).text('Access granted. Loading...').fadeTo(200,1);, everything works. The input rights itself. In fact, even when the callback is just $('#prompt_output').text(' '), it works. Just selecting the element $('#prompt_output'); doesn't do anything.
Any help would be appreciated. I've loaded jQuery into my sample page in case anyone wants to use that to play with.