Herein is the epic account of Jeffren, He who would be The Coder, whom the High Elves called Jeffrindel the Stubborn Headed, who took up keyboard to join with the Dreamweaver and do battle against the dread lich lord IEZilla. Upon the bloody field of Webinor, armed with only his copy of lowly Opera did he thusly accost the monster head on. What follows is a direct account, relayed to an elven scribe directly from Jeffren’s lips, as he lay on the field in the bloody aftermath of battle, his body broken, his keyboard dented, but his spirit unbowed, Opera still gleaming defiantly in his hands. …
I haven’t been blogging lately, as I’ve been preoccupied with a number of things, the future path of my employment not the least among them. But the number one preoccupation for me these days involves the update of this very Web site—not this blog, but the whole site in which it resides. I figure a freelance journalist needs to have a serious Web presence these days, and even though my freelance status may soon change, being a computer geek long before it was cool, I like tinkering with such things.
Well, I did until I embarked on the task of developing a three-column layout that utilizes tabbed navigation, [tag]XHTML[/tag] and [tag]CSS[/tag]. If those two terms mean nothing to you, stop reading now; all that is to follow will no doubt comprise a bunch of boring blah-de-blah blah for you. If you are familiar with what those terms mean, then perhaps you will sympathize with my lamentation.
First off, while I know HTML and understand CSS, my knowledge is more that of the serious hobbyist, compared to someone who works as a Web developer for a living. Previously my professional involvement has been taking code that was developed by an expert and helping tweak it for a specific publication’s purposes, or just playing with the format of a chunk of story posted to a Web site via a corporate content management system, getting it to look right in a browser.
Cooking up something like the existing jeffchappell.com was rather easy; to be honest it was something that I threw up quickly in order to establish a presence back in 2006 when I thought I might be embarking on a freelance career much sooner than I actually did. So the urge to update, and the ensuing ideas have been percolating in my skull for some time now. After playing around with various concepts in InDesign—a seriously kick-butt design tool—I decided I wanted to emulate a newspaper’s front-page design, being a member of the Fourth Estate and all. And I figured it would afford me the opportunity to have some fun and mock not only myself, but small-town papers as well.
Thus our hero did set out to emulate his InDesign creation in XHTML and CSS utilizing Dreamweaver 8. He set forth numerous div tags and CSS, replete with tabbed navigation, and it looked brilliant in Opera, and lo, there was much rejoicing. But lo, again, the dreaded IEZilla, the Non-Standards Compliant Browser Monster, who in the past rarely troubled our hero—except when he needed to check his Yahoo email account–did rear its ugly populist heads, and threaten He who would be The Coder.
As I was soon to discover—as many have before me, getting a three-columned layout accomplished with [tag]div tags[/tag] is not the simplest of tasks. But not ridiculously difficult either, even for the hobbyist. In fact, not having used a WYSIWIG editor for [tag]HTML[/tag] in years, I’ve been impressed with [tag]Dreamweaver[/tag] 8. I find myself frequently still writing code and making changes directly to it and then checking them in a browser, and the CSS code it puts out is a little bloated—not to the point that it would affect performance or anything, just not as tidy as it could be—but on the whole, it is light years ahead of where it was a few incarnations ago. The last time I used Dreamweaver it was called Dreamweaver MX, I believe, and needed it for work, or so I was told. But after using it a short time, I threw in the towel—in a word, “yuck”–and resorted to tinkering with the code by hand.
Anyway, throw in some CSS with the three column layout, along with a header and a footer, and make it look right in three different browsers—[tag]Opera[/tag], Mozilla/Firefox and Internet Exploder—and things get righteously ugly real fast. As I mentioned, I’m hardly the first to deal with this, and surely won’t be the last.
Getting things to look right in Opera isn’t hard. This alternative browser, which is my preferred one, advertises itself as the most standards compliant, and after this experience, I’m inclined to believe it’s true. My early efforts would come out just as I expected when I looked at the code through Opera; my code and Dreamweaver, Dreamweaver-generated CSS tags and Opera all seemed to get along fine. Then, as I got nearer to completion of the new front-page for jeffchappell.com, I started looking at the code in [tag]Firefox[/tag] and [tag]Internet Explorer[/tag], just to make sure it would like right to everyone. This was important, I figured, as being a freelancer. After all, potential employers would be looking at it, and Opera, lovely as it is, isn’t used nearly as much as Firefox, and certainly not IE, the pokey, 800-pound-Gorilla of browsers that the vast majority of the world uses.
And here’s where our hero ran into trouble. Get things to look right in Firefox and IE, and it looks like hell in Opera. Fix it in IE, and it looks okay in Opera, but not in Firefox. Or the opposite would be true; it looked okay in Firefox and Opera, but not IE. Rarely would I get the code to look acceptable in all three. Then, as soon as I added a new element, I would go through the same routine all over again. At points I would literally be yelling in frustration—the neighbors upstairs must have thought I started playing World of Warcraft again.
At last, after a couple weeks of intensive tinkering, I think I have an acceptable compromise for the three-column front page (cross-browser tweaking still in progress). Ironically, trying to reproduce a newspaper-style layout, even a simple one like mine, in XHTML and CSS and compliant with all three browsers, lead to most of my problems. At one point I was even tinkering with leading—leading!–in my paragraph tags. Leading for those of you who are not newspaper refugees, refers to the amount of space between lines of text. That’s where Dreamweaver is really handy for the hobbyist coder like me; changing the leading is possible via CSS, but it’s not common, and I had no idea what the parameter tag was; Dreamweaver to the rescue.
Damn you Microsoft, and ‘Zilla too
There were other problems too, but that’s the meat of it. Of course, I could have just made it look pretty in IE and to hell with the rest, but I love Opera—even more so, now—and feel compelled to do my small part and help spread the gospel. I also understand now why the corporate world kowtows to IE—because it’s a time-intensive hassle to accommodate browsers other than the popular standard (even though they are standards compliant). And I understand now why Micro$oft chooses to make IE non-compliant; it can get away with it because its use is so widespread (there’s that whole issue of shipping the OS with the browser and all), and it sticks it to its competitors in a roundabout but effective manner. We may not like it, but it’s hard to argue with, from a business standpoint—kinda have to admire it, in a way, the same way scholars admire Ghenghis Khan.
I used to wonder what all the fuss was about; now I understand all too well. And as for [tag]Mozilla[/tag]/Firefox, well, I would have thought it would be more compliant with XHTML and CSS than it is. One would expect that sort of thing from IE, but not from the alternative browser champion.
Now I have to develop a template for the interior pages of jeffchappell.com; I can assure there will be no more three-column pages. And the next time I update, I’m just going to develop two, perhaps even three different versions of the CSS code; that will be easier than trying to come up with one version to make all three happy.
And you should do your part: go download and use Opera if you don’t already. It’s free and better than Firefox (IE isn’t even the same league).
And thus did Jeffrindel, even as he lay on the battlefield attending to his wounds, surrounded by bloody and disemboweled CSS tags and stray lines of code limping off into the distance, pledge to fight on, against overwhelming odds. “‘With the Olde Goddess Arpanetta as my witness, I shall not yield!” he cried defiantly, brandishing Opera before him in one hand, and the Dreamweaver at his side. “IEZilla—this war is not over!”