|Page (1) of 2 - 11/22/05||email article||print page|
Making Friends With "Bad" CSSDon't let your sanity be a casualty of the "browser wars"
Ever since I initially dove headfirst into the shallow end of the pool that is standards-based Web design a couple of years ago, I've endured a love-hate relationship with CSS. I love the flexibility and simplicity of offloading page styles to an external document, but hate the varying ways in which today's modern browsers interpret my intentions. That's where so-called "bad" CSS comes in, and one set of tricks in particular has become an oasis in my quest to get closer to the elusive "pixel-accurate" promise of CSS.
As much as I've tried to leave things like tables and browser-specific hacks out of Web design, in the real world, sometimes you have to resort to trickery to get the job done. Indeed; after an article I wrote in January of 2004 that cautiously praised pure XHTML/CSS markup, it only took a few months for old habits to creep back in. As I wrote in a blog entry from May of the same year:
...As I'm finding out more and more all the time, different browsers are pretty finicky about how they display pure CSS sites. Oh sure, stay simple, and the results are pretty predictable. But try anything complex, and you get magically transported back to a bygone era (1997) where kludges were the norm as far as getting browsers to play nice, and tearing out of hair was commonplace.
Things haven't changed much for me since then?I've done a couple of "tableless" sites when it made sense to (and was feasible under the budget), but most of the time I've settled on a mix of tables for overall page layout and CSS for everything else. That should do it, right? Uh, not so much. CSS is great on the conceptual level, but browser hell still reigns supreme when it comes to displaying CSS. The big problem is still IE and its very incomplete standards implementation, but sometimes even browsers that are quote-unquote standards-compliant have issues displaying the same content. I expect IE to cause problems, but sometimes Safari and Firefox, which almost always render things more or less identically, have different interpretations of the same code. For example, consider the following screenshot from a site I'm currently working on (fig. 1):
What you're looking at in Figure 1 is a blowed-up-real-good image of the main template's footer area, where I have a table row on the bottom containing a DIV that bumps itself up into the row above it to effect a "cutout" of the sidebar. However, as the image shows, Safari has placed the DIV in the correct place (fig. 1, top), while Firefox is off by 1 pixel to the left (fig. 1, bottom), meaning that instead of creating a 2-pixel border, the line is 3 pixels and noticeably thicker (and therefore bothersome). Between the rare case of Safari and Firefox being out of whack and knowing beyond a shadow of a doubt that IE is going to cause its very own special set of problems, some CSS tomfoolery is definitely in order. I know standards purists aren't going to like this part, but tough. There's real-world work to do, so hacks have unfortunately become the norm rather than the exception. Forget about things like browser sniffing in order to feed different stylesheets to different browsers or some of the more esoteric (at least to me) solutions like the IE box model hack. It's as simple as this: two little characters are going to become your best friends. In case you haven't met, let me introduce you to the comma (,) and pound sign (#).
Consider, for a moment, the simple box that is Figure 2:
There ain't much there?just a box, a background color, a colored border, and an image stuck in the middle. What you see, though, depends on which browser you're using. In Safari (or OmniWeb, Shiira, or other WebKit-based browser), it should look like this (fig. 3):
And in a Mozilla-based browser, such as Firefox, Camino, or Netscape, the same box appears as this (fig. 4):
And what about IE? Specifically, IE 5, 5.5, and 6 on Windows or IE 5 on the Mac? Well, here you go (fig. 5):
That pretty much covers the "big three" rendering engines (or two-and-a-half, given Safari's small?albeit growing?market share) I typically code against to look identical. (Note that if Opera happens to be a target browser for you, Opera adopts the rules that Mozilla follows in this case.) IE's troubles with rendering the box at different sizes and its lack of transparent PNG support on Windows notwithstanding, with our new friends comma and pound sign, you can feed different styles to different browsers without resorting to sniffers or scripts or anything. Wanna learn how? Allrighty then, let's go.
Related Keywords:web standards, css, html, xhtml, firefox, mozilla, opera, safari, internet explorer