Hi Taco,
Styling form elements as you are hoping to do is not quite that
simple, and a good place to read about this is in a recent article by
Eric Meyer:
http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
The crux of the article is that there are no standard guidelines for
how browsers should respond to applying various CSS properties to
form controls, and that even if one browser styles the controls how
you would expect, another may not (and probably WILL not, given the
current state of affairs).
That said, here's some advice:
* Don't apply a height to either the submit button, or the text
input. Simply use font-size, and let the browser work out the height.
* Put "Your email address:" inside a <label> tag like so:
<label for="emailAddress">Your email address:</label>
Then you could style the label something like:
label {
line-height: 1.2em;
display: block;
float: left;
}
Hopefully then, your label will line up a bit better with the text
input - you should provide that <label> tag anyway, for accessibility
reasons.
* Don't expect that your submit button will ever match the height of
the input field. If you really want this though, try making the font
size of the submit button larger than the text field, you may be able
to get it to match in a lot of browsers. Or you could use an <input
type="image"...> to get consistency across all browsers.
I hope this helps a bit. Forms are always a fairly tricky thing to
style!
Good Luck!
Travis
On 25/05/2007, at 6:27 PM, Taco Fleur wrote:
PS. The form elements I was referring to are the text field and
the submit
button.
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On
Behalf Of Taco Fleur
Sent: Friday, 25 May 2007 5:18 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] making form elements the same height
Hi all,
I have a question I hope one of you might be able to answer.
http://www.clickfind.com.au/test-index.html
I am trying to get the form elements the same height, I would
expect that
the following would do the trick;
input.text {
border: 1px solid #A9D46F;
height: 1.2em;
font-size: 1em;
margin: 0;
padding: 0.2em;
}
input.submit {
border: 1px solid #999999;
height: 1.2em;
font-size: 1em;
margin: 0;
padding: 0.2em;
}
But it does not, and I do not understand why, I would like to
understand why
it does not.
Also, is there any way to align the text on the left hand side of
the text
field to the middle of the textfield?
Thanks in advance for any help.
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
