I have a div (FrontPageHeader) that contains another div (FrontPageSearch). I want FrontPageSearch to be right justified in FrontPageHeader and down about 15px.
<div id="FrontPageHeader">
<div id="FrontPageSearch">
<strong>Search Local Businesses:</strong>
<form action="something" name="FrontPageSearchForm" id="FrontPageSearchForm" method="get">
<input type="text" value="Business Name or Keyword(s)" size="30" />
<input id="GoButton" src=http://www.webdeveloper.com/forum/archive/index.php/"<{$smarty.const.APP_WWW_PATH}>/i/go.gif" alt="GO" type="image" />
</form>
</div>
</div>
body,html {
font-size: 12px;
font-family: arial;
width: 750px;
margin-left: auto;
margin-right: auto;
}
#FrontPageHeader {
margin-top: 0px;
height: 300px;
background: url(../i/FrontPageHeader.jpg) no-repeat top left;
}
#FrontPageSearch {
margin-top: 15px;
margin-left: 500px;
width: 245px;
}
The problem is that instead of pushing FrontPageSearch down and leaving FrontPageHeader where it is, FrontPageHeader gets pushed down 15px. I realize I could probably overcome this with some relative positioning, but I am wondering why this isn't working? Is there a better way to do it?
FYI, the problem appears in Firefox but not IE 6.
Thanks.Change margin to padding:#FrontPageSearch {
padding-top: 15px;Change margin to padding:#FrontPageSearch {
padding-top: 15px;
I know I could do that, but is there a reason that margin doesn't work?Collapsing margins (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins">http://www.w3.org/TR/REC-CSS2/box.html# ... ng-margins</a><!-- m -->)
imho I believe browsers do not interpret the specification correctly and the W3C should not have included it in the first place.Collapsing margins (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins">http://www.w3.org/TR/REC-CSS2/box.html# ... ng-margins</a><!-- m -->)
imho I believe browsers do not interpret the specification correctly and the W3C should not have included it in the first place.
Thank you. Now I know, AND KNOWING IS HALF THE BATTLE, GI....never mind
<div id="FrontPageHeader">
<div id="FrontPageSearch">
<strong>Search Local Businesses:</strong>
<form action="something" name="FrontPageSearchForm" id="FrontPageSearchForm" method="get">
<input type="text" value="Business Name or Keyword(s)" size="30" />
<input id="GoButton" src=http://www.webdeveloper.com/forum/archive/index.php/"<{$smarty.const.APP_WWW_PATH}>/i/go.gif" alt="GO" type="image" />
</form>
</div>
</div>
body,html {
font-size: 12px;
font-family: arial;
width: 750px;
margin-left: auto;
margin-right: auto;
}
#FrontPageHeader {
margin-top: 0px;
height: 300px;
background: url(../i/FrontPageHeader.jpg) no-repeat top left;
}
#FrontPageSearch {
margin-top: 15px;
margin-left: 500px;
width: 245px;
}
The problem is that instead of pushing FrontPageSearch down and leaving FrontPageHeader where it is, FrontPageHeader gets pushed down 15px. I realize I could probably overcome this with some relative positioning, but I am wondering why this isn't working? Is there a better way to do it?
FYI, the problem appears in Firefox but not IE 6.
Thanks.Change margin to padding:#FrontPageSearch {
padding-top: 15px;Change margin to padding:#FrontPageSearch {
padding-top: 15px;
I know I could do that, but is there a reason that margin doesn't work?Collapsing margins (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins">http://www.w3.org/TR/REC-CSS2/box.html# ... ng-margins</a><!-- m -->)
imho I believe browsers do not interpret the specification correctly and the W3C should not have included it in the first place.Collapsing margins (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins">http://www.w3.org/TR/REC-CSS2/box.html# ... ng-margins</a><!-- m -->)
imho I believe browsers do not interpret the specification correctly and the W3C should not have included it in the first place.
Thank you. Now I know, AND KNOWING IS HALF THE BATTLE, GI....never mind