Floats are buggy in Firefox--not an IE bug this time

[randaldesign]

I can't show you the markup because the project is still under-wraps, but I've got a situation where floats behave as expected in all the browsers except FireFox. (Safari, IE)

In some instances, my floats refuse to 'shrink-wrap' to the contents, as floats are wont to do. In just these couple of environments, the floats will take up 100% of parent width, and they force other contents to another line. (I've confirmed the behavior by observing that all browsers display the same when I specify 100% width in CSS)

And I can't hack by using inline instead because they need to float to right. It works to give it a max-width, but I can't commit to a maximum in this very fluid layout.

Ever heard of this FireFox bug?

[David Laakso]

Ever heard of this FireFox bug?

Yes, it is known as the "I can't show you the markup or css because the project is still under-wraps bug."

1/ Is the document valid html and valid css?
2/ What operating system are you seeing the bug in?
3/ Have you confirmed the bug is seen in more than one operating system?
4/ What version of Firefox exhibits the bug?
5/ Have you confirmed the bug is seen in other versions of Firefox. If so, what versions?
6/ Have you stripped the file to the point that only shows the bug in Firefox?
7/ Have you checked to see if a bug report has already been filed to bugzilla . If so, is the bug being worked on.
7 If you have stripped the file to the point that only shows the bug (in other words you are not giving out any client secrets) in Firefox, why are you not able to post the stripped test version to this forum?

[drhowarddrfine]

Then we can only guess. By any chance is the element causing a problem floated within a float?

[randaldesign]

"Does it validate?" That's not an answer, that's a sig file.
The correct answer is: "No I've never heard of any float bugs in FireFox."
----
Now here's the data you've long awaited. I boiled it down, and this is what happens: if a right-floated element contains strictly right-floated children, then it goes 100% width, and any elements which precede or follow will clear.

That's the bug (or rather, "Special Rendering Feature" because as we all know, only IE has bugs). I apparently discovered it myself because nowhere on the web does the string "FireFox Float Bug" return anything. It happens in every Mozilla I've tried, and it doesn't happen in any IE or WebKit

You can't nest right-floats inside a right-float? Maybe there's some semantic reason for which that is not recommended and I'm a dumbass for thinking of it.

Now I'm sure you will all be able to quote the sacred text where this has long been documented. Like maybe it's in the CSS1 spec and Safari didn't follow it correctly.

Here's an example I whipped-up http://randaldesign.co m/firefoxfloatbug .html

[drhowarddrfine]

I'm not following you. Safari and Firefox look nearly the same. IE is the one that's stretched 100%, which is wrong.

If you told me it was a right float within a left float then, OK, but no one ever said FF didn't have bugs. It's just that IE is the worst browser on the planet.

[David Laakso]

Here's an example I whipped-up http://randaldesign.com/firefoxfloatbug.html

Mac OS X 10.4.1 FF/3.0.2
Mac OS X 10.4.1 Opera/9.52
Mac OS X 10.4.1 Safari/3.1.2
Mac OS X 10.4.1 WebKit/latest nightly
Win/XP FF/3.0.1
Win/XP Opera/9.60
Win/XP Safari/3.1.2
All the above render the example page the same as this Mac OS X 10.4.1 Firefox/3.0.2 capture .

Mac OS X 10.4.1 SeaMonkey/1.1.12
Mac OS X 10.4.1 Camino/1.6.4
Both SeaMonkey and Camino render the test page the same as this Mac OS X 10.4.1 Camino/1.6.4 capture

At least among all the above browsers on this end, it is perhaps my erroneous assumption that it is Camino and SeaMonkey that may be getting it wrong. Along with IE/6 and IE/7 in a slightly different way.

PS I do not have a pre-FF/3.0.1 browser available to test the example page in.

[randaldesign]

Ok, then: How about Version Roulette? As of the last post, the current truth is, various versions of various browsers either got over this bug or just introduced it.

There. I'll never float right inside a float-right again.

---

My target browsers have been:

IE6 and 7. If anyone is running less than 6, they deserve a wonky layout. Anyone on mac seriously using IE needs a slap in the face. If you open IE 5.5 for Mac and follow the Upgrade link, you get a page on the MS site that says basically, "Use Safari, silly!"

The @import trick probably keeps 5 and below from seeing any CSS at all. And gads, I just want to outlaw 6--but 7 can be even more frustrating because it just came out and is still full of surprises.

And we're coding for Firefox 2, because nobody in the office has installed 3 yet. My browser didn't alert me of a new version--in fact when I opened Firefox 2 on one of our machines just now, it announced, "You now have the most current version of Firefox!"

I'm not noticing any differencebetwe en Mozilla Mac and Windows, other than the usual chunky fonts in totally different sizes.

And Safari 3, which pretty-much includes Chrome.
Didn't Opera start as a for-pay container that emulates IE rendering? So only nerds who also run other browsers will be running it. No need to coddle that one.

So, to summarize my research over the 4 machines available: In the actual layout (the one I can't show you) none of the above had a problem with nested right-floats except FireFox 2. Now that I look at my example, IE 7 does something all its own--but not in the real layout.

Ha! The Web isn't real until there's only one rendering engine. Sure you can wrap it in as many tool packages as you want, but the viewport better be the same. It's the only way it will ever be as democratic as intended. --unless we throw out HTML and decide it's OK to fly a site in pure Flash or PDF. Then my mom could make a WYSIWYG site, and intuitively.

If your page has any complexity, it isn't long before you've opened enough browsers to find a major difference. And then I tell the designers, "Either we streamline this function or it will take some time to work out the kinks." And then I say, "Whatever! I'm paid by the hour!"

Thank you MS for giving me job security!

[David Laakso]

Didn't Opera start as a for-pay container that emulates IE rendering? So only nerds who also run other browsers will be running it. No need to coddle that one.

Code to it, rather than Firefox, and you'll save yourself (and everyone else) a lot of grief and waste of time.