IE margin-top weirdness
Enthusiast
Posted: Fri, 2008-05-16 18:56
For some reason, my margin-top property will not affect the margin-top behavior of my floated object (my footer div) in Opera or FF, but will in IE 6. To get the desired effect, I've had to adjust the margin-top attributes of the three objects within this object. Not a big deal.
In the code below, I've commented-out the margin-top attribute in question (margin-top: 125px) so the page won't look weird in IE6.
My question: why this phenomenon?
/* Beginning of Footer */
#footer {
clear: both;
/* margin-top: 125px; */
margin-bottom: 25px;
margin-left: 232px;
font: bold 50% verdana, sans-serif;
line-height: 1.5em;
text-align: center;
}
.webmaster_left {
float: left;
margin-top: 22px;
margin-bottom: 15px;
margin-left: 25px;
color: #330033 !important;
}
.webmaster_right {
float: left;
margin-top: 22px;
margin-left: 30px;
color: #330033 !important;
}
a.footer_contact {
float: left;
display: block;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 4px !important;
margin-left: 30px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #FF4500;
}
/* End of Footer */<!-- Beginning of Footer -->
<div id="footer">
<div class="webmaster_left">
Current Web Docs
</div>
<div class="webmaster_right">
last modified
<script type="text/javascript">
lastUpdated()
</script>
</div>
<a href="webmaster_email_form.html"
class="footer_contact">
Contact Webmaster
</a>
</div>
<!-- End of Footer --> CSS n00b
Enthusiast
Posts: 201
Joined: 2008-03-16
Sorry, for no better answer
Posted: Sat, 2008-05-17 03:52
http://csscreator.com/node/29752
Enthusiast
Posts: 120
Joined: 2007-12-19
must be misunderstanding
Posted: Sat, 2008-05-17 04:28
If you refer to the question I asked on my last thread, you answered it perfectly. (Float them left worked.)
In regard to this above question, I was only curious as to why FF and Opera won't render a margin-top for the larger, containing float, but IE 6 will. Still trying to fathom the secret world of IE. Thanks for all previous help.
PS, the page looks fine, as the floated divs margin-top DOES render (in all three that I've checked). I'm satisfied for now, but am curious.
CSS n00b
Moderator
Posts: 5577
Joined: 2005-02-22
(1) Always give a whole
Posted: Sat, 2008-05-17 07:10
(1) Always give a whole page, preferably a link to a whole page. In most cases its not possible accurately explain what is happening without the complete HTML and CSS. Other CSS elements maybe applicable to the elements you are interested in. Other HTML may also be having an effect. In this case both apply. By its very nature clear is attempting to clear earlier floated content, you haven't included that earlier content in your snippet.
(2) clear is an action that applies to inline content. It doesn't affect the top/left position of block elements. To see what I mean put a background on your footer. In fact to see what is happening in a page/browser, get used to temporarily putting vividly contrasting backgrounds on elements.
(3) IE6 wierdness particularly applies to floats. To get IE6 and other browsers to behave more similarly use overflow:hidden rather than clear. overflow creates a new display context which forces it to contain its own floated children and completely avoid any external floated content. Note, be careful with overflow if you have specified height (when it might not be such a good idea).
On Having Layout | The One True Layout | menus by listamatic
Enthusiast
Posts: 120
Joined: 2007-12-19
thanks
Posted: Sat, 2008-05-17 15:22
Tony,
Thanks for all above tips. Sorry I forgot the url. (Not relevant now, since you've answered the question, but anyway, it's
comprehensiveforestry.com
Especially thanks with the information regarding clear: vs. overflow: and for tips re. using contrasting colors to test float behavior.
Best day!
CSS n00b
Moderator
Posts: 5577
Joined: 2005-02-22
Tony ?
Posted: Sun, 2008-05-18 01:28
Tony ?
On Having Layout | The One True Layout | menus by listamatic
Enthusiast
Posts: 120
Joined: 2007-12-19
sorry about that
Posted: Sun, 2008-05-18 19:43
Sorry Chris, I didn't even realize I had written "Tony" instead of your name. Unconscious gaff on my part. Again, thanks for the help.
CSS n00b