Re: [css-d] how can I align input and select elements
Thank you all for your responses. To clarify, I want to have a label and an input form element along with another label and a select form element _in one row_. See my test case: http://jsfiddle.net/cizmazia/KMVmw/ Therefore I want to have _horizontal_ borders of select and input elements aligned as well as I want to have all text including labels aligned to the _baseline_. Is it possible? I was unable to achieve it on IE8 or FF on Win. I tried box-sizing: border-box; to force input and select to be rendered using the same box model. Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
On Thu, Oct 28, 2010 at 2:32 AM, Michal Čizmazia cim...@gmail.com wrote:
Thank you all for your responses. To clarify, I want to have a label
and an input form element along with another label and a select form
element _in one row_.
Try this:
body, input, select {
font-family:Helvetica,Arial,sans-serif;
font-size: 12px;
}
select, input {
vertical-align: bottom;
border: 1px solid gray;
}
label {
display: inline-block; /* you may not need this depending on what you
want to do */
}
A couple of notes:
1) you don't need padding / margin on the select and input because
they don't have any by default
2) Change the label so it only wraps around the text, not text and input.
3) You may or may not need the display: inline-block.
Labels and inputs are all inline elements, so they will naturally sit
next to each other horizontally. About the only thing you need to do
is deal with vertical-align on the select/input. If you need / want to
size the input element, then inline-block will allow you to add box
model properties while keeping it in a horizontal line.
Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
Thanks, Tim,
it seems that this single thing made the difference:
2) Change the label so it only wraps around the text, not text and input.
See the result below. 1px border for select and input is needed,
because otherwise the horizontal borders will not be aligned in IE8
and Firefox on Win.
I do not change the default vertical-align: baseline to keep the
text baselines aligned.
I would prefer to have labels wrapped around input and select
elements, but I am not able to get the same alignment. I am curious,
what is the difference?
Michal
body, input, select {
font-family:Helvetica,Arial,sans-serif;
font-size: 12px;
}
select, input { border: 1px solid gray; }
form action=Submit method=post
p
label for=sexSex/label
select id=sexoption value=MMale/option/select
label for=dateDate of Birth/label
input id=date type=text value=Date of Birth /
/p
/form
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
I am sorry, I checked it again and it also works for the wrapped
version with the same css. The result is below.
I just made it too complicated before.
Thank you very much.
Michal
body, input, select {
font-family:Helvetica,Arial,sans-serif;
font-size: 12px;
}
select, input { border: 1px solid gray; }
form action=Submit method=post
p
label
Sex
select id=sex
option value=MMale/option
/select
/label
label
Date of Birth
input id=date type=text value=Date of Birth /
/label
/p
/form
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
Hello everybody, I have a problem that is driving me nuts! I am trying to insert a horizontal spry navigation bar in Dreamweaver. The code is below: div ul id=MenuBar1 class=MenuBarHorizontal lia href=#Home/a/li lia href=#About Us/a/li lia href=#How to Help/a/li lia href=#News/a/li lia href=#Contact Us/a/li /ul /div Originally, I got the widgets to be white fonts on a green background (created with an image). On hover, the fonts were green on white background. It worked just fine! I do not know what I did, but the white background on hover doesn't show any longer. I went carefully, many times through the .css properties of all the tags. They look fine. The .css properties for the on hover are green font on white background, as they should. Why doesn't it show in Live view? It shows green font on the green (created with the image) background, i.e., one can barely see the fonts. Does anybody have any ideas where I should look for the problem? Thanks! Ada __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
Ada Elgavish wrote: Does anybody have any ideas where I should look for the problem? I think that, as this is a CSS list, and as you have a CSS problem, you should share with us your CSS as well as your HTML; a little fragment of HTML, with no context and no CSS, is really of very little use at all ... Philip Taylor __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
On Wed, Oct 27, 2010 at 5:24 AM, Michal Čizmazia cim...@gmail.com wrote: How can I align the input and select form elements in my test case, so that their horizontal borders are aligned and all text including labels is aligned to the baseline? What exactly do you want to do? Do you want the fields stacked on top of each other? Then put each in a p (or other block-level element like div/div). form action=Submit method=post p labelSexselectoption value= selected=selectedSex/option/select/label /p p labelDate of Birthinput type=text value=Date of Birth //label /p /form __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
On 10/27/10 3:40 PM, Tim White wrote:
On Wed, Oct 27, 2010 at 5:24 AM, Michal Čizmaziacim...@gmail.com wrote:
How can I align the input and select form elements in my test case, so
that their horizontal borders are aligned and all text including
labels is aligned to the baseline?
What exactly do you want to do? Do you want the fields stacked on top
of each other? Then put each in ap (or other block-level element
likediv/div).
form action=Submit method=post
p
labelSexselectoption value=
selected=selectedSex/option/select/label
/p
p
labelDate of Birthinput type=text value=Date of Birth //label
/p
/form
... or simply unwrap the inputs from the labels and add this rule:
label { display: block; }
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
