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="sex">Sex</label>
<select id="sex"><option value="M">Male</option></select>
<label for="date">Date 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/
