Gecko and the drowning fish

Seems as though I've stumbled onto a bug in Gecko (HTML rendering engine of Mozilla products), or at least something I believe to be a bug. I can't think of any other reason for the behavior I'm experiencing, it's not possible to purposely style an element to behave this way and other browsers render it just fine. So for all intents an purposes this is a bug, which has the unwanted result of only partially drawing borders on (certain) positioned unordered lists.

Screenshot revealing missing bordersI stumbled upon this bug when styling the drop-down menus for eVirtus!net. The menus are basically a set of lists and sub lists (<ul>) that are moved on or off the visible area of a page according to the desire to displayed a given sub menu or not. Although I use a slightly customized version of the JavaScript (which enables this behavior in IE) and styling to match my site, this is essentially a method for creating CSS drop-down menus called "Suckerfish dropdowns". For more information about the menu method see the original article at ALA or this updated version from the authors.

Missing borders illustrated by colorful linesIf you look at the above screenshot you'll see that the border of the second sub list (<ul>) is clipped at the end of the first sub list, furthermore the top border of the first list element (<li>) is clipped at same place as well. If you can't figure out what I'm talking about take a look at the image to the right, on it I've colorized the border(s) I'm talking about. Correctly rendered borders in green, I've painted a red line where list border should have been while the missing list elements border is represented by a green line. I've tested and confirmed this buggy behavior in versions 0.7.1, 0.8.0, 0.9.3 and 1.0 of TBFKAFB.

I could not find anything on this issue on either BugZilla or MozillaZine, but I'm rather unfamiliar with the bug reporting process of Mozilla movement, so it might just be that I'm missing it. Anyway I guess I'll do a bit more research, both about the bug and the submission process, and submit it on BugZilla in a couple of days. Since this, AFAIK is a previously unknown bug..

Screenshot without the missing borders, using OperaIf you're wondering how this should have looked, the screenshot to the right is the same markup and CSS rendered by Opera 7.60 (Preview 3). The only intentional difference is the side borders of the parent <li> element ("blog [b]"), which if enabled in FireFox brakes the menu completely (haven't looked into this). The code has also been successfully tested it in IE (5.5 and 6.0) as well.

I've prepared a document that demonstrates the above, to make stealing it easy I've included all the necessary code inline. This work is licensed under a Creative Commons License. As always, comments and corrections are very much welcomed!

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.016 seconds...

Errors occurred while generating this page... (More info availible)