Forms add an extra line?

[AgaBoogaBoo]

I'm adding a google search bar to a header on a webpage. I inserted all parts of the form and tested it, it worked except there was always a break after it. Here is the code for it:

<form name=f action=http://www.google.com/search>
<input type=hidden value=en name=hl2>
<input type=hidden value=UTF-8 name=ie2>
<input type=hidden
value=UTF-8 name=oe2>
<input maxlength=256 size=35 name=q2>
<input tabindex=101 type="submit" name="btnG2" value="Go">
</form>

Here is the image of what it looks like:

http://www.ankitgupta.com/form.gif
If you can't see it, go to http://www.ankitgupta.com/form.gif

Then I looked in the code and found no breaks anywhere around that table. Now I tried removing the form tags and see how it is with the rest of it:

<input type=hidden value=en name=hl2>
<input type=hidden value=UTF-8 name=ie2>
<input type=hidden
value=UTF-8 name=oe2>
<input maxlength=256 size=35 name=q2>
<input tabindex=101 type="submit" name="btnG2" value="Go">

This is what it looks like: http://www.ankitgupta.com/noform.gif
If you can't see it, go to http://www.ankitgupta.com/noform.gif

I can see now that it is the form tag that is causing this, any ideas why? I tried putting the table into another blank page and it still has the same problem. Here is the code to the table:


<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td><font color="#DEB500" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>
<script language="JavaScript">
// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}

// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;

// Print out the data.
document.write("" +today+ "");
</script>
</b></font><font size="2" color="#CCCCCC"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#DEB500">|</font></b> <script language="JavaScript">

var myfont_face = "Verdana, Arial, Helvetica, sans-serif";
var myfont_size = "7.85";
var myfont_color = "#DEB500";
var myback_color = "";
var mywidth = 72;
var my12_hour = 1;

var dn = ""; var old = "";

if (document.all||document.getElementById) { document.write('<span id="LiveClockIE" style="width:'+mywidth+'px; background-color:'+myback_color+'"></span>'); }
else if (document.layers) { document.write('<ilayer bgColor="'+myback_color+'" id="ClockPosNS"><layer width="'+mywidth+'" id="LiveClockNS"></layer></ilayer>'); }
else { old = "true"; show_clock(); }

function show_clock() {

//show clock in NS 4
if (document.layers)
document.ClockPosNS.visibility="show"
if (old == "die") { return; }

var Digital = new Date();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();

if (my12_hour) {
dn = "AM";
if (hours > 12) { dn = "PM"; hours = hours - 12; }
if (hours == 0) { hours = 12; }
} else {
dn = "";
}
if (minutes <= 9) { minutes = "0"+minutes; }
if (seconds <= 9) { seconds = "0"+seconds; }

myclock = '';
myclock += '<b><font style="color:'+myfont_color+'; font-family:'+myfont_face+'; font-size:'+myfont_size+'pt;">';
myclock += hours+':'+minutes+':'+seconds+' '+dn;
myclock += '</font></b>';

if (old == "true") {
document.write(myclock);
old = "die"; return;
}

if (document.layers) {
clockpos = document.ClockPosNS;
liveclock = clockpos.document.LiveClockNS;
liveclock.document.write(myclock);
liveclock.document.close();
} else if (document.all) {
LiveClockIE.innerHTML = myclock;
} else if (document.getElementById) {
document.getElementById("LiveClockIE").innerHTML = myclock;
}

setTimeout("show_clock()",1000);
}
</script>
</font></td>
<td width="50%">
<div align="right">
<form name=f action=http://www.google.com/search>
<input type=hidden value=en name=hl2>
<input type=hidden value=UTF-8 name=ie2>
<input type=hidden
value=UTF-8 name=oe2>
<input maxlength=256 size=35 name=q2>
<input tabindex=101 type="submit" name="btnG2" value="Go">
</form>
</div>
</td>
</tr>
</table>

Oh yeah, and don't worry about the credit for the author's of the scripts above. I'm going to give credit at the bottom of my page along with the copyright and stuff.

[jtr]

Try placing the form tags outside of the table tags.

[AgaBoogaBoo]

Thanks a lot! Now its working like a charm, took only 2 minutes!

[jtr]

Yaba Daba Do > AgaBoogaBoo :)

[cg9com]

or CSS would fix it no matter where it was.

form {
margin:0;
}

[Roy Sinclair]

Originally posted by cg9com
or CSS would fix it no matter where it was.

form {
margin:0;
}

Ahem! You forgot something.

form {margin:0px;}

[Catman]

Actually, if the length is set to 0, browsers are supposed to just forget about the units.

[Roy Sinclair]

Leaving off units designations is a habit which will bite you even when it "seems" to be ok. It's a lot like how people who got into the habit of leaving off "optional" html codes have a much harder time writing code that validates properly.

[cg9com]

actually in my code i do use px, but i figured it wasnt needed.

[meow]

It doesn't 'seem' to be correct. It is correct when the value is zero. :confused:

[Catman]

From the CSS2 Recommendation, section 4.3.2:

The format of a length value (denoted by <length> in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, deg, etc.). After the '0' length, the unit identifier is optional.

As Roy points out, it's probably not a good idea to use this option.

[meow]

For what reason? I don't know any browser that doesn't understand it and adds to readability since it's easier to single out 0 values, at least for my eyes.