Forum Moderators: not2easy
<form>
<input class="input_text" type="text" style="height:40px" value="some text">
<select style="height:40px">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="submit" value="Search" style="height:40px">
</form>
1) I wrapped the contents of the form in a <div> and give it relative positioning.
2) This set up the absolute positioning of the input[submit]. The margin-left: is just an extra flourish with which to have a little extra control.
3) Note that the <select> presentation is going to vary in FF, Opera, and IE, so you'll want to be sure that you are okay with the variances; some of which you will just have to live with. Browsers love to assign their own formatting to form elements and that can be a real hassle. They should stay out of it.
4) Your declared heights in form elements may not be followed quite as you would think. Something to watch for and adjust for. Form element rendering can be screwball.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>
</head>
<body>
<form action="">
<div style="position: relative;">
<input class="input_text" type="text" style="height:40px" value="some text" />
<select style="height: 40px;">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="submit" value="Search" style="height: 40px; position: absolute; bottom: 0; margin-left: 10px;" />
</div>
</form>
<!--##########
OK here is what I found out, when I assign height to all my form elements, they will not be aligned horizontally, when **they actually should**.
Chrome rendered this OK, FF pushed the form button too far up. Is there an elegant solution to this?
-->
</body>
</html>
