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:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/test.html">http://www.cultivatedesign.org/ecor/test.html</a><!-- m -->
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?
- BobDo you know you can do this: top: -10px;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?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...
<form method='post' action='dothis.php'>
<div class='myclass'>
<input type=text name='Name'>
<input type=button name='Submit'>
</div>
</form>Is it because you aren't using fieldset and styling that. Could the browser be adding a default fieldset to the form.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.
- BobTry 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 soAhh - 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
Here's the sample:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/test.html">http://www.cultivatedesign.org/ecor/test.html</a><!-- m -->
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?
- BobDo you know you can do this: top: -10px;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?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...
<form method='post' action='dothis.php'>
<div class='myclass'>
<input type=text name='Name'>
<input type=button name='Submit'>
</div>
</form>Is it because you aren't using fieldset and styling that. Could the browser be adding a default fieldset to the form.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.
- BobTry 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 soAhh - 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