|
Posted by Jonathan N. Little on 12/19/06 16:01
Lawrence wrote:
> Thats pretty much what i want to do just without tables unless I really
> have to!
> PseudoMega wrote:
>>> 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?
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>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|