CODEWITHSUNDEEP
htmlcssformsjsfiddle
Keyfer Mathewson
Keyfer Mathewson

Reputation: 1075

Spacing in web-forms

I'm having a little bit of an issue trying to space and line up a form using HTML/CSS.

I've posted the jsfiddle below.

I'm trying to line up the submit button, with the border of the email submit form.

Thanks!

http://bit.ly/1embiFX

HTML

<form target="_blank" class="validate" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" method="post" action="#">
<input type="email" value="[email protected]" onblur="if (this.value == '') {this.value = '[email protected]';}" onfocus="if (this.value == '[email protected]') {this.value = '';}" id="mce-EMAIL" class="required email" name="EMAIL">
<input type="submit" onclick="_gaq.push(['_trackEvent', 'Sign Up', 'Click', 'Mailing List Address Entered']);" id="mc-embedded-subscribe" name="subscribe" value="JOIN" class="submit button">
</form>

CSS

form {
    margin: 0;
    font-family: 'Merriweather', serif;
    height: 75px;

}
input.email {
    width: 60%;
    height: 75px;
    font-family: 'Merriweather', serif;
    padding-left: 30px;
    font-size: 18px;
    color: #c89808;
    border: 2px solid #000000;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: transparent;

}

input.email:focus {
    outline: none;
}

input.submit {
    width: 20%;
    margin-left: -5px;
    margin-top: 50px;
    font-family: league;
    font-size: 30px;
    color: #efbe2a;
    height: 75px;
    background: #000000;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    letter-spacing: 0.05em;
}

Upvotes: 0

Views: 137

Answers (2)

Arif Khan
Arif Khan

Reputation: 67

Try this-

input.submit {
width: 20%;
margin-left: -5px;
margin-top: 50px;
font-family: league;
font-size: 30px;
color: #efbe2a;
height: 81px;
background: #000000;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: none;
letter-spacing: 0.05em;
position:relative; 
top:4px;
}

Upvotes: 0

EdiSainer
EdiSainer

Reputation: 112

Simply change height and add vertical align for input.email class

height: 69px;
vertical-align:top;

Working demo : http://jsfiddle.net/edisutrisno/8V8dg/3/

Upvotes: 2

Related Questions