Hello, Can Someone please explain to me why there is a gap between the row of buttons near the top of the page and the iFrame directly beneath it. I want the buttons to sit right on top of the iFrame. thanks! <head> <title>Multi-Search</title> <script type="text/javascript"> <!-- function wikipedia(form){ var f = form.input.value; document.getElementById("1").innerHTML = "<iframe id='test' src ='" + " http://en.wikipedia.org/wiki/" + f + "' width='100%' height='480'></iframe>" } function google(form){ var f = form.input.value; document.getElementById("1").innerHTML = "<iframe id='test' src ='" + "http://www.google.com/search?hl=en&q=" + f + "' width='100%' height='480'></iframe>" } //etc. //--> </script> </head> <body> <FORM> <INPUT NAME="input" VALUE="" MAXLENGTH="100" SIZE=20> <INPUT NAME="calc" VALUE="Google" TYPE=BUTTON onClick=google(this.form)> <INPUT NAME="calc" VALUE="Wikipedia" TYPE=BUTTON onClick=wikipedia(this.form)> <!-- etc. --> </FORM> <div id = "1"> </div> </body> </html> Code (markup):
try this one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" lang="en"> <title>Multi-Search</title> <script type="text/javascript"> <!-- function wikipedia(form){ var f = form.input.value; document.getElementById("1").innerHTML = "<iframe id='test' src ='" + " http://en.wikipedia.org/wiki/" + f + "' width='100%' height='480'></iframe>" } function google(form){ var f = form.input.value; document.getElementById("1").innerHTML = "<iframe id='test' src ='" + "http://www.google.com/search?hl=en&q=" + f + "' width='100%' height='480'></iframe>" } //etc. //--> </script> <style type="text/css"> form {padding:0; margin:0;} </style> </head> <body> <FORM> <INPUT NAME="input" VALUE="" MAXLENGTH="100" SIZE=20> <INPUT NAME="calc" VALUE="Google" TYPE=BUTTON onClick=google(this.form)> <INPUT NAME="calc" VALUE="Wikipedia" TYPE=BUTTON onClick=wikipedia(this.form)> <!-- etc. --> </FORM> <div id = "1"> </div> </body> </html> Code (markup):