SitePoint Sponsor

User Tag List

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

    Question Why is IE6 not rendering my bottom margin correctly?

    I have a page that displays perfectly in FF and IE8 but in IE6 (or IE8 compatibility mode) the bottom margin on the last div inside the <body> tag is not displayed.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml'>
     
    <head>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    </head>
     
    <body>
     
    <div id='margin_paint'>
     
    <div id='background_paint'>
     
    <p>This text is huge so you can see that the bottom div does not get 400 pixels of
    margin underneath it.</p>
     
    </div>
     
    </div>
     
    <div id='footer'>
    <div id='middle'></div>
    </div>
     
    </body>
    </html>

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    html {
    	background: #3b5b61;
    }
     
    #margin_paint {
    	background: white;
    	width: 780px;
    	margin: 0 auto 0 auto;
    	padding: 20px 40px;
    }
     
    #background_paint {
    	background: white;
    }
     
    #footer {
    	height: 10px;
    	width: 860px;
    	margin: 0 auto 400px auto;
    }
     
    #footer #middle {
    	background: white;
    	height: 10px;
    	float: left;
    	width: 860px;
    }
     
    p {
    	font: 172px sans-serif;
    }

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well i dont have IE6 but why are using single quotes for id's

    vineet

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some of my html, not this code, is generated by Java and this way I don't have to escape the double-quotes inside of double-quotes in my code. Does it matter?

  4. #4
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    not sure. but try if padding works instead of margin

    Code:
    #footer {
        height: 10px;
        width: 860px;
        margin: 0px auto 0px auto;
    padding-bottom:400px;
    }
    vineet

  5. #5
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have successfully used padding. I just don't understand and can't relate this behavior in IE6 to any known bugs.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,587
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I notice you don't close off some tags in there, such as you don't close footer. Invalid markup leads to nasty results. Make sure your code is valid always
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, I notice you don't close off some tags in there, such as you don't close footer. Invalid markup leads to nasty results. Make sure your code is valid always
    All tags are closed.

    I've never really seen an answer to this problem. Is this a box model issue? It can't be a haslayout issue because the parent has layout. I find this weird and would love an answer to this problem too.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,587
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    AH whoops. Sleep deprivation.

    This is a bug and I have indeed seen this before. I don't have time to fully test though because my internet is about to go kaboom.

    Expect a reply early morning though
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I've had this bug creep up a dozen times as well. However, I've always chosen a workaround, like using padding or - were I to use the OP's code - apply the margin to the body element instead.

    But...instead of working around the problem, I'd much rather understand why IE chooses not to render the bottom margin. It isn't the margin-collapse bug, it isn't haslayout as far as I can tell...I am wondering if anyone knows what is causing it or whether it's one of those IE specific rendering inconsistencies that have no underlying logic to them.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    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)
    ...I am wondering if anyone knows what is causing it or whether it's one of those IE specific rendering inconsistencies that have no underlying logic to them.
    I don't have an explanation for it but I would guess that IE's broken float model is having something to do with this due to the float in the footer.

    If the margin is moved to the float itself it works fine.

    Code:
    #footer {
        height: 10px;
        width: 860px;
        margin: 0 auto;
    }
     
    #footer #middle {
        background: white;
        height: 10px;
        float: left;
        width: 860px;
        margin-bottom:400px
    }
    Of course that would not work if the footer had a BG color/image due to IE6's Expanding Box bug.

    It will also work if there is a clearing element after the footer.

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hmm...however, when you take out the float from the original code, nothing changes, so I'm not sure whether it is linked to the broken float model, given in that scenario there wouldn't be any floats in the entire markup.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    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)
    Quote Originally Posted by kohoutek View Post
    Hmm...however, when you take out the float from the original code, nothing changes, so I'm not sure whether it is linked to the broken float model, given in that scenario there wouldn't be any floats in the entire markup.
    Haa, your right!

    This boils down to the last elements bottom margin being ignored.

    It is just like when you say margin:20px auto; on your wrapper div IE6/7 ignore the bottom margin. I don't think there is an explanation for it other than that's just how IE6/7 handled it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IE Margin Test</title>
    
    <style type="text/css">
    * {margin: 0;padding: 0;}
    
    body {
        background: #3b5b61;
    }
    #margin_paint {
        background: white;
        width: 780px;
        margin: 0 auto;
        padding: 20px 40px;
    }
    #footer {
        /*height: 10px;*/
        width: 860px;
        margin: 0 auto 400px auto;
        background:lime;
    }
    p {font:90px sans-serif;}
    
    .last {
        background:red;
        height:5px;
        font-size:0;
        margin-bottom:400px
    }
    
    </style>
    </head>
    <body>
    
    <div id="margin_paint">
        <p>This text is huge so you can see that the bottom div does not get 400 pixels of
        margin underneath it.</p>
    </div>
     
    <div id="footer">
        <h4>Middle</h4>
    </div> 
    
    <div class="last"></div> 
    
    </body>
    </html>

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Bummer.

    Thanks, Ray! I guess it's a waste of time trying to make sense of it.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,587
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yeah, but that explains what we already know; the what rather than the why.

    Thanks anyway, Ryan!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,587
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if in IE, if the bottom margin touches the bottom edge of the body element then the margin will be ignored. An empty element, such as a <br> right before the body element c loses cna fix this. Just something that clashes between the body and the margin.
    Code:
    <div id='footer'>
    <div id='middle'></div>
    </div><br>
    </body>
    I don't think there is a pure CSS fix for this . This is just IE6 being IE6.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •