Figured out another pesky bug on sfadb.com yesterday. There was some weird problem with the formatting on the various award ‘overview’ pages; the main paragraph in slightly larger font was somehow left-justified, with the smaller-font detail paragraphs appearing along the right, where they should have appeared directly below. (Example here, though the problem has been fixed now.) They didn’t appear like this when I first set them up. What changed?
As I said in a previous post, the thing about math and computer science is that when you see a bug, you can investigate and *always* figure it out, eventually. So: for this bug, I traced back the css tags. I make sure what I’m looking at is the latest, posted versions of the css files. I capture local versions of a typical file containing the bug and the css files, and begin editing experimentally. If I change the font size in this css tag, do I see it on the local page linking that css file? Well yes. Or no…. No?? Why not??
Long story (well, an hour’s story) short: in setting up the anthology pages in the last few weeks, I’d ‘overloaded’ a css tag; I’d defined ‘overviewintro’ twice in two different css files, and the one with a 60% wide left float was taking precedence. (This is what you see on the anthology overview pages, like this one, where the intro text is to the left, with a cover image to the right.)
To fix it, I edited the htaccess file on the server (a file with no extension, which makes it difficult to edit locally and upload), to include the sfadbanthologies.css file in those files that are exempt from redirects out of the /db subdirectory (so that when you’re looking at any sfadb.com/author page, you don’t realize the author page is actually in the /db subdirectory). And removed the css tags for anthologies that I’d temporarily placed in the top level sfadb.css file.
Odd thing is — css files are supposedly *cascading* style sheets. You can reference one or two or more css files from any given .html or .php file, and I’d always thought the idea was that the browser would acknowledge the first one, then the second, and so one, and if any css tags were redefined in second or later files, well, the browser would take that into account and redefine those tags in descending order. That was the whole idea of ‘cascading’ style sheets.
Yet, as I investigating this problem in various browsers, I discovered that Google Chrome displayed the pages just fine, while Firefox and IE did not. I’ve concluded that Firefox and IE do not process the sequence of cascading style sheets in the way I thought they were intended to be processed. Hmm.
Safest solution, of course, is to never overload a tag; always use a different tag definition, even in files you don’t think will ever challenge each other.
