CSS clearfix problem with Firefox 2 and SeaMonkey

Question

I am using yaml for layout and famous clearfix css to make sure container with floats get extended.

Everything works fine with Firefox 3, IE6, IE7, IE8, Opera 9 and Google Chrome, but I have issue with Firefox 1, Firefox 2 and SeaMonkey. The problem is that clearfix container gets extended too much, as you can see on the website:

http://www.slagalica.tv/game/mojbroj

Here are screenshots of Firefox 2 and Firefox 3 rendering.

Update: Screenshots on BrowserShots.org

Unfortunately, stats show that more than 10% of my visitors are using FF2, so I cannot simply ignore the problem. I tried removing or tweaking some parts of clearfix CSS, but no matter what I do, the timer DIV (green) is separated by a large margin from the rest of the page.

Does anyone have an idea how to solve this?

Update2: I finally gave up and put TABLE tag and solved the issue in few minutes. So, don't try to look into HTML source - problem is not evident anymore.

Internalcombustion

Answer 1

Seems like this is a bug, and is fixed in newer versions. However, to maintain compatibility, tables have to be used instead of CSS.

Internalcombustion

Answer 2

So if you look at the original article that promotes clearfix on positioniseverything, you will note that the author recommends that since the fix is out of date the reader should look at an article on sitepoint. This sitepoint article points out a method which I have been using for a long time now.

Very simply if you give the parent overflow: hidden and make sure it has 'layout' in IE then this will clear the internal floats.

<div id="wrapper">
     <div id="leftcol">
          Text
     </div>
     <div id="rightcol">
         text
     </div>
</div>

and then the corresponding CSS:

#wrapper{
  overflow:hidden;
  width: 100%;
}
#leftcol{
  float:left;
  width: 50%;
}
#rightcol{
  float:right;
  width: 50%;
}

In the above example I have used width: 100% to give layout to IE, but you could just as easily use zoom: 1 or height: 1% if you would rather.

Try replacing clearfix with this technique and your problem should be solved.

Things to bear in mind with this technique, be careful of your internal widths otherwise you may get clipping and it is important to override the wrapper in your print stylesheet as overflow: visible otherwise it will only print the first page. but I have been using this method in production successfully for years now and I have never had any unresolvable issues with it.

Tergiversate

Please note that my general page layout works (they way you suggest), but that is not the problem. Try opening the URL I gave in Firefox 2 and in Firefox 3 or IE to see the real problem. In the right column I have a set of SPANs that need to float (otherwise I don't know how to create "boxes" without using tables) and I enclose those in additional DIV to ensure proper spacing. Problem is that Firefox 2 assigns much more space than SPANs are using, and I cannot figure out why. – Physiognomy

Answer 3

clearfix is just a hack for the lazy or obsessive purist. Put a clearing div where you need it (at the bottom of your div) and get on with life.

<div>
   ... floated content ...
   <div style="clear:both"></div>
</div>

BTW. Purist who claim this breaks semantics are incorrect. The HTML specification defines no semantic meaning for <div>. At worst it mixes style/structure but it's hardly a burden to remove when the site is redesign in the future and a pure css solution becomes practical.

Calcar

But if I do it like that, the flow of content gets 'broken'. Care to take the HTML of the page at URL I gave and show how exactly would you do it? – Physiognomy

@SpliFF: There are plenty of valid reasons why you would want to use clearfix instead of a inline div. Your div adds 30 bytes per div you are adding, and makes maintenance an hell. A particular class needs clearing always, you can simply add it to your CSS using the clearfix method and be done with it. Much more easy to maintain, and a lot less headaches. But then again, maybe I'm just an obsessive purist... – Dildo

And the HTML specification defines a <div> (and <span>) as generic containers... I don't see that <div> contain anything. – Dildo

confession: I am an obsessive purist :) - however there is actually semantic meaning to div, it is a division of the page. On occaision there are layouts that cannot be solved using the overflow hidden or the clearfix technique (which have simmilar applications - albeit the clearfix technique is outdated). On those occaisions a clearing element is needed, however, using a div is overboard, it is not a division of a page here. why not use a 'br' element with the style clear: both. Call a spade a spade, its an ugly hack use a presentational element to do so. – Tergiversate

Answer 4

I looked at it using browsershots, and I'm trying really really hard to figure out what the difference between it in FF2, 3, and chrome is. I'm not seeing it.

Looking at your page though, why not do something along these lines?

 <div id='wrapper'>
      <div id="leftcol">
           Text
      </div>
      <div id="rightcol">
          text
      </div>
      <div id="foot">
           text
      </div>
 </div>

And the CSS:

 #wrapper{
      min-height:1%; //to fix IE6 floats escaping ancestor div
 }
 #leftcol{
      float:left;
 }
 #rightcol{
     float:left;
 }
 #foot{
 clear:both;
 }

Oringa

Maybe browsershots is doing something to it. Here are the screenshots: slagalica.tv/firefox2.jpg and slagalica.tv/firefox3.jpg – Physiognomy