CSS in Forms

Lawrence · Dec 19, 2006

Quick question I am trying to style my submit button so it is line with
the input boxes. However this is not working:

input.sub
{
margin-left: 4.5em;
}

The html bit is this:

<div id="main-text">

<h1>Please Register</h1>
<p>Enter your desired username and password</p>
<div id="register-form">
<form action="#">
<fieldset>
<legend> Registration</legend>
<p><label for="name">Name</label> <input type="text" id="name"
/></p>
<p><label for="e-mail">E-mail</label> <input type="text"
id="e-mail" /></p>
<p><input class="sub" type="submit" value="Submit" /></p>
</fieldset>
</form>
</div>

</div>

I have styled the inputs and labels correctly but I am having trouble
with the submit button!

Thanks

Lawrence

PseudoMega · Dec 19, 2006

I have styled the inputs and labels correctly but I am having trouble

with the submit button!

Are you trying to align the left edge of the button with the left edges
of the text inputs?

I hate tables, but I'd probably resort to using one in this instance.

<table>
<tr>
<td align="right">Name</td>
<td align="left"><input type="text" id="name" /></td>
</tr>
<tr>
<td align="right">E-mail</td>
<td align="left"><input type="text" id="e-mail" /></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input class="sub" type="submit" value="Submit"
/></td>
</tr>
</table>

Lawrence · Dec 19, 2006

Thats pretty much what i want to do just without tables unless I really
have to!

Jonathan N. Little · Dec 19, 2006

Lawrence said:
Thats pretty much what i want to do just without tables unless I really
have to!

Well can make the argument that it is tabular data as two columns
"name|value" pairs. But you can also do it without a table, although IE
is problematic as usual...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.orgR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>No Table<title>

<style type="text/css">
/*
IE won't properly clear floats on LABEL so can fudge by
applying a contraining width to the form or (UGH! use a BR)
*/
#register-form { width: 15em; }
#register-form LABEL,
#register-form INPUT { display: block; float: left; margin: .2em; }

#register-form LABEL { width: 3em; clear: left; }

/*
Again IE does support matching attributes selector
so IE needs a class also IE has a double margin bug
on floated block...
*/
#register-form .sub { clear: left; margin-left: 2em; }

/*
Now the correct values for real web browsers
*/
#register-form INPUT[type="submit"] { clear: left; margin-left:
4.2em; }
</style>

</head>
<body>

<h1>Please Register</h1>

<p>Enter your desired username and password</p>

<div id="register-form">
<form action="#">
<fieldset>
<legend>Registration</legend>
<label for="name">Name</label><input type="text" id="name">
<label for="e-mail">E-mail</label><input type="text" id="e-mail">
<input class="sub" type="submit" value="Submit">
</fieldset>
</form>
</div>

</body>
</html>

Check forms With JavaScript	1	Mar 28, 2023
I dont get this. Please help me!!	2	Jan 24, 2023
Positioning CSS components	1	Nov 16, 2023
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
Problem in getting dashboard page from login page in python pycharm using POST command	0	Dec 24, 2022
Uhhhhh, What can I do next?	6	Nov 25, 2023
How to store data from a sign up form on a website into an sql databse	1	Sep 9, 2022
Jquery not triggering / acting as expected.	0	Mar 6, 2022

CSS in Forms

Lawrence

PseudoMega

Lawrence

Jonathan N. Little

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads