This is a tricky way but works in the same way in the FF2-3 and IE6-7.
It totally depends from font-size of the form elements, that must be represented with pixels.
The font-size of the form elements is inherited from the UA setting and must be set implicitly. What does it mean?
The default UA setting for font-size is 16px, but for the form elements this 16px is the line-height and the font-size is 83.35% (13.3333px) of this value.
If you instantiated the font-size for the body: 75% of the UA setting (12px if default is 16px), the font size of the form elements is still 13.3333px.
But if you set the UA font-size for example: 18px; the font size of the form elements will be 15.33px, and the line-height will be 18px.
Font size (px) | Value of the 'height' (px) |
8 | 19 |
9 | 20 |
10 | 21 |
11 | 22 |
12 | 23 |
13 | 24 |
14 | 25 |
15 | 26 |
16 | 28 |
<div class="line"> <img src="images/print.png" /> <input type="button" value="Input Button" /> <span class="spn">Span</span> <select><option>Select</option><option>second</option></select> <button>Button</button> <input type="submit" value="Input Submit" /> <img src="images/print.png" style="height:20px;" /> <input type="text" value="Input Text" /> </div> <style> .line{background:beige;} .line input, .line select, .line button {font:size:13px;} .line input,.line select,.line button,.line img,.line span{vertical-align:middle;} </style>
Now I want that my <div class="line"> has for example the height: 40px.
The font-size of the form elements is: 13px, their height is: 24px. To make the height of the 'div class="line"' 40px I calculate: (40px - 24px) / 2 = 8px.
This 8px value I need to use for the padding-top and the padding-bottom of the <div class="line">.
<style> .line{background:beige;padding:8px 1em;} .line input, .line select, .line button {font:size:13px;} .line input,.line select,.line button,.line img,.line span{vertical-align:middle;} </style>
See the screen shot with the Firebug and the Developer Tool calculated value of the '.line height'.