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>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;
}The form (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.3">http://www.w3.org/TR/REC-html40/interac ... tml#h-17.3</a><!-- m -->) 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.
form {
padding: 0;
margin: 0;
}Originally posted by Paul Jr
The form (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.3">http://www.w3.org/TR/REC-html40/interac ... tml#h-17.3</a><!-- m -->) 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.
form {
padding: 0;
margin: 0;
}
wouldn't his .searchForm class have fixed that already?Originally posted by samij586
wouldn't his .searchForm class have fixed that already?
No, since the class isn't applied to the <form> tag itself.ah, Misread the orig, makes since now.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.Originally posted by Paul Jr
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.
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...Originally posted by samij586
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...
Yup, my thoughts exactly.
Though the height thing would probably work, it's overly complicated and completely unnecessary!
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
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>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;
}The form (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.3">http://www.w3.org/TR/REC-html40/interac ... tml#h-17.3</a><!-- m -->) 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.
form {
padding: 0;
margin: 0;
}Originally posted by Paul Jr
The form (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.3">http://www.w3.org/TR/REC-html40/interac ... tml#h-17.3</a><!-- m -->) 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.
form {
padding: 0;
margin: 0;
}
wouldn't his .searchForm class have fixed that already?Originally posted by samij586
wouldn't his .searchForm class have fixed that already?
No, since the class isn't applied to the <form> tag itself.ah, Misread the orig, makes since now.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.Originally posted by Paul Jr
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.
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...Originally posted by samij586
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...
Yup, my thoughts exactly.
Though the height thing would probably work, it's overly complicated and completely unnecessary!
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 elementThanks for your help everyone