SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird float problem

    Hello

    I have this:



    With this CSS code:

    Code CSS:
    .menu {
    float:right;
    text-align:right;
    margin-right:117px;
    display:inline;
    width:100px;
    }
     
    .webdesign{
    margin:20px 0 150px 22px;
    padding-top:50px;
    }
     
    .maincontainer{
    width:953px;
    margin:auto;
    }

    and:

    HTML Code:
    <div class="maincontainer">
          <div class="menu">
            <ul>
              <li><a onclick="$.scrollTo( '#aboutscroll', 800);">&Agrave; Propos</a></li>
              <li><a onclick="$.scrollTo( '#contactscroll', 800);">Contact</a></li>
              <li><a href="portfolio.php">Portfolio</a></li>
            </ul>
          </div>
    
          <div class="webdesign">
            blablabla
          </div>
    [...]
    Firefox: fine.
    IE8: fine.
    IE6/7: the menu doesn't care about the margin-top applied to .webdesign so it's stuck to the image above. Even with a 200px value, it doesn't move.

    I've fixed the problem by applying a padding to the .maincontainer instead.

    But I'd still like to know what caused this!

    Thanks

  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)
    Hi oneday, Welcome to SitePoint!

    Actually the code you posted renders the same in IE6/7 as the other browsers you mentioned. I suspect we are missing some of your code.

    The thing to consider here is that floats are removed from the page flow. Any top margin on an element after the float will be in relation to the static content that is above the float. If there is no content above the float, then the parent container will be the margin's starting point.

    It would be worth your while to read through this article.
    Let’s Be Clear About This!

    That brings up another subject, the clear property. Now, if you were to set clear:both; on your .webdesign div you would see things differently. IE6/7 would actually get it wrong at this point and apply that 20px top margin and good browsers would still let that top margin slide behind the float. The cleared div would actually be below the float in good browsers but the margin would not be visible.

    It is always best to set any margin you need on the bottom of the float.

    Here is how The Specs define clearance ...
    Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge within its parent block. This position is determined after the top margin of the element has been collapsed with previous adjacent margins (including the top margin of the parent block).
    Here is the code you posted set up as a stand alone test case. Be aware also that "haslayout" was not set on the .wedesign div with your code so IE is treating it differently in that aspect also.

    I commented out the clear:both and the haslayout properties. If you break them loose you will see things differently.

    Code HTML4Strict:
    <!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>Margin Test</title>
     
    <style type="text/css">
    .maincontainer {
        width:953px;
        margin:auto;
        overflow:hidden;/*contain inner floats*/
        background:#DDD;
    }
    .menu {
        float:right;
        width:100px;
        height:100px;/*height added for demo only*/
        margin:0 117px 0 0;
        display:inline;/*IE6 margin bug*/
        background:red;
    }
    .webdesign {
        /*clear:both;*/
        margin:20px 0 150px 22px;
        padding-top:50px;
        background:lime;
        /*min-height:0;/*IE7 haslayout*/
    }
    /* html .webdesign {height:1%;}/*IE6 haslayout*/
    </style>
     
    </head>
    <body>
     
    <div class="maincontainer">
        <div class="menu">
            <p>Menu Div</p>
        </div>
        <div class="webdesign">
            <p>Blah blah blah....</p>
        </div>
    </div>
     
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry for the code.
    I've read your links but I'm not sure if it applies as I don't want to clear my floats
    Actually you can see the problem here : http://www.aucuneidee.net/oldindex.html
    margin-top on .webdesign moves the menu but not on IE6/7 :/

    Thanks!

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi onedayiwillrock, Thanks for the link.

    The cause of the differing space in old IE vs good browsers here is the collapsing margins that is not collapsing in IE when the parent has hasLayout.

    You can avoid this also in good browsers by overflow, and then apply the margins where you need them.
    Code:
    .maincontainer{
    width:953px;
    margin:auto;
    overflow:hidden;
    }
    
    .menu {
    float:right;
    text-align:right;
    margin-right:117px;
    display:inline;
    width:100px;
    }
    
    .webdesign{
    padding-top:50px;
    overflow:hidden;
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links

    I used the zoom:1 method and was able to pinpoint the offending div.

    Thanks again


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
  •