homepage Welcome to WebmasterWorld Guest from 54.167.144.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE6+7 ignores bottom margin of contained float:left element
Is there fix that doesn't require extra hacks or mark up?
webapp

10+ Year Member



 
Msg#: 3831884 posted 2:11 am on Jan 22, 2009 (gmt 0)

Hi, I've searched for a fix for this and I was surprised that this hasn't been discussed a lot more.

I have a <div> float:left (with a bottom margin) inside a container that has been "clearfixed." IE ignores the bottom margin of the float:left <div> but if I float:right, IE applies the bottom margin. I'm guessing there is no easy fix but I thought I'd post to see if I've missed something obvious.

I've isolated the problem here:

<style>
.top { background:#0f0; zoom:1; }
.top:after { clear:both; content:"."; display:block; height:0; line-height:0; visibility:hidden; }
.floatleft { background:#0c0; float:left; height:100px; margin:10px; width:100px; }
.floatright { background:#090; float:right; height:100px; margin:10px; width:100px; }
.next { background:#030; margin-bottom:20px; }
</style>

<p>1 div, floated left (bottom margin ignored in IE):</p>
<div class="top">
<div class="floatleft">margin: 10px;</div>
</div>
<div class="next">&nbsp;</div>

<p>1 div, floated right (bottom margin not ignored in IE):</p>
<div class="top">
<div class="floatright">margin: 10px;</div>
</div>
<div class="next">&nbsp;</div>

The following hacks solve the problem:

  • Use padding-bottom instead of margin
  • Use relative positioning and extra top margin to fake the bottom margin
  • Add mark up (<div style="clear:both;" />) instead of using CSS-only clearfix

Is there a better fix that doesn't require the use of the above listed hacks?

I've also tried:
.top { overflow:hidden; }
.top { display:inline-block; }
.top { height:1%; }
etc. but none force containment of the bottom margin for a float:left <div>.

Any help is appreciated!

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3831884 posted 4:51 am on Jan 22, 2009 (gmt 0)

While my first idea was that both the clearfix doesn't do a thing in IE, (:after is not supported), that it might be collapsing margins due to order etc (it's none of those obviously).
If you just swap left and right on the floats in the css, the problem shifts along.

I stopped trying to find logic in the IE bugs/features (MSFT won't fix them - only make new browsers IE8 is going to save us they claim this time).

The easiest solution I know is to use a conditional comment, throw in all the IE fixes to get the visual representation you seek -even without knowing why IE does what it does (it's a bug, if anybody has a way to find the error in the logic it's the one with the source code in front of his/her nose, but since they won't fix the problem, who really does need to care?)- and forget about the deviant browser.

I'd avoid giving any of the code need to fix the display in IE ("hacks" if you call them like that, or workarounds if you prefer to reserve the term hack for things exploiting the selector bugs only) to compliant browsers and IE8 (it's still promised to be fully compliant, let's take them on their word).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved