...

View Full Version : Form Layout



khendar
04-27-2006, 02:16 AM
I'm trying a CSS based form layout. Trouble is i'm having difficulty getting the fields the right length. For some reason the text field and textarea are wider than the buttons and the select field. I'm assuming its something simple like padding but I cant figure out where the problem is.

CSS - The borders are just for testing purposes


.form1{

border:2px dashed gray;
padding:5px;
background-color:#efefef
}
.form1 .row{

}
.form1 .label{
width:15%;
border:0px solid gray;
padding:2px;
float:left;
text-align:right;
}
.form1 .field{

width:80%;
border:0px solid gray;
float:right;
}
.form1 .row{
border:1px dashed gray;
padding:5px;
}

/* Hides from IE5-mac \*/
* html .form1 .row {height: 1%;}
/* End hide from IE5-mac */

.form1 input, textarea, select{
border:1px solid gray;
background-color:#E6F4FF;
font-family:verdana, arial, sans-serif;
font-size:100%;
padding:3px;
width:90%;


}

.form1 input:hover, textarea:hover, select:hover{
border:1px solid black;
background-color:#ffffdd;
}

HTML


<div class="form1">
<form method="post" action="index.php?page=process">
<div class="row">
<div class="label">
<label for="project_title"> Project Title
</label>
</div>
<div class="field" >
<input id="project_title" name="project_title" type="text" value="enter text here" style="padding:0px;"/> ?
</div>
<div class="spacer">
</div>
</div>
<div class="row">
<div class="label">
<label for="project_type">Project Type
</label>
</div>
<div class="field">
<select id="project_type" name="project_type" >
<option value="program">Program</option>
<option value="website">Website</option>
<option value="other">Other</option>
</select> ?
</div>
<div class="spacer">
</div>
</div>
<div class="row">
<div class="label">
<label for="project_description"> Description
</label>
</div>
<div class="field">
<textarea id="project_description" name="project_description" rows="5" cols="30"></textarea> ?
</div>
<div class="spacer">
</div>
</div>
<div class="row">
<div class="field">
<input type="reset" name="clear" id="clear" value="Clear" />
<input type="submit" name="submit" id="submit" value="Submit" style="margin-top:2px;"/>
</div>
<div class="spacer">
</div>
</div>

</form>
</div>

Cheers.

khendar
04-27-2006, 02:19 AM
Actually the code seems work fine in isolation, its only when its part of the rest of the page that it buggers up. Here's the whole thing:

http://khendar.awardspace.com/sit/index.php?page=submit_idea



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum