I wanted a cancel <a> link and a form submit button to be EXACTLY the same height. I spent a long time racking my brain over this, trying so many things. I could get it right in one browser, for the other to be a couple pixels too tall or short.
Anyway, I finally did it. Now this seems like a lot of code, so it could probably be condensed, but if anyone else has had the same problem; here it is
My actual code differs slightly, but this is it in essence.
I wanted a cancel <a> link and a form submit button to be EXACTLY the same height. I spent a long time racking my brain over this, trying so many things. I could get it right in one browser, for the other to be a couple pixels too tall or short.
Anyway, I finally did it. Now this seems like a lot of code, so it could probably be condensed, but if anyone else has had the same problem; here it is
My actual code differs slightly, but this is it in essence.
@alexmccabe, don't mean to nitpick but it looks like your clear button is 1px higher than your submit button :)
Really? Gah, what OS / browser? My actual versions look fine in Webkit (desktop and iOS) and Gecko on both Windows 7 and Mac.
How odd that it doesn't for you. FF on Windows is it?
I updated the Pen, should be good now.
Instead of setting the elements as Blocks and floating, why not use display:inline-block.
Dude you've got quite a lot of unnecessary code in there, I've updated and stripped it down to exactly what is needed.
http://codepen.io/andyunleashed/pen/hociB