Welcome to WebmasterWorld Guest from 54.225.31.78

Forum Moderators: not2easy

Message Too Old, No Replies

CSS form button not horizontally aligned

messed up in FF

     
9:11 pm on Nov 27, 2009 (gmt 0)

10+ Year Member



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?

<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>
10:02 pm on Nov 27, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is one option, You'll likely get others; maybe <surprisingly banned word>ing vertical-align:

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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month