Unequal Widths

Reg Wharf · Apr 25, 2016

Hi Guys
Got a submission form but the submit button is wider than the input/textarea.
Any ideas?

CSS

form {
max-width: 300px;
float: left;
margin: 40px 0;
padding: 10px 20px;
background: #34495e;
}

h3{
font-size: 20px;
font-family: roboto;
font-weight: 700;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 10px;
}

input[type="email"],
textarea,
select {
border: none;
font-size: 16px;
font-family: roboto;
height: auto;
margin: 0;
outline: 0;
padding: 10px;
width: 100%;
background: #fff;
color: #000;

}

button {
padding: 10px;
color: #fff;
background: #ed5565;
font-size: 16px;
font-family: roboto;
text-align: center;
font-weight: 700;
width: 100%;
border: none;
margin: 0 0 20px 0;
}

fieldset {
margin-bottom: 10px;
border: none;
}

label {
font-size: 18px;
font-family: roboto;
display: block;
margin-bottom: 8px;
color: #ff0;
}
HTML

<form action="index.html" method="post">

<h3>Sign Up</h3>

<fieldset>

<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">

</fieldset>

<button type="submit">submit</button>

</form>

Thanks in advance

Domain Forum

Adam H · Apr 25, 2016

Try this :

Code:

h3 {
    color: rgb(255, 255, 255);
    font-family: roboto;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding: 10px 0;
    text-transform: uppercase;
}


fieldset {
    border: medium none;
    margin: 0;
    padding: 0;
}

button {
    background: rgb(237, 85, 101) none repeat scroll 0 0;
    border: medium none;
    color: rgb(255, 255, 255);
    font-family: roboto;
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0 20px;
    padding: 10px;
    text-align: center;
    width: 100%;
}

Many browsers naturally add the following attributes to fieldsets so you need to zero them to override the browser defaults:

Code:

fieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}

Source : http://www.w3schools.com/tags/tag_fieldset.asp