SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 doesn't show top margin of a cleared div

    Hi all,

    My first post on this forum but not my first visit to this site.

    I've a problem with IE6 not respecting a top margin of a cleared div, containing floats, that has a absolute positioned div above it. All is wrapped in a fieldset.

    It looks like the top margin of the cleared div is collapsing with it's parents, the fieldset, but then if I would exaggerate the top margin on the cleared div it should show, if I am correct. And it's parent has a border so that shouldn't be the case.

    On the other hand, it looks like the cleared div doesn't get cleared correctly. When I put a empty div (no styling, margins, padding) between the absolute positioned div and the cleared div the top margin will show.

    I think, I could work around it but would like to know what really is happening here. And I would like to know if there a fix so IE6 respects my top margin or a best practice to use? Can someone give me some pointers?

    Firefox and Opera show the page correctly.

    My minimal case:

    HTML (couldn't put the whole doctype in here since it contains an url and rhat is not permitted to post because this is my first post. The used doctype puts IE6 in standards mode.)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
       <head>
      	<title>Test</title>
    		<link type="text/css" rel="stylesheet" href="CSS/C.css" />
    		<style type="text/css">
    
      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
    
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    	.clearfix 
    	{
    	 zoom: 1;
    	 }
    	
    	</style>
    <![endif]-->
     </head>
     <body>
       <form>				
    	<fieldset class="fieldsetType1">
    	 <div class="header_style1">
    	      <h2>HeaderContent</h2><p>test</p>
    	 </div>
    	 <div class="divContentType1 clearfix">
    	      <p>
      		<label for="input1">Label1:</label>
      		<input type="text" id="input1" name="input1" />
     	      </p>
    	      <p>
    		<label for="input2">Label2:</label>
     		<input type="text" id="input2" name="input2" />
     	      </p>
    	 </div>
           </fieldset>						
        </form>	
     </body>
    </html>
    CSS:
    Code:
    /*reset margins and padding except for form controls*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td
    	{
    	margin: 0px;
    	padding: 0px;
    	} 
    
    body
    	{
    	color: #5F5F5F;
    	background: #FFFFFF;
    	font-style: normal;
    	font-size: 12px;
    	font-family: 'Lucida Grande', Verdana, Sans-serif;
    	line-height: 220%;
    	}
    
    /*fieldsets*/
    
    fieldset.fieldsetType1
    	{
    	border: 2px solid #BBBBBB;
    	margin-top: 40px;
    	margin-bottom: 5px;
    	background-color: #E6E6E6;
    	position: relative;
    	}
    
    /*divHeaderstyling content*/
    
    div.header_style1
    	{
    	border: 2px solid #BBBBBB;
    	border-bottom: none;
    	padding: 0px;
    	position: absolute;
    	left: -2px;
    	top: -18px;
    	font-size: 12px;
    	font-weight: normal;
    	line-height: 12px;
    	color: #5F5F5F;
    	background-color: #FFFFFF;
    	}
    	
    div.header_style1 h2, div.header_style1 p
    	{
    	float: left;
    	display:inline;
    	}
    	
    div.header_style1 h2
    	{
    	color: #5F5F5F;
    	background-color: #BBBBBB;
    	padding: 1px 8px;
    	font-weight:normal;
    	font-size: 12px;
    	}
    	
    /*divContentType-styling*/
    
    .divContentType1
    	{
    	margin: 15px;
    	}
    	
    .divContentType1 p
    	{
    	float: left;
    	width: 50%;
    	}
    Thanks in advance and hope someone can help me ,

    Jeroen,

    The Netherlands

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It looks like the top margin of the cleared div is collapsing with it's parents, the fieldset, but then if I would exaggerate the top margin on the cleared div it should show, if I am correct. And it's parent has a border so that shouldn't be the case.
    Hi Jeroen,
    Yes, you are correct. With a top border or padding on the parent it will uncollapse the margin. The problem seems to be the AP'd div.header_style1. You mentioned setting an empty div in between as a test and I see that it works, when the AP'd div is completely removed it works too.

    If I set a float on it instead and lift it up with a negative margin your 15px top margin on .divContentType1 will be respected. I'm not sure if it is important that it be AP'd but I would float it if I were you and your design allows it.

    Code:
    div.header_style1
        {
        position:relative;/*ie6 needs this when shifting out of parent with negative margins*/
        float:left;
        margin: -18px 0 0 -2px;
        border: 2px solid #BBBBBB;
        border-bottom: none;
        padding: 0px;
        font-size: 12px;
        font-weight: normal;
        line-height: 12px;
        color: #5F5F5F;
        background-color: #FFFFFF;
        }
    And for good measure I would make these additions and changes also.

    Code:
    .divContentType1
        {
        margin: 15px;
        clear:left;
        }
        
    .divContentType1 p
        {
        float: left;
        width: 49.5%;/*keep under 50% to prevent IE rounding errors*/
        }
    You can find some further reading on collapsing margins here -
    http://reference.sitepoint.com/css/collapsingmargins
    http://www.search-this.com/2007/05/0...ne-or-why-111/
    http://www.search-this.com/2007/09/0...ar-about-this/

    Hope that helps

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    IE doesn't have collapsing margins hwen in haslayout mode- so just giving it hasslayout is a quick fix .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    IE doesn't have collapsing margins hwen in haslayout mode- so just giving it hasslayout is a quick fix
    It has been given haslayout with zoom in the internal css of the posted html

    Code:
    <!--[if lt IE 8]>
    <style type="text/css">
        .clearfix 
        {
         zoom: 1;
         }
        
        </style>
    <![endif]-->
    Code:
    <div class="divContentType1 clearfix">

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    THen how is it collapsing the margin?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    THen how is it collapsing the margin?
    Read my post and then run some test of your own.

    As I said, when the AP div is completely removed the top margin reappears.

  7. #7
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks al lot for helping me out, guys!

    I will look into this again tonight since it's now 7:30am local time here in The Netherlands (and have to go to work but couldn't wait to see if anyone had responded).

    @RyanReese: yes, I know that hasLayout should uncollapse things but It doesn't seem to work in this case.

    It even looks like the opposite is true:

    If I remove the clearfix and with that hasLayout on that div, IE6 respects my top margin but not the one at the bottom as it should.

    If I keep the clearfix and unfloat the paragraphs in it (and with that the need to clear the parent div), I loose my top margin but the bottom margin returnes. It looks like the clearfix and therefore hasLayout partly triggers this behaviour in IE6.

    @Rayzur: thanks for your suggestions. Your right about the AP and removing it, shifting it with relative positioning (will test that tonight, thanks ) or put an extra div in there, would bring back the top margin with the bottom margin respected.

    I couldn't find any documentation on the web why (or what) IE6 is doing this when an AP is present next to a div with hasLayout (as looks to be the case). Do you know any links I could look into that even mention this behaviour?

    I will try your suggestions tonight, thanks again, but I would really like to know what is happening here in IE6.


    Jeroen

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Oh, this is a bug.
    When explicitly setting margin-top on an in-flow hasLayout immediately-preceding sibling of an absolutely positioned element whose parent is hasLayout with a non-zero padding-top or border-top, IE6 ignores this margin (treats it as 0) unless the absolutely-positioned sibling is the last in a consecutive sequence of any number of arbitrarily ordered floated and AP siblings of which at least one is a float.

    Either switch up the source of the HTML or remove the haslayout trigger, the clearfix...yea.

    It's not a well documented thing since not many people know about it..but I do .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Llike tihs
    Code:
    <body>
       <form>				
    	<fieldset class="fieldsetType1">
    	 
    	 <div class="divContentType1 clearfix">
    	      <p>
      		<label for="input1">Label1:</label>
      		<input type="text" id="input1" name="input1" />
     	      </p>
    	      <p>
    		<label for="input2">Label2:</label>
     		<input type="text" id="input2" name="input2" />
     	      </p>
    	 </div><div class="header_style1">
    	      <h2>HeaderContent</h2><p>test</p>
    	 </div>
           </fieldset>						
        </form>	
     </body>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't resist pressing "refresh" one more time before going to work.

    Thank you for explanation and will look into it tonight!

    Jeroen

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I went to your profile and I was literally praying that you would refresh lmao.

    Your welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys!

    Thanks a lot for helping me (a lot),

    @RyanReese: Your definition of the bug is right on and when I saw your solution, I remembered the bug you mention but at the time I read about it I didn't grasp the idea why it/what happened and now I do!. Thanks again!

    @Rayzur: Thanks for your input and I think I go this way because it's more semantically right in my view: a header should be before the paragraph that's it about.
    I think I'll put it in a separated stylesheet for IE6 with the rules you showed me because semantically seen it should be an AP element in my view and not a relative positioned one because it should be like the legend-element (although that can bring up another discussion).

    Leaves me with the question about the clear: left you proposed. Why should I add it?

    Thanks again for helping me out,

    Jeroen

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajzvz View Post
    Hi guys!

    Thanks a lot for helping me (a lot),

    @RyanReese: Your definition of the bug is right on and when I saw your solution, I remembered the bug you mention but at the time I read about it I didn't grasp the idea why it/what happened and now I do!. Thanks again!
    Your welcome . It made perfect sense to me why it was collapsing once you guys said it had haslayout.
    @Rayzur: Thanks for your input and I think I go this way because it's more semantically right in my view: a header should be before the paragraph that's it about.
    I think I'll put it in a separated stylesheet for IE6 with the rules you showed me because semantically seen it should be an AP element in my view and not a relative positioned one because it should be like the legend-element (although that can bring up another discussion).
    Fine by me..
    Leaves me with the question about the clear: left you proposed. Why should I add it?

    Thanks again for helping me out,

    Jeroen
    To make sure it doesn't snag on the float .header_style1 (I assume)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I think your right, RyanReese

    Thanks again for your(/both) ideas and liked the discussion .

    I've printed it all as addendum to my CSS-books to never forget it.

    36 days until your 18th! pffffhiee, long time ago for me and great to see your enthousiasm.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajzvz View Post
    Yes, I think your right, RyanReese

    Thanks again for your(/both) ideas and liked the discussion .
    By far this hsa been my most favorite thread in a while-it never feels better then to remember a dormant bugg in your memory that is what the person is suffering from..ah..
    I've printed it all as addendum to my CSS-books to never forget it.
    My memory is like that..a book lol
    36 days until your 18th! pffffhiee, long time ago for me and great to see your enthousiasm.
    Lmao yea I can't wait 18 is gonna b so epic xD.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @Rayzur: Thanks for your input and I think I go this way because it's more semantically right in my view: a header should be before the paragraph that's it about.
    I think I'll put it in a separated stylesheet for IE6 with the rules you showed me because semantically seen it should be an AP element in my view and not a relative positioned one because it should be like the legend-element (although that can bring up another discussion).

    Leaves me with the question about the clear: left you proposed. Why should I add it?
    Hi,
    It is not relative positioned, it is shifted up with a negative margin. The relative positioning is there for IE6 as I explained in the comment beside it. The clear:left is not really needed. I used it to drop the divContentType1 down below the header before I shifted it up with a negative margin.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •