Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS in Forms

Reply
Thread Tools

CSS in Forms

 
 
Lawrence
Guest
Posts: n/a
 
      12-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">
<!-- 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

 
Reply With Quote
 
 
 
 
PseudoMega
Guest
Posts: n/a
 
      12-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">&nbsp;</td>
<td align="left"><input class="sub" type="submit" value="Submit"
/></td>
</tr>
</table>

 
Reply With Quote
 
 
 
 
Lawrence
Guest
Posts: n/a
 
      12-19-2006
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>


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-19-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
forms authentication -- expired forms cookie vs. not provided forms cookie Eric ASP .Net Security 2 01-27-2006 10:09 PM
embedded windows forms into web forms for control =?Utf-8?B?ZGF2aWQ=?= ASP .Net 2 04-10-2005 01:07 PM
Creating ASP.NET forms, that act like HTML forms jlopes151 ASP .Net 2 03-14-2005 01:01 AM
Forms Authentication question: How to have some pages open and some requiring forms authentication Eric ASP .Net 2 02-13-2004 02:14 PM
Web Forms VS Windows Forms Brendan Miller ASP .Net 2 08-11-2003 09:05 PM



Advertisments