Tearing My Hair Out
The image above, for those of you with web coding backgrounds, shows why I\’ve been tearing my hair out the last few days. I\’ve been working on a small web site for one of my wife\’s co-workers who is starting up her own business. Its been a decent project so far, the client is nice and communicative and her design needs are minimal (at least, compared with the demands of doing web work for architects and design aesthetes).
Until, that is, I started to mess with rounded corners. Then, all hell started breaking loose. After several days of looking at screen shots from half a dozen browsers, consulting the collective wisdom of the InterWeb, and hacking together CSS styles, I\’ve come up with the image above – the site works decently in FireFox, Opera, Safari, and IE 7 – which isn\’t surprising, and frankly wasn\’t all that hard. Older versions of IE, however, are insisting on finding new ways to fail to round corners. As it is, I\’ve had to sacrifice a bit of semantic purity in the name of getting enough hooks to hang corner images on. Thank the heavens for the sliding doors technique.
The good news is that even with all of this browser trickery, the pages all validate completely (XHTML and CSS), seem to pass muster with the various accessibility requirements, and are projected to load in under 8 seconds on a 56K dialup connection. So the promises I made the client are in no jeopardy.
Now, if only I can get rid of these friggin\’ tails.
(somewhere in the back of my head is the scientist from Kids in the Hall: Brain Candy, getting drug down a corridor screaming \”It was only a couple of flipper babies!\”)
As a postscript, if I get a chance I may write up something about a technique I started using and then abandoned that makes use of the CSS clip property to use one image to handle all four rounded corners (and both hover states) on an element. I thought it showed promise, but had to abandon it tonight for various unsatisfying reasons.