It fixed the IE problem but now only safari is giving me problems. The menu bar height isn't working again lol.
This is my full code
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]-->
</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" name="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/>
<center><input type="button" value="Search" name="doit"/></center>
</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>
Full css
Code:
/* Only edit this if you know what you're doing. */
#searchbox {
height:25px;
width:500px;
padding-left:10px;
font-size:17px;
outline:none;
}
.links {
text-decoration:none;
color:#b1b1b1;
position:relative;
top:7px;
font-family:arial;
font-size:13px;
}
.links:hover{
color:white;
}
#header {
border-bottom:1px solid black;
height:30px;
width:1026px;
background-color:black;
position:relative;
top:-10px;
left:-10px;
}
#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;
outline:none;
font-weight:bold;
}
I did run my code through a validator and got 5 errors, mostly with the img tag. I tried fixing it but it just gives me another error after fixing the other error.