/    Sign up×
Community /Pin to ProfileBookmark

Losing extra white space after a form

Copy linkTweet thisAlerts:
Mar 17.2004

Can anyone help me?

How do i get rid of the extra line break that appears under the form in this code? Any ideas greatly appreciated

<style type=”text/css”>

.headerContainer {
color:#000;
background-color:#fff;
border : 1px solid Gray;
}

.header {
height: 90px;
}

.rightLogo {
float: right;
height: 76px;
width:211px;
border : 1px solid Lime;
padding : 0px 0px 0px 0px;
margin : 0px 0px 0px 0px;
}

/* search form */

.searchForm {
float : right;
padding : 0px 0px 0px 0px;
border : 1px solid Red;
width : 160px;
margin-bottom : 1px;
}

.searchFormBox {
border : 1px solid #000066;
font : Verdana, Arial, san-serif;
font-size : 11px;
color : #000066;
}

.searchFormButton {
border: #000066;
background-color : #000066;
color : #FFFFFF;
font : Verdana, Arial, san-serif;
font-size : 10px;
font-weight : bold;
padding : 2px;
}

</style>

</head>

<body>
<div class=”headerContainer”>
<div class=”header”>
<div class=”rightLogo”>
<div class=”searchForm”>
<form action=”” name=”search” id=”search” title=”Product search form”>
<input type=”text” name=”searchTerms” value=”Product search” class=”searchFormBox”>
<input type=”submit” value=”Go” class=”searchFormButton”>
Advanced Search
</form>
</div>
</div>
</div>
</div>

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamMar 17.2004 — Assuming you're not in quirks mode, I would image the space is being caused by the inputs, try adding this to you css:

input{

margin:0px;

padding:0px;

}
Copy linkTweet thisAlerts:
@Paul_JrMar 17.2004 — The [FONT=courier new][url=http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.3]form[/url][/FONT] element is a block-level element, and has some default padding and margin applied to it. So setting the padding and margin to 0 will solve your problem.
<i>
</i>form {
padding: 0;
margin: 0;
}
Copy linkTweet thisAlerts:
@SamMar 17.2004 — [i]Originally posted by Paul Jr [/i]

[B]The [FONT=courier new][url=http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.3]form[/url][/FONT] element is a block-level element, and has some default padding and margin applied to it. So setting the padding and margin to 0 will solve your problem.

<i>
</i>form {
padding: 0;
margin: 0;
}
 [/B][/QUOTE]
wouldn't his .searchForm class have fixed that already?
Copy linkTweet thisAlerts:
@Paul_JrMar 17.2004 — [i]Originally posted by samij586 [/i]

[B]wouldn't his .searchForm class have fixed that already? [/B][/QUOTE]
No, since the class isn't applied to the [FONT=courier new]<form>[/FONT] tag itself.
Copy linkTweet thisAlerts:
@SamMar 17.2004 — ah, Misread the orig, makes since now.
Copy linkTweet thisAlerts:
@Paul_JrMar 17.2004 — Though, if he set the height of that class to something that was just enough for all the form elements to fit in, it would solve the problem, too, I believe.
Copy linkTweet thisAlerts:
@SamMar 17.2004 — [i]Originally posted by Paul Jr [/i]

[B]Though, if he set the height of that class to something that was just enough for all the form elements to fit in, it would solve the problem, too, I believe. [/B][/QUOTE]
Unless he were using proper semantic markup (ie. labels) with his form, in which case he'd have to worry about text size, I'd say the margin/padding solution is better...
Copy linkTweet thisAlerts:
@Paul_JrMar 17.2004 — [i]Originally posted by samij586 [/i]

[B]Unless he were using proper semantic markup (ie. labels) with his form, in which case he'd have to worry about text size, I'd say the margin/padding solution is better... [/B][/QUOTE]
Yup, my thoughts exactly.

Though the height thing would probably work, it's overly complicated and completely unnecessary! ?
Copy linkTweet thisAlerts:
@stu20001authorMar 17.2004 — Ahhh - of course. I had tried setting the margin property as you could see but I realise now I was setting it to the wrong element

Thanks for your help everyone
×

Success!

Help @stu20001 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.20,
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,
)...