Extra White Space on the HTML form

Jibran

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:

Expand|Select|Wrap|Line Numbers

 <!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;"

>&nbsp;</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>
 
 <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 // This is the spot where extra space is showing up

    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>&nbsp; <input

            type="text"

            name="lname"

        ></td>

    </tr>

    </center>

    </br>

    </br>

    <center>

    <tr>

        <td><Strong>*Company:</Strong>&nbsp;&nbsp;&nbsp; <input

            type="text"

            name="cname"

        ></td>

    </tr>

    </center>

    </br>

    </br>

    <center>

    <tr>

        <td><Strong>*Phone #:</Strong> &nbsp;&nbsp;&nbsp; <input

            type="text"

            name="phone"

            onblur="toFormat(this)"

        ></td>

    </tr>

    </center>

    </br>

    </br>

    <center>

    <tr>

        <td><Strong>*Email:</Strong>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input

            type="text"

            name="email"

        ></td>

    </tr>

    </center>

    </br>

    </br>

    <center>

    <tr>

        <td><Strong>*Product:</Strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select

            style="width: 145px; length: 145px;"

            name="product"

        >

            <option value="Blank"></option>
 
    </tr>

    </center>

    </br>

    </br>

    <center>

    <tr>

        <td>&nbsp;<Strong>Serial #:</Strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <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"

        /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input

            type="submit"

            value="Submit"

            name="submit"

        /> &nbsp;&nbsp;&nbsp;&nbsp; <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;"

>&nbsp;</div>

</body>

</html>

eWish

Try validating your markup and fixing the errors first.

Also, please use the code tag when you are posting markup or code. Thanks.

--Kevin

David Laakso

With 9 yards of garbage code containing 57 markup validation errors and proprietary HTML consider yourself fortunate it shows up on the screen at all...

Extra White Space on the HTML form

re: Extra White Space on the HTML form

re: Extra White Space on the HTML form

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about