Membership is FREE – with unlimited access to all features, tools, and discussions. Premium accounts get benefits like banner ads and newsletter exposure. ✅ Signature links are now free for all. Share your own thoughts and experience, accounts may be terminated for violations.
  • Welcome to AcornDomains.co.uk, a friendly community for UK domain investors, developers and anyone interested in domain names.

    Whether you're looking to buy or sell domains, learn more about the UK domain market, get feedback on your names, or simply chat with other domainers, you're in the right place. AcornDomains has been bringing together people from across the UK domain industry for many years, from complete beginners to experienced investors.

    Have a look around, join the discussions and, if you haven't already, create a free account and introduce yourself.

Unequal Widths

Joined
Jun 29, 2009
Posts
126
Reaction score
2
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
 
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%;
}

form.png

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
 
Top Bottom