I'm having a really really weird problem with a web app I'm programming. Basically, nothing has worked, and I've had to continually reduce the level of complexity of it trying to get something to work. The problem I'm having now is that for some reason my CSS won't apply.
I have it linked, and I made sure the ID I used is correct and everything, but it just does not apply the css. Heres the code:
manage.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blog Manager</title>
<link rel='stylsheet' type='text/css' href='manage.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='shadowbox-prototype.js'></script>
<script type='text/javascript' src='shadowbox.js'></script>
<script type="text/javascript">
window.onload = Shadowbox.init();
</script>
</head>
<body>
<center>
<div id='loginbox'>
<table>
<tr>
<td>Username</td>
<td><input type='text' name='username' /></td>
</tr>
<tr>
<td>Password</td>
<td><input type='password' name='password' /></td>
</tr>
<tr>
<td colspan='2'><input type='submit' value='Submit' /></td>
</tr>
</table>
</div>
</center>
</body>
</html>
manage.css
#loginbox {
position: absolute;
height: 400px;
width: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
background-color: #999999;
border: 1px solid #666666;
}
Am I missing something small? I've tried in firefox and chrome so I know its not some weird browser problem.