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!
- Previous post: Embedding Macromedia Flash in XHTML
- Next post: Uncollapsing Margins
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
That's not good... Keep us posted on your bugzilla report, it's definately something that should be fixed.
-Shade
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."
That's a deliberate change to better follow the standard. See the discussion in bug 266402.
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.
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?
Sorry: I misread your post - you already stated that it's fine in PR1.
Forgive me - too much coffee! ;-)
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.
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.
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.
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.
Per: Right, that looks like the bug. Hope it gets fixed before Firefox is infected with it ;)
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:
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.
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);
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?
Re: Camino. Same thing as Mozilla for me. Downloaded the latest nightly. What are we doing differently?
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
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.
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 :-)
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).
Is there a possibility that this could be a Mac-only problem?
Jeremy: Nope. I just checked, and it's there in the latest Mozilla for Windows (1.8a5, 20041105). See comment #10 for Linux confirmation.
Has anyone posted a proper bug about this?
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.
Sorry, comments are closed for this post.