Hello
There is a tutorial in the following website for making password strength meter for a password field

http://simplythebest.net/scripts/aja..._strength.html

I created a password field for myself and followed the tutorial step by step,and here is my code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pstrength-min.1.2.js">
</script>
<script type="text/javascript">
$(function() {
$('.password').pstrength();
});
</script>


<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
p, span, div, ol, ul, li, td, button, input, textarea, form
{
   margin: 0;
   padding: 0;
}
a
{
   color: #C8D7EB;
   outline: none;
   text-decoration: underline;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: underline;
}
</style>
<style type="text/css">

#password
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
.password {
font-size : 12px;
border : 1px solid #cc9933;
width : 200px;
font-family : arial, sans-serif;
}
.pstrength-minchar {
font-size : 10px;
}
</style>
</head>
<body>
<input class="password" type=password name="Password" style="position:absolute;left:400px;top:241px;width:255px;height:26px;line-height:26px;z-index:0;">
</body>
</html>
In tutorial site it's showing a demo of code that works correctly,but in my code password strength bar is showsd on top of page with a full page width
I want it to show under my pass field like tutorial demo....PLEASE HELP!