Grow your CSS skills. Land your dream job.

Same height button and a link

  • # January 17, 2013 at 3:22 pm

    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](http://codepen.io/alexmccabe/pen/FyAEd “sdgdf”)

    My actual code differs slightly, but this is it in essence.

    # January 17, 2013 at 4:45 pm

    @alexmccabe, don’t mean to nitpick but it looks like your clear button is 1px higher than your submit button :)

    # January 18, 2013 at 4:53 am

    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.

    # January 18, 2013 at 5:48 am

    Instead of setting the elements as Blocks and floating, why not use display:inline-block.

    # January 18, 2013 at 6:06 am

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".