CODEWITHSUNDEEP
htmlcssalignment
Ilja
Ilja

Reputation: 46479

<input type="submit"> Having issues with alignment

So I was styling a contact form on my website And I ren into an issue with "Send button", for some reason has margin/is aligned more to the right than needed. You can see that in other 2 sections brown buttons are aligned correctly, but in third contact section that brown send button is aligned more to the right than needed, I have no idea on what is causing it...

Here is css that affects that button (button has id="msgSend"):

.inner-trio a, #msgSend {
    color: #fff;
    padding: 3px 0;
    margin: 7px;
    display: block;
    border-radius: 5px 5px 6px 6px;
    background-color: #6a2c10;
    text-shadow: 1px 1px #471d0a;
    text-align: center;
    border-bottom: 4px solid #381201;

}

.inner-trio a:hover, #msgSend:hover {
    background-color: #853815;
    border-bottom: 4px solid #5b2005;
    cursor: pointer !important;
}

.inner-trio a:active, #msgSend:active {
    background-color: #6a2c10;
    border-bottom: none;
    margin-top: 11px;
}

Upvotes: 1

Views: 747

Answers (3)

Denny Mueller
Denny Mueller

Reputation: 3615

Easiest way to solve this should be, to add:

#msgSend { margin: 0px;}

to your css.

Upvotes: 3

sandeep
sandeep

Reputation: 92803

The problem is that you define margin:7px to your form & input. If you want desire result then write like this:

input[type="submit"]{
 margin-left:0;
}

Upvotes: 3

Billy Moat
Billy Moat

Reputation: 21050

You have the width of all input elements set to 100% plus you have 7px margin on your input button. There's your problem :)

Upvotes: 2

Related Questions