CODEWITHSUNDEEP
htmlcssbuttondoctypeline-breaks
Chris
Chris

Reputation: 3025

Removing an unexplainable linebreak below a submit button?

while working on the layout of a simple site I'm doing, I came across a really annoying problem of which I just can't find the cause! I have no idea how to remove the linebreak below my submit button, extending the div which it's in downwards.

I've simplified the page as much as I could, though there may still be some unnecessary elements in there.

Any help would be much appreciated!

Upvotes: 0

Views: 258

Answers (3)

methodofaction
methodofaction

Reputation: 72385

Just add:

form {
   margin: 0;
}

You really ought to use a css reset, there are many good ones, such as the 2011 version of Eric Meyer's reset http://meyerweb.com/eric/tools/css/reset/.

This takes care of all the default unintended margins and paddings that sometimes vary from browser to browser.

Upvotes: 1

derrylwc
derrylwc

Reputation: 826

Your form element has a margin-bottom of 1em, which is pushing its parent div downward by that amount.

Remove the margin and you should be OK.

Upvotes: 2

thirtydot
thirtydot

Reputation: 228162

form {
    margin: 0
}

That's all you need.

Ok, I lied: That's all you need for Firefox/Chrome.

You have this:

<form action="something.php" 1 method="post">
                             ^ get rid of that 1

In IE, you need a modern doctype such as <!DOCTYPE html> to bring it out of Quirks mode.

You should add a doctype anyway.

Upvotes: 5

Related Questions