Search Form keyword value won't stay in the center, in Internet Explorer

This Search form looks good and works well except the keyword value “e.g. los angeles” is at the top of the search field box, instead of in the center/middle, only in Internet Explorer 8. I added style=“vertical-align:middle”; but it still is the same way. All ther browsers , it looks fine. Any ideas?

<input type="text" size="52" name="keyword" id="keyword" value="e.g. los angeles" style="color: #D9D9D9;" style="vertical-align:middle"; onfocus="if (this.value=='e.g. los angeles') {this.value=''; this.style.color='#696969';}" >
<form method="get" action="../search.php">
<p>
<style type="text/css">
.form_label{
}
#keyword{
width: 400px;
height: 40px;
border-style:solid;
border-width: 1px;
border-color:#AAAAAA;
}
</style>
<div id="mysiteSearch">
<input type="hidden" name="type" value="videos" />
<input type="text" size="52" name="keyword" id="keyword" value="e.g. los angeles" style="color: #D9D9D9;" style="vertical-align:middle"; onfocus="if (this.value=='e.g. los angeles') {this.value=''; this.style.color='#696969';}" >
<input type="image" align="top" src="../images/search.png" name="sa" value="Search" id="mySearch"/><br />
</div>
</p>
</form>

Assuming this is your only code, it is not surprising that the code doesn’t work. Aside from the fact that Internet Explorer is an antiquated browser, the lack of a DOCTYPE, as well as the errors in the code, makes it very unstable.

I’ve cleaned up the code for you. Isn’t this much nicer?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <title>Form</title>
  
  <style type="text/css">
   fieldset {
    border: 0;
   }
   
   input[type=text] {
    border: 1px solid #aaa;
    color: #d9d9d9;
    height: 40px;
    width: 400px;
   }
  </style>
  
  <script type="text/javascript">
   keyword_text = 'e.g., Los Angeles';
    
   function update_keyword() {
    if(document.getElementById('keyword').value == keyword_text) {
     document.getElementById('keyword').value = '';
     document.getElementById('keyword').style.color = '#696969';
    }
   }
   
   window.onload = function() {
    keyword_element = document.getElementById('keyword');
    
    keyword_element.value = keyword_text;
    
    keyword_element.addEventListener('focus', update_keyword, false);
   }
  </script>
 </head>
 <body>
  <form method="get" action="../search.php" name="searchform">
   <fieldset>
    <input type="hidden" name="type" value="videos">
    <input type="text" name="keyword" id="keyword">
    <input type="image" src="../images/search.png" alt="Search">
   </fieldset>
  </form>
 </body>
</html>