I have the following input textboxes, but I have aligned them in css with {width: xxx px;} which is not a good practice as it will not always align correctly.
<style>
#left_col p {
margin-top: 15px;
margin-bottom: 15px;
}
.notvis {
display: none;
margin-top: 5px;
margin-bottom: 5px;
}
#ws_doc_txt {
width: 350px;
}
#ws_end_txt {
width: 358px;
}
#ws_ns_txt {
width: 340px;
}
#ws_op_txt {
width: 25%;
}
#left_col {
float: left;
width: 480px;
padding: 0 0 0 0;
}
#right_col {
margin: 0 0 0 500px;
padding: 0 0 0 0;
text-align: left;
}
#textarea1 {
text-align: left;
}
#button1 {
margin-top: 20px;
margin-bottom: 20px;
}
.greentxt {
color: green;
}
.redtxt {
color: red;
}
</style>
</head>
<body>
<div id="left_col">
<p>
<label>
<input type="radio" name="ws_type" value="WSDL" id="ws_type_0">
WSDL</label>
<label>
<input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">
Endpoint</label>
</p>
<p id="ws_doc">
<label for="ws_doc">Document:</label>
<input type="text" name="ws_doc" id="ws_doc_txt">
</p>
<p id="ws_end">
<label for="ws_end">Endpoint:</label>
<input type="text" name="ws_end" id="ws_end_txt">
</p>
<p id="ws_ns">
<label for="ws_ns">Namespace:</label>
<input type="text" name="ws_ns" id="ws_ns_txt">
</p>
<p>
<label for="ws_op">Operation:</label>
<input type="text" name="ws_op" id="ws_op_txt">
</p>
<p>
<label for="ws_par">Parameter:</label>
<input type="text" name="ws_par" id="ws_par_txt">
</p>
<p>
<label for="ws_val">Value:</label>
<input type="text" name="ws_val" id="ws_val_txt">
</p>
<input type="submit" name="test" value="Test">
</div>
What would be the correct way to make the width of the textboxes always stop at a certain point on the right side? Also, is using <p> tags to make inputs behave like block elements wrong? Could I just use css to have them stay 1 at each line? Thanks
Consider using a table to have all inputs aligned on the left side. Giving all inputs the same width should then align them perfectly on the right as well.
#left_table input {
width:350px;
}
<table id="left_table">
<tr>
<td><label for="ws_doc">Document:</label></td>
<td><input type="text" name="ws_doc" id="ws_doc_txt">
</tr>
<tr>
<td><label for="ws_end">Endpoint:</label></td>
<td><input type="text" name="ws_end" id="ws_end_txt">
</tr>
<!-- etc... -->
</table>
if you want all your text boxes to have the same attribute with proper positioning you can try this(obviously set proper values):
input[type='text']
{
width: 270px;
height: 30px;
top: 167px;
left: 43px;
position:relative;
margin-left: 10px;
background-color: #F3F3F3;
border: 1px solid #D6D6C2;
border-radius: 3px;
}
Related
I have two doubts to be cleared.
my ordered list has numbering of 1 2 3 4 5 6 etc but am not able to bring that aligned with the questions this is going outside the box.
I have a solution button for each questions but I don't know how to place it on the side of the questions.
here i have attached the code and the expected output. if possible kindly complete the code and post.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 15px;
height: 100%;
width: 100%;
background-color: antiquewhite;
}
input[type="radio"] {
margin-right: 10px;
}
p {
line-height: 30px;
padding: 30px;
}
.play{
position: absolute;
top: 150px;
left: 300px;
padding: 10px;
border-radius: 10px;
font-family: sans-serif;
background-color: darkgreen;
color: #fff;
}
form[name=quiz] {
margin-left: 10%;
margin-right: 10%;
}
ol{
padding: 10px;
list-style-position: inside;
}
ol li{
background-color: #fff;
border-radius: 15px;
margin: 10px;
box-shadow: 0px 1.5px 2px 0px rgb(91, 91, 91);
}
<form name="quiz" id="quiz">
<ol>
<li>
<div class="q1">
<p><strong>The value of \(\frac{1}{{{{\log }_4}120}} + \frac{1}{{{{\log }_5}120}} + \frac{1}{{{{\log }_6}120}}\) is</strong><br><br>
<input type="radio" name="question1" value="0">A.0<br>
<input type="radio" name="question1" value="1">B.1<br>
<input type="radio" name="question1" value="24">C.24<br>
<input type="radio" name="question1" value="120">D.120<br>
</p>
</div>
<div>
<button class="play">Play Solution</button>
</div>
</li>
<li>
<div>
<p><strong>For a 3x3 matrix A, |A| = 4 and adj A = \(\left( {\begin{array}{*{20}{c}}1&p&3\\1&3&3\\2&4&4\end{array}} \right)\), then the value of p is</strong><br><br>
<input type="radio" name="question2" value="4">A.4<br>
<input type="radio" name="question2" value="11">B.11<br>
<input type="radio" name="question2" value="5">C.5<br>
<input type="radio" name="question2" value="0">D.0<br>
</p>
</div>
</li>
Your question isn't aligning with the number of your ordered list because you're using a <p> element for it which is set to display: block; by default. Removing the <p> element will fix the problem.
You can use a <table> to structure your answers and the solution buttons.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 15px;
height: 100%;
width: 100%;
background-color: antiquewhite;
}
form[name=quiz] {
margin-left: 10%;
margin-right: 10%;
}
ol {
padding: 10px;
list-style-position: inside;
}
ol li {
background-color: #fff;
border-radius: 15px;
margin: 10px;
padding: 30px;
box-shadow: 0px 1.5px 2px 0px rgb(91, 91, 91);
}
li table {
width: 100%;
}
li table td {
vertical-align: top;
padding-top: 20px;
}
li table td:first-child {
width: 70%;
}
td p {
padding-bottom: 10px;
}
td button {
width: 100%;
padding: 10px;
margin-bottom: 5px;
border-radius: 10px;
background-color: darkgreen;
color: #fff;
}
<form name="quiz" id="quiz">
<ol>
<li class="q1">
<strong>The value of \(\frac{1}{{{{\log }_4}120}} + \frac{1}{{{{\log }_5}120}} + \frac{1}{{{{\log }_6}120}}\) is</strong>
<table>
<tr>
<td>
<p>
<input type="radio" name="question1" id="question1" value="0">
<label for="question1">A. 0</label>
</p>
<p>
<input type="radio" name="question1" id="question2" value="1">
<label for="question2">B. 1</label>
</p>
<p>
<input type="radio" name="question1" id="question3" value="24">
<label for="question3">C. 24</label>
</p>
<p>
<input type="radio" name="question1" id="question4" value="120">
<label for="question4">D. 120</label>
</p>
</td>
<td>
<button class="play">Play Solution</button>
<button class="play">Text Solution</button>
</td>
</tr>
</table>
</li>
</ol>
</form>
Below code was done in Codepen. Here is link: https://codepen.io/andyzam/pen/mdVvrLB
When I resize the window, the items in the table resize properly. But the radio buttons, checkboxes, and text area inputs stay fixed. How do I get those to move?
Do I need to add something to the #radio, #checkboxes, and #textarea IDs? I tried using # radio label {} and using different display properties but they still remained stationary.
body{
background: lightblue;
font-family: monospace;
margin: 0px;
}
p {
text-align: center;
font-size: 14px;
}
#title {
text-align: center;
}
#description {
margin-left: auto;
margin-right: auto;
width: 500px;
font-size: 20px;
text-align: justify;
padding: 10px;
}
input {
width: 250px;
}
label {
font-size: 14px;
margin-right: 0px;
}
table {
margin-left: auto;
margin-right: 35em;
}
td {
text-align: right;
width: 250px;
padding: 10px;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, white);
}
input:valid {
border: 2px solid black;
}
select {
width: 260px;
}
select:invalid:required {
background-image: linear-gradient(to right, pink, white);
}
select:valid {
border: 2px solid black;
}
#radio {
display: block;
margin-left: 53em;
padding: 10px;
}
input[type="radio"] {
width: 20px;
}
#checkboxes {
display: block;
margin-left: 53em;
padding: 10px;
}
input[type="checkbox"] {
width: 20px;
}
#text-field {
display: block;
margin-left: 45em;
padding: 10px;
}
#submit-button {
text-align: center;
padding: 20px;
}
<html>
<body>
<title>TikTok User Survey</title>
<main>
<h1 id="title">TikTok User Survey</h1>
<p id="description">We are gathering information from various TikTok users to gauge their satisfaction with the social media platform.</p>
<p> All fields are required.</p>
<form id="survey-form">
<table>
<tr>
<td><label for="name" id="name-label">Your name:</label></td>
<td><input type="text" id="name" name="name-label" placeholder="Your Name" required></td>
</tr>
<tr>
<td> <label for="email" id="email-label">Enter your email:</label></td>
<td><input type="email" id="email" name="email" placeholder="Email" required></td>
</tr>
<tr>
<td> <label for="number" id="number-label">How many followers:</label></td>
<td><input type="number" id="number" name="number" placeholder="No. of Followers (0-100k)" required min="0" max="100000"></td>
</tr>
<tr>
<td>
<label for="age">How old are you?:</label></td>
<td>
<select id="dropdown" name="age" required>
<option disabled selected value> -- select an option -- </option>
<option value="under13">Under 13</option>
<option value="13-20">13-20</option>
<option value="20-30">20-30</option>
<option value="over30">Over 30</option>
</select>
</td>
</tr>
</table>
<p>My gender:</p>
<div id='radio'>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>
<p>Favorite types of videos:</p>
<div id="checkboxes">
<input type="checkbox" id="dancing" name="dancing" value="dancing">
<label for="dancing">Dancing</label><br>
<input type="checkbox" id="cooking" name="cooking" value="cooking">
<label for="cooking">Cooking</label><br>
<input type="checkbox" id="pranks" name="pranks" value="pranks">
<label for="pranks">Pranks</label><br>
</div>
<p>Any additional comments about what you like:</p>
<div id="text-field">
<textarea name="message" rows="10" cols="30">I also like....</textarea>
</div>
<div id="submit-button">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</main>
</body>
</html>
Your problem is that you set a fixed margin-left on your radio buttons.
#radio {
display: block;
margin-left: 53em;
padding: 10px;
}
If you want to center your items perhaps you should do like you do with the description and use auto:
#description {
margin-left: auto;
margin-right: auto;
width: 500px;
font-size: 20px;
text-align: justify;
padding: 10px;
}
However an even better way might be to give a flexbox value to the containing element and then you can center elements from there if that is how you wish to position them.
.container {
display: flex;
justify-content: center;
align-items: center;
}
Flexbox isnt defined by horizontal or vertical centering since you can change the direction of centering. But in a default case justify-content: center; will center horizontally and align-items: center; will center vertically.
Outside of this i would also sugest you style using classes instead of ids. Classes can be repeated in more than one place and that is something you will appreciate when styling something like a checkbox that is likely to exist at several places.
I am currently working on creating a sign up form html/css. I realised that different browsers work differently on the width of inputs. How can i rectify this issue and make sure that my sign up form is compatible with all browsers. My sign up form works perfectly for chrome as it is where i do coding on.
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: auto;
position: relative;
top: 80px;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
height: 350px;
margin: auto;
position: relative;
top: 100px;
border: 1px solid #000;
}
.fname input[type="text"] {
position: relative;
left: 115px;
top: 30px;
padding: 8px;
}
.lname input[type="text"] {
position: relative;
left: 314px;
top: -5.5px;
padding: 8px;
}
.userid input[type="text"] {
position: relative;
left: 115px;
padding: 8px;
top: 10px;
}
.pwd input[type="password"] {
position: relative;
padding: 8px;
left: 115px;
top: 25px;
}
.email input[type="email"] {
position: relative;
padding: 8px;
left: 115px;
top: 40px;
}
.btn button[type="submit"] {
position: relative;
left: 115px;
top: 55px;
padding: 8px;
width: 382px;
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
}
div.btn button[type="submit"]:hover {
background-color: rgb(255, 0, 0);
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="fname">
<label>
<input type="text" placeholder="First Name" name="fname" size="20">
</label>
</div>
<div class="lname">
<label>
<input type="text" placeholder="Last Name" name="lname" size="20">
</label>
</div>
<div class="userid">
<label>
<input type="text" placeholder="Username" name="userid" size="50">
</label>
</div>
<div class="pwd">
<label>
<input type="password" placeholder="Password" name="pwd" size="50">
</label>
</div>
<div class="email">
<label>
<input type="email" placeholder="Email Address" name="email" size="50">
</label>
</div>
<div class="btn">
<button type="submit">Create Account</button>
</div>
</form>
</div>
It's always a good idea to use something like normalize.css or any other CSS reset code (eric meyer css reset is very popular too) to reset CSS across all browsers.
Any browser come with it's defaults values for padding's,margins,widths, heights etc...
I guess it won't be an 100% solution but it will defiantly will take you closer to what you're looking for.
Do not jump to position relative and absolute. If you are new to all this, I can understand it seems the most natural way to go about positioning elements; just using a top and left position and that's that. But this is not how you should do it on the web!
Below you can find how I would do it.
Matan G. is right in pointing out that a CSS reset/normalize is often used, and I do so myself as well. However, before you do that (and considering you're new) it would be wise to take a look at the code that I posted and see if it makes any sense to you. If not, ask.
It is important to note that you should avoid these things when possible:
setting a fixed width to text items such as headings, paragraphs, lists.
using relative/absolute positioning. They are very useful but only when necessary.
using too many divs/classes than actually needed. Don't overcrowd your HTML.
* {box-sizing: border-box;}
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: 80px auto auto;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
margin: 20px auto auto;
border: 1px solid #000;
padding: 20px;
}
label {
display: block;
}
.name::after {
content: "";
display: table;
clear: both;
}
.name label:first-child {
margin-right: 20px;
}
.name label {
width: calc(100% / 2 - 10px);
float: left;
}
input, [type="submit"] {
padding: 8px;
margin-bottom: 20px;
width: 100%;
}
[type="submit"] {
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
margin: 0;
}
[type="submit"]:hover {
background-color: red;
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="name">
<label>
<input type="text" placeholder="First Name" name="fname">
</label>
<label>
<input type="text" placeholder="Last Name" name="lname">
</label>
</div>
<label>
<input type="text" placeholder="Username" name="userid">
</label>
<label>
<input type="password" placeholder="Password" name="pwd">
</label>
<label>
<input type="email" placeholder="Email Address" name="email">
</label>
<button type="submit">Create Account</button>
</form>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
<style>
.container{
width: 45%;
margin: auto;
}
.form-content{
margin: 40px;
}
.form-content input{
width: 100%;
}
label{
font-weight: bold;
}
input[type=text],[type=email],[type=tel],[type=date],[type=password]{
font-size: 16px;
border-radius: 5px;
background: #D9F1F7;
border: #000000;
padding: 10px;
}
input[type=submit]{
background: #4C63ED;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
input[type=submit]:hover{
background: #330EEF;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "container">
<form name="signup" method="get" action="">
<div class="form-content">
<label>First Name : </label>
<input type="text" name="firstname" />
</div>
<div class="form-content">
<label>Last Name : </label>
<input type="text" name="lastname" />
</div>
<div class="form-content">
<label>E-Mail : </label>
<input type="email" name="email" />
</div>
<div class="form-content">
<label>Telephone : </label>
<input type="tel" name="telephone" />
</div>
<div class="form-content">
<label>Date of Birth : </label>
<input type="date" name="dob" />
</div>
<div class="form-content">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
This is a simple issue, and i'm sure i am just overlooking something but if you will notice, in the 4th row, the label isn't aligning vertically. Take a look at it here on JSFiddle:
http://jsfiddle.net/uidezigns/HJEca/
HTML
<form class="lable_left">
<p>
<label for="fn">First name:</label>
<input type="text" name="fn">
</p>
<p>
<label for="ln">Last name:</label>
<input type="text" name="ln">
</p>
<p>
<label for="ph">Phone Number:</label>
<input type="tel" name="ph">
</p>
<p>
<label for="ad">Street Address:</label>
<textarea name="ad"></textarea>
</p>
<p>
<label for="ct">City:</label>
<input type="text" name="ct">
</p>
<p>
<label for="st">State:</label>
<input type="text" name="st">
</p>
<p>
<label for="zc">Postal:</label>
<input type="text" name="zc">
</p>
<input type="submit" value="Submit">
</form>
CSS
/* --- skins for visibility - Remove for implementation --- */
form {
margin: 40px;
padding: 20px;
background-color: #FAE2BF;
}
form p {
background-color: #F7CBC7;
}
form label {
background-color: #E5E2DB;
}
/*----------------------------------------------------------*/
form {
font: normal 12px Arial;
display: block;
}
form p {
padding: 0;
margin: 2px 0;
float: left;
width: 100%;
}
form.two_row p {
width: 50%;
}
form.three_row p {
width: 33%;
}
form label,form input,form textarea {
display: block;
}
label {
margin: 10px 0 0;
}
input {
}
textarea {
width: 100px height:100px;
margin: 0;
}
form.lable_left p {
display: table-cell;
vertical-align: middle;
}
form.lable_left label,form.lable_left input,form.lable_left textarea {
display: inline-block;
margin: 0;
}
form.lable_left label {
width: 120px;
}
form.lable_left input {
}
input[type="submit"] {
clear: both;
float: none;
}
Thanks in advance for any suggestions.
Include label { vertical-align: top; }
See this jsFiddle.
guess i fixed it myself...lol i needed to add:
form label,form input,form textarea { vertical-align:middle }
to the css
I am working on site with fixed links on the top and fixed submit buttons at the bottom. The content in between is scrollable using overflow:auto;
When I reduce the height of the browser window size
I am noticing 2 probelms:
The scroller height doesnt change with the height of the browser.
When the height is reduced the fixed button shows on top of the scroller
How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
I've made a JSFiddle demonstration of my problem here ->
MY JSFIDDLeDEMO
I am working Firefox 19.0 and chrome version 26.0.1410.12 and IE9
Here is my code in JSfiddle:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow based Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#branding h1 {
margin: 0;
}
#wrapper {
background-color: #fff;
}
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
min-width: 1260px;
}
#wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
float: right;
}
#mainNav li {
/* width: 180px;
float: left; */
display:inline;
}
#submit-b {
border: 0px solid red;
bottom: 77px;
position: fixed;
text-align: cemter;
width: 100%;
}
#footer {
clear: both;
}
/* Add some padding
================================== */
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
-->
/* fieldset styling */
fieldset {
margin: 1em 0;
/* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
/* legend styling */
legend {
font-weight: bold;
}
form p {
position: relative;
width: 100%;
}
/* style for labels */
label {
float: left;
width: 10em;
}
#remember-me label {
width: 4em;
}
/* style for required labels */
label .required {
font-size: 0.83em;
color:#760000;
}
/* style error messages */
label .feedback {
position: absolute;
margin-left: 11em;
left: 200px;
right: 0;
font-weight: bold;
color:#760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
}
/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback {
width: 10em;
}
input {
width: 200px;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc;
}
input.radio {
float: left;
margin-right: 1em;
}
textarea {
width: 300px;
height: 100px;
}
/* Date of Birth form styling */
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor div {
width: 8em;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Products
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Case Studies
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset id="submit-b">
<legend></legend>
<p>
<input id="submit" class="submit" name="submit" type="submit" />
</p>
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
1. The scroller height doesnt change with the height of the browser.
That is because you have set a fixed height for #form-b, set at 500px:
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
2. When the height is reduced the fixed button shows on top of the scroller
It is unnecessary to wrap the submit button with a fieldset. Simply absolutely position the submit button relative to the containing parent, <form>.
3. How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
Fixed position as in, fixed in the viewport, or fixed relative to the scrolling div? Moreover, you will have to rely on JS to readjust the height of the form whenever browser height changes, something along the line of:
$(document).ready(function() {
$(window).resize(function() {
// Set <form> height here with calculations (...)
$("#form-b).height(...);
}).resize(); // Trigger another resize when document is ready
});