revenge of the css

Well, I’m still hard at work revising the entry page for SCLRR. I have a number of variations, here, here, here, and here. Of course there’s the usual stuff in dealing with a committee of people and a plurality of decisions. We’ll get there. Also the switch over between a shell account with a redirect for the domain (sooo late nineties…) to an actual hosted domain has gone fairly smoothly, although I expect I shall shortly hear from a multitude of volunteers who had their computers memorize their passwords so that they’ve long since forgotten what they are…

The real story is in those drop down menus. I got the idea from A List Apart which has a gorgeous css only (well mostly) drop down menu styling. It seemed like this would be the perfect solution to so many links as on the old one.

Oh dear. That “mostly” contains a drama in of itself. Because it seems that most browsers do just fine with the css definitions which basically involve defining the display to none for the li containers in the ul list (really, really elegant) and then changing the display back to block on hover.

Except of course our dear old friend Internet Explorer 6 doesn’t do hover when it’s not a link. Pish. So there’s a little javascript hackery that rewrites the hover routines on the fly for IE6. All well and good, I snarfed the css file examples, integrated them into the css and js files and went about happily buffing and polishing the newindex page.

Of course, the astute reader will recall that not only do I use Firefox, but I also work on Linux (Ubuntu, and yes I’m ecstatic that Dapper Drake comes out tomorrow, though I’ve been using the Dapper Beta for the last month and titch) so he or she will spot the looming cliff that I am oblivious to. I am also dealing with a crew of very non tech people, so they are all using IE6 hands down.

And of course it turns out that the dropdowns aren’t working at all in IE6. Figuring a conflict between css elements from the original css file with the new stuff, I copied just the example over and sure enough that worked. So I slowly added in all the decorative elements: the background, border, table, finally the multiple column…and it all works!!

So why doesn’t it work on the index?? I start to add in the actual copy (bidding farewell to the trusty lorem ipsum) piece by piece and it finally dawns on me that the javascript for the slideshow is conflicting with the javascript for the hover rewrite. At first I thought it was due to some IE6 weirdness about mixing inline and external js (the slideshow has some elements that must be inline because the perl script generates the values on the fly) but that wasn’t the case. I finally tracked it down to a conflict over the onLoad in windows. Seems that IE6 doesn’t like two of them. When I combined the calls in a single function, it demonstrated its further fussiness by working only when the two were called in a certain order. (I tested this in IE7, by the way, and it worked without the javascript: hallelujia, praise the lord and pass the ammunition.)

So, it was very wrong of me to blame all the problems on the css. I’ve learned that lesson…

del.icio.us:revenge of the css  digg:revenge of the css

Leave a Comment

Bad Behavior has blocked 752 access attempts in the last 7 days.