RE: [WSG] making form elements the same height
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 #99;
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]
***
Re: [WSG] making form elements the same height
On 25 May 2007, at 5:18 PM, Taco Fleur wrote: http://www.clickfind.com.au/test-index.html I am trying to get the form elements the same height Hi Taco Form Submit buttons are system-level widgets - they're different shapes and sizes according to which browser/OS combination is in use. They're notoriously difficult to style, as in most instances, being generated at the system level, they just won't accept css styling. Have you thought about using a custom image, which you can make the size you want? This is only a partial answer, of course, as an image (unless it's sized in ems or %) won't enlarge as the text is enlarged. You already have a problem in that regard, as one level of enlargement is enough to cause your Submit button to wrap to the next line... (I'm viewing in Safari/Mac - and the Submit button also doesn't resize with text - it's just pushed around.) BTW, 5,712,590 million = 5,712,590,000,000 N ___ omnivision. websight. http://www.omnivision.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] making form elements the same height
Thanks guys and girls... This is helpful.. Not the answers I was hoping for, but it certainly helps. I am slowly building a JavaScript library that will replace the HTML elements with elements that I can style, so it should eventually not be a problem anymore. PS. :-) I had 6.5 Million there first, changed it and forgot to remove the million, thanks for pointing it out though. BTW, 5,712,590 million = 5,712,590,000,000 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Gleitzman Sent: Friday, 25 May 2007 6:50 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] making form elements the same height On 25 May 2007, at 5:18 PM, Taco Fleur wrote: http://www.clickfind.com.au/test-index.html I am trying to get the form elements the same height Hi Taco Form Submit buttons are system-level widgets - they're different shapes and sizes according to which browser/OS combination is in use. They're notoriously difficult to style, as in most instances, being generated at the system level, they just won't accept css styling. Have you thought about using a custom image, which you can make the size you want? This is only a partial answer, of course, as an image (unless it's sized in ems or %) won't enlarge as the text is enlarged. You already have a problem in that regard, as one level of enlargement is enough to cause your Submit button to wrap to the next line... (I'm viewing in Safari/Mac - and the Submit button also doesn't resize with text - it's just pushed around.) BTW, 5,712,590 million = 5,712,590,000,000 N ___ omnivision. websight. http://www.omnivision.com.au/ *** 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] ***
Re: [WSG] making form elements the same height
Taco Fleur wrote: 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; That certainly got me! I'm sorry I can't add much more to what Nick has said. I don't know if this helps, but I think PPK has written on this topic: http://www.quirksmode.org/css/tests/mozie_button.html I hope that helps, to at least understand the phenomenon. Kat *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] making form elements the same height
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=emailAddressYour 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 #99;
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]
***
