SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Spain
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie and float margin/padding doubling issue

    hello all

    Just come across a problem regarding extra margin and/or padding within ie on my divs. Ok its not a major problem in respect to my layout but id like to get it sorted.

    After doing some reading I have discovered that ie has issues with doubling padding/margin after floats, looked at the display inline fix but it doesnt seem to work and im not sure what to apply it to within my code:

    Code:
    /* Footer Section                         */
    #res-navigation-bottom {
    padding:0px;
    margin-bottom:20px;
    }
    
    #res-navigation-bottom .left {
    float:left;
    width:20%;
    }
    
    #res-navigation-bottom .center {
    float:left;
    clear:right;
    width:60%;
    text-align:center;
    }
    
    #res-navigation-bottom .right {
    float:right;
    width:20%;
    text-align:right;
    clear:right;
    }
    
    #res-pages {
    text-align:center;
    clear:both;
    }
    Code:
    <div id="res-navigation-bottom"><div class="left">&lt; Previous Page</div><div class="center">Page x of x</div><div class="right">Next Page &gt;</div></div>
    <div id="res-pages">1 2 3 4</div>
    <div class="reserved">&nbsp;</div>
    with the code as it is the res-pages div appears much further down in ie, i have tried the fix but it doesnt seem to make a difference :|

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The code above looks the same to me in firefox and in ie (unless I'm missing something obvious).

    The double margin-bug will not affect your layout because you have no margins on the float for it to affect anyway

    The only problem you may get is ie's rounding error when the screen is resized which can sometimes make a float drop when the floats add up to exactly 100% as ie rounds them to be bigger. However it seemed ok when I tested your code.

    Perhaps you can re-test the code you posted and expand a bit more on the problem

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Spain
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers for the reply, managed to get my computer fixed this weekend and have been having a crack at it today

    think i found the problem (well not really a problem just my mis-understanding)

    i was applying the margin to the container of the two floats ie was adding the margin/padding from the bottom of the two floats whereas firefox was adding it from the top of the container as it only contained floated elements inside it..... i think

    would this be the correct conclusion?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sounds like a good conclusion. Mozilla will often collapse margins when the element has no border and takes its margin from the next element up. (Mozilla also has a top margin big where in some cases it inherits the margin of its child element and can be a pain to overcome.)

    Margins on floats are not supposed to collapse but the margin on a container containing floats could be upset if the floats haven't been cleared then mozilla will think the container is empty so the margin doesn't apply from where you expect.

    Paul


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
  •