Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   CSS in Forms (http://www.velocityreviews.com/forums/t391843-css-in-forms.html)

Lawrence 12-19-2006 01:04 PM

CSS in Forms
 
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">
<!-- Insert your page here -->
<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 12-19-2006 01:12 PM

Re: CSS in Forms
 
> 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">&nbsp;</td>
<td align="left"><input class="sub" type="submit" value="Submit"
/></td>
</tr>
</table>


Lawrence 12-19-2006 01:21 PM

Re: CSS in Forms
 
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?
>
> 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">&nbsp;</td>
> <td align="left"><input class="sub" type="submit" value="Submit"
> /></td>
> </tr>
> </table>



Jonathan N. Little 12-19-2006 04:01 PM

Re: CSS in Forms
 
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


All times are GMT. The time now is 09:27 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.