I need some help with extra spaces in HTML form. There is a big white space appearing at the center of the HTML form that I am designing even though there is no <br> tags been used:
The html code is below:
The html code is below:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1"
>
<link
rel="StyleSheet"
href="CSS/Lite.css"
type="text/css"
>
<title>Dyadem Support Portal Registration</title>
<SCRIPT LANGUAGE="JavaScript">
function submitForm(){
//Test the entered values
if (document.registerForm.fname.value==""){
alert("Please enter your First Name.")
document.registerForm.fname.focus()
return false
}
if (document.registerForm.lname.value==""){
alert("Please enter your Last name.")
document.registerForm.lname.focus()
return false
}
if (document.registerForm.cname.value==""){
alert("Please enter the Company name.")
document.registerForm.cname.focus()
return false
}
if (document.registerForm.phone.value==""){
alert("Please enter your Phone #.")
document.registerForm.phone.focus()
return false
}
if (document.registerForm.email.value==""){
alert("Please enter the email address.")
document.registerForm.email.focus()
return false
}
if (document.registerForm.product.value=="ST"){
document.registerForm.serial.value="Stature"
}
if (document.registerForm.serial.value==""){
alert("Please enter the Serial # of the product purchased. If you don't know one, enter N/A.")
document.registerForm.serial.focus()
return false
}
if (document.registerForm.product.value=="Blank"){
alert("Product purchased can't be blank.")
document.registerForm.product.focus()
return false
}
return true
}
function isValidEmail() {
var email = document.registerForm.email.value
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
Message = ""
if (AtPos == -1 || StopPos == -1) {
alert("Not a valid email address")
return false
}
if (StopPos < AtPos) {
alert("Not a valid email address")
return false
}
if (StopPos - AtPos == 1) {
alert("Not a valid email address")
return false
}
return true
}
//function that performs all functions, defined in the onsubmit event handler
function check(form){
if (submitForm()){
if (isValidEmail()){
return true
}
}
return false;
}
function toFormat(isField){
isPhone = isField.value
if (isPhone.length == 12)
{isPhone = isPhone.replace(/\D/g,'').replace(/^(\d{3})(\d{3})/,'($1) $2-');isField.value = isPhone;}
else if (isPhone.length > 12 && isPhone.length <= 16)
{isPhone = isPhone.replace(/\D/g,' ').replace(/^(\d{3})( )(\d{3})/,'($1) $3-').replace(/- /,'-').replace(/( )(\d{1,3}$)/,' x $2');isField.value = isPhone;}
else if (isPhone.length < 10 || isPhone.length > 16 || isNaN(isPhone))
{
alert('Invalid phone number')
isField.value = ""
isField.style.background = 'Yellow';
isField.focus()
}
}
</script>
</head>
<body
bgcolor="WHITE"
text="#FFFFCC"
leftmargin="0"
topmargin="0"
marginwidth="0"
marginheigth="0"
>
<div
class="top_stripe"
style="FONT-SIZE: xx-large; BACKGROUND-COLOR: #c0c0c0;"
> </div>
<br>
<br>
<br>
<br>
<center><img
align="center"
src="Images/Dyadem.gif"
/> <br />
<br />
<br />
<center><b
style="FONT-FAMILY: 'Arial'; COLOR: #0080c0; FONT-SIZE: large;"
>DYADEM SUPPORT PORTAL</b></center>
<br>
<br>
[B]<img
src="Images/SupportSitePic.bmp"
align="center"
style="width: 247px; height: 192px;margin:0; padding:0"
/> <br>
<br>
<center><u><b>New User
Registration</b></u></center>
<form[/B][I] // This is the spot where extra space is showing up[/I]
name="registerForm"
onSubmit="return check(this.form)"
Method="POST"
Action="registrationComplete.jsp"
align="center"
>
<table
bgcolor="#EAEAEA"
width="80%"
style="margin:0; padding:0"
>
<center>
<tr>
<td><Strong>*First Name:</Strong> <input
type="text"
name="fname"
></td>
</tr>
</center>
</br>
</br>
<center>
<tr>
<td><Strong>*Last Name:</Strong> <input
type="text"
name="lname"
></td>
</tr>
</center>
</br>
</br>
<center>
<tr>
<td><Strong>*Company:</Strong> <input
type="text"
name="cname"
></td>
</tr>
</center>
</br>
</br>
<center>
<tr>
<td><Strong>*Phone #:</Strong> <input
type="text"
name="phone"
onblur="toFormat(this)"
></td>
</tr>
</center>
</br>
</br>
<center>
<tr>
<td><Strong>*Email:</Strong>
<input
type="text"
name="email"
></td>
</tr>
</center>
</br>
</br>
<center>
<tr>
<td><Strong>*Product:</Strong> <select
style="width: 145px; length: 145px;"
name="product"
>
<option value="Blank"></option>
</tr>
</center>
</br>
</br>
<center>
<tr>
<td> <Strong>Serial #:</Strong>
<input
type="text"
name="serial"
></td>
</tr>
</center>
</br>
</br>
<tr>
<td><MARQUEE
direction="up"
scrolldelay="800"
height="20px"
onmouseover="this.stop()"
onmouseout="this.start()"
width="100%"
>
<center><b style="FONT-FAMILY: 'Arial';"> <pre><I
style="FONT-SIZE: medium; COLOR: #ff0000; FONT-FAMILY: 'Arial';"
>Please fill out all of the required fields in order to register on Dyadem Support Portal.</pre></I></b>
<br />
<b
style="FONT-FAMILY: 'Arial';"
<pre><I style="FONT-SIZE: medium; COLOR: #ff0000; FONT-FAMILY: 'Arial';">An Active Support and Maintenance agreement is required to complete the registration.</pre>
</I></b></center>
</MARQUEE></td>
</tr>
</br>
</br>
<tr>
<td>
<center><input
type="reset"
value="Clear"
/> <input
type="submit"
value="Submit"
name="submit"
/> <input
type="button"
value="Cancel"
onClick="parent.location='https://support.dyadem.com'"
/></center>
</td>
</tr>
</table>
</form>
</center>
</br>
</br>
<div
class="top_stripe"
style="FONT-SIZE: xx-large; BACKGROUND-COLOR: #c0c0c0;"
> </div>
</body>
</html>
Comment