Vertical space between form elements?

windows · Jan 11, 2008

I have created a container div that holds a titlebox div that goes at the top of the container. I then have a form below this titlebox div with username/password form elements.

The problem I have is that there is a lot of vertical space between the username, username textbox, password, password textbox, login button.

For some reason the form doesn't start just under the titlebox div...it starts about 50 pixels further down. Does anyone know how to fix this and get the form top aligned in this container and also reduce the vertical space between form elements?

<style type="text/css">

#divbox {
width: 100%;
height: 200px;
border: solid 1px black;
padding: 0px;
text-align: left;
background: #FFFFFF;
}

#titlebar {
width:100%;
height:22 px;
background: #CCCCCC;
border-bottom: solid 1px black;
}

p.titlebar {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11 px;
font-weight: bold;
padding: 3 px;
text-align: center;

}

p.logintext {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11 px;
text-align: left;
}

form.login {
padding: 5 px;
}

</style>
</head>

<body>
<div id="divbox">
<div id="titlebar"> 
<p class="Titlebar">Client Login</p>
</div>
<form class="login" action="" method="get">
<p class="logintext">USERNAME</p>
<input name="Username" type="text" size="16" maxlength="16">

<p class="logintext">PASSWORD</p>
<input name="Password" type="password" size="16" maxlength="16">
<br>
<input name="Login" type="button" value="Login">
</form>
</div>
</body>
BradHi!

Like this?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#divbox {
width: 100%;
border: solid 1px black;
padding: 0px;
text-align: left;
background: #FFFFFF;
}
#titlebar {
width:100%;
height:22 px;
background: #CCCCCC;
border-bottom: solid 1px black;
}
div.titlebar {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11 px;
font-weight: bold;
padding: 3 px;
text-align: center;
}
div.logintext {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11 px;
text-align: left;
}
form.login {
padding: 5 px;
margin:0px;
}
</style>
</head>
<body>
<div id="divbox">
<div id="titlebar"> 
<div class="Titlebar">Client Login</div>
</div>
<form class="login" action="" method="get">
<div class="logintext">USERNAME</div>
<input name="Username" type="text" size="16" maxlength="16">
<div class="logintext">PASSWORD</div>
<input name="Password" type="password" size="16" maxlength="16">
<br>
<input name="Login" type="button" value="Login">
</form>
</div>
</body>
</html>Cheers - Pit

Vertical space between form elements?

windows

Guest