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>