View Full Version : How do I troubleshoot a CSS display problem in Firefox that resolves on reload?

May 29th, 2009, 02:44 AM
I've been working on a site for several weeks now and still can't fix a really awful display problem, only viewable in Firefox:

You may not see the issue at first, but try clicking on other top-level nav items and you'll see it. The list which comprises the nav gets broken up, and I cannot for the life of me understand why. This problem only occurs in product, not my local machine. To make it more frustrating, the nav appears perfectly when you reload the page! I've messed around with my css and tracked down every firefox css bug I could find. I even tried throwing in a javascript call to automatically reload the page just once and that doesn't fix it.

How on earth do I go about troubleshooting this further? I'm at my wit's end.

May 29th, 2009, 03:08 AM
I had no idea ordering could be so important, but evidently it is, even when elements are uniquely identified.

Here's the scoop. In my CSS files, I listed the classes for my navigation after the classes which handled my headers and a few other bits. I moved them to the top, just under body and the basic text formatting classes and, voila!

Now, I don't know why Firefox is so delicate about this sort of thing. Frankly, it ticks me off a little. But I think I figured it out and that's all that matters.

(Hopefully) Resolved.

May 29th, 2009, 04:30 AM
That was not the problem at all but related to giving size to the images. Giving negative padding values doesn't help either (invalid).