Select and Text Input Heights in Firefox

Good evening,

I am trying to align two forms in one line, the first one a select field (site selection) and the second one a text field (search).

I do not intend to apply any CSS styling to the select or the text field, but I use the same image button as the submit button (GO).

-------------- ------ ------------ ------
| SELECT v | | GO | | SEARCH | | GO |
-------------- ------ ------------ ------

Basically, everything is supposed to be "in line" (same height).

HTML:


<div id="header_selections">
<form method="post" action="">
<select class="header_formfield">
<option>Option 1</option>
<option>Option 2</option>
</select>
<input type="image" src="" />
</form>
</div>

<div id="header_selections">
<form method="post" action="">
<input type="text" class="header_formfield" />
<input type="image" src="" />
</form>
</div>

CSS:


#header_selections {
 float: left;
 height: 55px;
 padding-left: 70px;
 padding-right: 0px;
 display: inline-block;
}

.header_formfield {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 13px;
 height: 20px;
 width: 180px;
}

The problem is that the text field is 2px higher than the select field in FF (it's also higher in IE, but let's focus on FF first). I checked with FireBug (-> Computed), and the select field shows "box model height: 20px", border-top/bottom/left/right: 0". It still shows the standard "border" you would expect when using unstyled form elements (I want to keep that standard border). The text field also shows "box model height: 20px", but also shows border-top/bottom/left/right: 1px". Even though it shows exactly the same standard border as the select field. So with the top and bottom 1px borders, the actual height is 22px, and thus the layout out of line.

Any ideas? Is this a FF problem, or related to something in my code?

I appreciate your help.

Cheers, Chris

<html> <head> <title>Test Form</title> <style type="text/css"> #header_selections { float: left; height: 55px; padding-left: 70px; padding-right: 0px; display: inline-block; } .header_formfield { font-family: Arial,Helvetica,sans-serif; font-size: 13px; height: 20px; width: 180px; } </style> </head> <body> <form method="post" action=""> <select class="header_formfield"> <option>Option 1</option> <option>Option 2</option> </select> <input type="image" src="" /> <input type="text" class="header_formfield" /> <input type="image" src="" /> </form> </body> </html>

Select and Text Input Heights in Firefox

Lupi

TheKiller

Lupi

TheKiller

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week