Cross-Browser Coding? The Hack With That!

I feel your cross-browser coding pain. CSS hacks can be frustrating to learn. The promise however, is great: one set of pages, maybe one style sheet per theme if you’re lucky. That’s the name of the game. Learn a few hacks and never look back.

I've read arguments for and against using CSS hacks. You need to make up your own mind. I’m here to tell you I use them all the time and they save my bacon time and time again.

I have had to learn so many hacks that I can barely tell you the names... box model, Tantek, Holly, by golly. There's a varitable cornucopia of hacks that you can use now. I think I used them all and then some, mixing and matching like socks after the Sunday wash. What I learned is as far as I am concerned, in the business of making websites as skillfully and quickly as I can, I only really need 2 or 3 hacks routinely, with maybe another 1 or 2 in my back pocket for those rare issues.

A Great Cake Starts With The Right Ingredients

Before we actually get to the cross-browser code hacking we should cover a few of the basics real quick just to make sure we’re on the same wavelength. Actually I hope we’re not on the same wavelength because that means my wireless network has been compromised...

You will save yourself mucho time-o and many headache-o’s if you begin your coding with a good browser. Use whatever tool you want to write the code — some are definitely better than others, but the thing is the one I think is better you probably won’t, and the tool you swear by just pisses me off. Just use what you want. I will tell you that I have found it helpful over the years to be as clean as you can with your code. That’s partly anal retentiveness but also it really does help when you make changes. I grow less and less fond of sloppy code.

Anyway, preview your code in a good browser. Folks have their druthers but my code recipe kinda goes like this:

• add code gently while previewing in FireFox(FireFox is the most reliable-est, fastest, mostest standard-adhering-est browser I've used. Starting code in this browser means it will work in many browsers with less work down the road.)
• sprinkle < !-- Quirk on -- > at the top of each page to taste(this throws IE into QUIRKS MODE which basically means IE6 renders like IE5. We do this so we don't have to hack for different flavours of IE)
• beat and hack the CSS to work in IE6 until smooth(we will cover these hacks shortly)
• pour contents into 6x9 pan, pop into the oven, and be sure to check it with a toothpick in Mac IE 5.2.3(if you code for schools or artists don't skip this step — your cake could get burnt!)

The above recipe often yields enough yummy (acceptable from my viewpoint) servings for the following browsers. Of course, mileage varies:

• PC IE 6.0
• PC IE 5.5
• PC IE 5.0
• PC N 7.1
• PC FireFox .8 →
• PC AOL 7.0 →
• Mac Safari 1.2 →
• Mac FireFox .8 →
• Mac N 7.1
• Mac OSX AOL →

Cross Your Browser & Hope To Die

Let’s dive into some real-world examples. This website is as good a place as any to start. Lists are always the biggest pain in the ass for me. Believe me when I tell you I have some style nightmares involving lists...

So when a bug crept into my Site Map on this site it was no surprise. But still, no one wants to see it happen because it can mean from 5 minutes to 5 days of extra time trying to conquer the little bugger, depending on how anal you are about figuring things out, that is.

Holly Hack Saves Man’s Butt. News At 11.

The site map on a previous version of this website suffered display issues from browser to browser. When I viewed it in IE6 I saw small parts of Hell breaking loose as shown in the second image. I recognized the drifting bullet as something I’d seen before.

I applied a couple hacks to the most likely culprit, which in this case is the <LI> (because its background bullet was acting funky). I used a combination hack: “* html” and the Holly Hack (height: 1%). The CSS looks like this:

* html #content-right #SiteMapList li { height: 1% }

The “* html” makes the rule only apply itself to IE browsers. The Holly Hack “height: 1%” fixes another IE bug that I just happened to remember manifested itself in this way sometimes, making list item bullets indent further in this pattern, or rather the List Items were negatively indenting I suppose I should say.

This hack caused the bullets to, as the Beatles once sang, “get back where they once belong.”  But there was still a silly spacing issue. In the second example above there is undesired space above the “privacy” link and above the “resources” link. I played with some padding and margin but quickly realized there was something else even wackier than IE’s usual spacing issues going on. It became apparent that the issue was similar to the previous bullet issue in that the places where it manifested itself seemed to coincide. I applied the same combo on a whim to the second level <UL> and it immediately fixed the issue.