Here is my site: http://smartpeopletalkfast.co.uk/ppp/home-page.html
I want the input forms to be the same height as the buttons to their right. I\'ve done this with a m
Allow me to offer a different approach. This is your goal, as stated:
I want the input forms to be the same height as the buttons to their right.
Plus, there is a condition of allowing for text resizing, as stated:
still be usable if the text size was set to greater than this height
Knowing that, my suggestion is to base the height on EMs. Use EMs to define the container height of the input and the button, then set the heights of the input and button to be 100%. This way, as the user resets their font size (from smallest to largest), the container will grow and shrink, and the input / button will grow and shrink with them.
I've mocked up a simple example at the following url: http://jsbin.com/oguze5/2/edit
Things will need to be changed for styling purposes, but the general idea / concept is pretty sound.