/    Sign up×
Community /Pin to ProfileBookmark

Form field with unwanted margin/padding

Copy linkTweet thisAlerts:
Jul 07.2005

I’m using a search formfield that I want to snug up pretty close to the top of the div containing it. For some reason, though, I can’t get rid of what looks like top and bottom margin on this field (div background is red to highlight the problem – the left margin is intentional). Tried setting them to 0 of course, and setting top and bottom individually. Also tried 1px, but seems the minimum is about 10 or 15 – any less than that and it doesn’t get any closer to the top. The div doesn’t have any padding, so that shouldn’t be it.

Here’s the sample:
[url]http://www.cultivatedesign.org/ecor/test.html[/url]

Any idea why this is?

Also, I seem to have to set this div’s positioning to absolute. If I don’t it pops down to the next line – even though it’s not inside anything with a limited width, and the item preceding it is set to float: left.

Any idea why this is happening?

  • – Bob

    • to post a comment
    CSS

    7 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @bokehJul 08.2005 — Do you know you can do this: top: -10px;
    Copy linkTweet thisAlerts:
    @bunner_bobauthorJul 08.2005 — I'm assuming you mean doing this to the div enclosing the form field and "go" button, not to the form field itself (which does nothing). Of course, now the "go" button is shifted up 10 pixels - though I suppose I can always shift it down.

    Seems like a bit of a workaround though. Isn't there some way to just get the margins around the form field down to zero? Why doesn't this work?
    Copy linkTweet thisAlerts:
    @JayhawkJul 08.2005 — It doesn't make any sense, but I have better luck keeping the form statement outside the <div>. I was having problems similar to what you are experiancing, and I started declaring the form outside the div, defining the form elements inside the div, and then closing the div before closing the form. All the extra space disappeared.

    That absolutely isn't supposed to happen, but...
    [CODE]
    <form method='post' action='dothis.php'>
    <div class='myclass'>
    <input type=text name='Name'>
    <input type=button name='Submit'>
    </div>
    </form>
    [/CODE]
    Copy linkTweet thisAlerts:
    @bokehJul 08.2005 — Is it because you aren't using fieldset and styling that. Could the browser be adding a default fieldset to the form.
    Copy linkTweet thisAlerts:
    @bunner_bobauthorJul 08.2005 — I wouldn't expect that of Firefox and Safari - they're pretty well behaved.

    I tried moving the form tags outside the div, and it got screwed up in a different way.

    Anyway - don't sweat it. I'm going to stick to the tables layout for this site, and wait on CSS until more of the bugs and browser inconsistencies are worked out. I just don't have time to deal with all these hacks and quirks.

    It's been a fun experiment. I am going to stick with CSS for an internal site I did for a company - they're all Mac users on Safari so I don't have to worry about how IE6 is going to screw it up. And I think I can work parts of CSS (besides font styling, margin, etc, which I'm already using) into some sites as long as it works consistently cross-browser.

    Thanks to all the helpful folks on this site who've answered (or tried to answer) my questions.

  • - Bob
    • Copy linkTweet thisAlerts:
    @WebnerdJul 08.2005 — Try settingg your form margin and padding:

    form{

    margin-top:0px;

    margin-bottom:0px;

    }

    input{

    margin-top:0px;

    }

    By default, a form has a margin-top and margin-bottom of 8px or so
    Copy linkTweet thisAlerts:
    @bunner_bobauthorJul 08.2005 — Ahh - now we're talkin'.

    But that wasn't the whole of it. I also needed to put my input field and "go" button in separate divs. Once I did that it was all good. And I didn't need to set the input margin to 0 - just the form.

    Thanks Craig
    ×

    Success!

    Help @bunner_bob spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.27,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...