First thing I did was to do a short reset to the css so we no longer need to do a position:relative; on #header. You should try to get rid of all of them, they normally are not needed.
Corrected the errors in the code. Changed width in #searchbox and removed the left padding so there would be a separation between it and the dropdown. Removed #header bottom border and redid the height to reflect that.
Looks good in FF, IE8, and safari.
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"><!-- connecting css to html -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="description" content="Multiple search engines ">
<meta name="keywords" content="Search engine, Google, Facebook, Yahoo, Bing, Ask, Youtube, Dogpile, Adult, Adult Videos.">
<title>Multiple Search Engine</title>
<!--[if IE 9 ]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if IE 8 ]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->
<style type="text/css">
html, body, div{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.links {
text-decoration:none;
color:#b1b1b1;
position:relative;
top:7px;
font-family:arial;
font-size:13px;
}
.links:hover{
color:white;
}
#footer {
position:relative;
top:500px;
left:200px;
width:290px;
}
#theForm {
position:absolute;
top:300px;
left:250px;
width:450px;
}
#theImage {
margin-left:360px;
margin-top:108px;
}
.engine {
height:31px;
position:relative;
top:-31px;
left:410px;
font-size:15px;
font-weight:bold;
}
#searchbox {
height:25px;
width:400px;
font-size:17px;
}
#header {
height:31px;
width:1026px;
background-color:black;
}
</style>
</head>
<body>
<div id="header">
<b>
<a href="index.html" class="links" style="color:white">Web</a>
<a href="image.html" class="links">Images</a>
<a href="videos.html" class="links">Videos</a>
<a href="social.html" class="links">Social</a>
<a href="adult videos.html" class="links">Adult Videos</a>
</b>
</div>
<img id="theImage" alt="theImage">
<form id="theForm" name="theForm">
<input name="search" id="searchbox">
<br>
<select name="engine" class="engine" id="engine" title="Choose search engine">
<option>Choose one</option>
<option value="google">Google</option>
<option value="yahoo">Yahoo</option>
<option value="ask">ask</option>
<option value="bing">bing</option>
</select>
<br>
<input type="button" value="Search" name="doit">
</form>
<script type="text/javascript">
(function () {
function doGoogle( searchFor ) { this.location.href="https://www.google.com/search?q="+searchFor; }
function doYahoo( searchFor ) { this.location.href="http://search.yahoo.com/search?p="+searchFor; }
function doBing( searchFor ) { this.location.href="http://www.bing.com/search?q="+searchFor; }
function doAsk( searchFor ) { this.location.href="http://www.ask.com/web?q="+searchFor; }
var choices = {
"google" : { "logo" : "images/google.png", "code" : doGoogle },
"yahoo" : { "logo" : "images/yahoo.png", "code" : doYahoo },
"bing" : { "logo" : "images/bing.png", "code" : doBing },
"ask" : { "logo" : "images/ask.png", "code" : doAsk }
}
var form = document.getElementById("theForm");
var engineCode = null;
form.engine.onchange = function () {
var choice = this.value;
if ( choice == "Choose One" ) return; // "choose one" selected?
document.getElementById("theImage").src = choices[choice].logo;
engineCode = choices[choice].code;
}
form.doit.onclick = function () {
if ( engineCode != null ) {
engineCode( form.search.value );
}
else {
alert ("Please choose an engine.");
}
}
document.onkeydown=function (e){
var keycode;
if (window.event) {keycode = window.event.keyCode;}
else if (e) {keycode = e.which;}
else {return true;}
if (keycode == 13&&engineCode!= null) {
engineCode(form.search.value);
return false;
}
else {
if (keycode == 13&&engineCode== null) {
alert("Please choose an engine.");
}
}
}
})(); // self-invoke anonymous function
</script>
</body>
</html>