Forums

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
    Posts
  • #44709
    siouxfan45
    Participant

    [http://codepen.io/anon/pen/DHEko](http://codepen.io/anon/pen/DHEko “”)

    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?

    #134802
    Paulie_D
    Member

    Set the height in ems?

    #135251
    Merri
    Participant

    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: http://codepen.io/Merri/pen/uHzls

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

    #135259
    CrocoDillon
    Participant

    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.

    #135265

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

    #135280
    Merri
    Participant

    @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.