CODEWITHSUNDEEP
htmlcssforms
milk
milk

Reputation: 434

Text input 1px bigger than submit

I have a form located here: http://capeanntunaclub.com/form/index.html

The problem is that the email input box adds a 1px border to the top and bottom, in relation to the submit button. Both are set at 30px height, yet the input field shows up as 32px.

How can I fix this? I added this code to the input field, but it made no difference: 

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Any help would be greatly appreciated! :)

Upvotes: 1

Views: 1509

Answers (3)

Michael
Michael

Reputation: 7374

Personally, I have found setting the height of form elements causes problems, let the height be auto and mess with the padding.

Also set vertical-align: baseline for both elements, it makes the bottom edge of the text for each element line up.

http://jsfiddle.net/6ofxugv0/

HTML

<form>
    <input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Enter your Email" />         
    <input class="button" id="mc-embedded-subscribe" type="submit" name="subscribe" value="JOIN THE CLUB" />
</form>

form {
    text-align: center;
}

CSS

#mce-EMAIL {
    font-size: 14pt;
    width: 422px;
    color: #FFF;
    text-indent: 40%;
    background-color: #75AA9F;
    font-weight: bold;
    letter-spacing: 2px;
    border: 0;
    background: url(http://www.capeanntunaclub.com/form/images/catcbg2.png) repeat;
    background-color: ;
    display: inline-block;
    vertical-align: baseline;
    padding: 3px 0;
}

#mc-embedded-subscribe {
    width: 160px;
    background-color: #76A9A0;
    color: #FFF;
    border: 0;
    font-weight: bold;
    letter-spacing: 1.5px;
    display: inline-block;
    font-size: 14px;
    vertical-align: baseline;
    padding: 7px 0 4px;
}

::-webkit-input-placeholder {
   color: white;
}

Upvotes: 0

Marcel
Marcel

Reputation: 683

CSS's box-sizing: border-box is probably what you're looking for. http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

note: for Firefox there still is a vendor prefixed version -moz-box-sizing

Upvotes: 5

Dan
Dan

Reputation: 9468

Tuna Club...looks cool!

Seems like adding style="height:28px;" fixes the issue for you:

<input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Enter your Email" value="" style="height: 28px;">

It looks like you have some padding being added automatically to the input, so event though the button is 30px tall, the input at 28px plus padding lines up properly.

Upvotes: 1

Related Questions