The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Most Sensible Way to Make Button and Form Height Match?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #44709

    []( “”)

    Obviously, I could just manually set the height on each – but it would be nice for the heights to adjust to matching automatically if I change the font size.

    Is there a way to achieve this without using javascript to expand height within the div?


    Set the height in ems?


    Form field rendering is darn inconsistent. Firefox makes the button 2px too high, Chrome instead makes it a few pixels smaller in both width and height.

    Anyway, this should give somewhat consistent results:

    It looks identical in Firefox, Chrome, IE10 and Opera 12, but it uses one magic number hack thanks to Chrome.


    Have you tried `box-sizing: border-box` to make them look identical? I’ve made some test once and posted results somewhere (I thought as comment in issue tracker for normalize.css but can’t find it again), but border-box seemed to fix inconsistencies in addition to usual normalize stuff.


    That’s a nice way to make button and form height match in CSS. I don`t like the way in HTML.


    @CrocoDillon: I see no difference atleast in Firefox with that.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.