ie and float margin/padding doubling issue

[kibblerok]

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:

/* 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;
}

<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 :|

[Paul O'B]

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

[kibblerok]

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?

[Paul O'B]

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