Mozilla, clearers, and dropped floats

I’ve come a cross a very strange bug in late Mozilla builds. It seems to have spread to the latest Camino nightlies as well as to Firefox RC 1, so this could cause major layout problems for *a lot* of sites that use floats and clearing elements. And many CSS driven layouts do.

This does not happen in Firefox 1.0 PR or Camino 0.8, so it must be something that’s been introduced recently. I’ll look into filing a bug report at Bugzilla, but I thought I’d post about it here to make others aware of potential problems.

The problem occurs when you have a layout where a cleared element is followed first by a floated element and then by a non-floated element that has been given a large margin, which is a very common way of making a two-column CSS-based layout.

Giving focus to a link (by tabbing to it) inside the non-floated element makes it drop below the floated element. Resizing the window makes it jump back up.

I’ve made a minimal testcase to let you check it out for yourself.

It is clearly (pun intended) connected to the clearing element before the float. Removing that element (or just the clear rule) fixes the problem.

Anyone else run into this? I haven’t seen or heard of this bug (it has to be a bug, right?) before. Like I said, I’ll look into submitting this to Bugzilla, but I don’t know the exact procedure for doing so.

Update: It seems that I was wrong about Firefox – this behaviour only occurs in Mozilla and Camino.

Update (2004-12-27): The bug that caused this behaviour has been fixed in recent builds. Bug 261153 confirms this. Great!

Posted on November 3, 2004 in Browsers, CSS

Comments

  1. That’s not good… Keep us posted on your bugzilla report, it’s definately something that should be fixed.

    -Shade

  2. Don’t forget, “If you do find regressions from the Preview Release, please file bugs in Bugzilla and nominate them as Firefox 1.0 blockers using the ‘blocking-aviary1.0?’ flag on the bug.”

  3. That’s a deliberate change to better follow the standard. See the discussion in bug 266402.

  4. November 3, 2004 by Roger Johansson (Author comment)

    Umm. Where does it say that an element should drop below a float if a link is given focus? ;-)

    Don’t have time to read through the comments on that bug and the related one right now, but it looks like I’ll need to rework the HTML structure of several sites to avoid this.

  5. I cannot replicate this at all: using Firefox 1.0 PR on Windows XP SP2!

    That is, nothing “drops” when I tab to a link in the right-hand column.

    Or, have I misunderstood?

  6. Sorry: I misread your post - you already stated that it’s fine in PR1.

    Forgive me - too much coffee! ;-)

  7. I just tried this using the Nightly Build from 10/31 (1.0RC2) on WinXPSP2 and did not notice the dropping when I tabbed to the links in the sidebar.

  8. November 3, 2004 by Roger Johansson (Author comment)

    Jeremy: Correct. It seems to be gone from the latest nightly of Firefox. Wonder if it was ever there - I may be mistaken on that point.

    The problem is definitely there in the latest nightlies of Mozilla and Camino though. Camino and Firefox are a little tricky to check since they don’t let you tab from link to link (why?), but just visiting this site will show if the browser suffers from it or not - the whole sidebar drops.

  9. I’m using: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.3) Gecko/20041029 Firefox/1.0RC1

    Nope, no jumping occurs when tabbing thru links.

  10. This is probably covered by bug 261153, “Click a link, move a link”: https://bugzilla.mozilla.org/show_bug.cgi?id=261153

    I can reproduce your problem in Mozilla 1.8a4/Linux, but not in Firefox RC2-20041030/Linux.

  11. November 3, 2004 by Roger Johansson (Author comment)

    Per: Right, that looks like the bug. Hope it gets fixed before Firefox is infected with it ;)

  12. Yeah, I also found something like that. If you go to http://delta.jero.net/template_0.3.html and go to View > Page Style > No Style and then switch to View > Page Style > Delta Boards: Default, you see the table caption at the bottom of the table. Refreshing or changing the browser’s size will make it pop back, but it’s weird.

    :goes to Bugzilla:

  13. Your file works correctly on the latest Firefox nightly build [Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.3) Gecko/20041101 Firefox/1.0RC2], and Mozilla 1.8a5 nightly, all running on OS X 10.3.5, I wonder if there is something related to the recent fix for Bug 148994 on the Firefox branch builds (which is not available in Firefox 1PR), I haven’t investigated your file yet.

  14. A recent build of Camino (what would be 0.8.2), doesn’t show any problems either.

    PS - to enable tabbing through links in Camino, add this to your user.js (found in Library - Application Support - Camino) user_pref(“accessibility.tabfocus”, 7);

  15. November 4, 2004 by Roger Johansson (Author comment)

    Philippe: I tried the same Mozilla build (1.8a5 nightly, 20041103) and the sidebar drops when I tab to the links in it. This is on Mac OS X 10.3.5. Can something else be involved here?

    Thanks for the tip about enabling tabbing through links in Camino - anyone know if there is something similar for Firefox?

  16. November 4, 2004 by Roger Johansson (Author comment)

    Re: Camino. Same thing as Mozilla for me. Downloaded the latest nightly. What are we doing differently?

  17. I’m using the recently released RC2 and no jumping behavior seen on the testcase: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041103 Firefox/1.0RC2

  18. November 4, 2004 by Roger Johansson (Author comment)

    KevinN: I just tested RC2 as well, and Firefox seems to be OK, which is a good thing considering that it’s the most widely used Gecko browser.

    Oh, and in case anyone wants to be able to tab between links in FF, see Philippe’s tip in comment #14 — it works in FF too.

  19. Oops, now I see it as well. I was using an older build for Mozilla (1.8a4). Obviously only happens on the 1.8a5 trunk; Gecko 1.7x (Firefox) and Gecko 1.8a4 do not have that problem. Better file a bug report there. That shouldn’t happen. (and let us know the number :-)

  20. November 4, 2004 by Roger Johansson (Author comment)

    Philippe: I can definitely reproduce the behaviour in Moz 1.8a4 (Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8a4) Gecko/20040927).

  21. Is there a possibility that this could be a Mac-only problem?

  22. November 6, 2004 by Roger Johansson (Author comment)

    Jeremy: Nope. I just checked, and it’s there in the latest Mozilla for Windows (1.8a5, 20041105). See comment #10 for Linux confirmation.

  23. Has anyone posted a proper bug about this?

  24. November 9, 2004 by Roger Johansson (Author comment)

    Tom: Yes. See bugs 261153 (Click a link, move a link) and 260938 (mozdev’s pages’ middle-column drops below left column). The latter is very similar to what happens on this site.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.