The ZURBlog is where we discuss interaction design and strategy.

When it comes down to it, working towards getting your latest website or project to look its best across all major Web browsers can be a chore. Luckily, as developers, we all have our ways—and that's just fine. What most people overlook are the opportunities for adding a little more finesse across those browsers.

Here are three tips for Web designers and developers to ensure that your designs are looking sharp as can be, aided by only adding a little extra flair (and code).

Add CSS Text Shadows for Cleaner Text

It's no secret: applying text shadows on the Web has never been easier. Well, at least if you're using Safari, Opera 9.5, or Firefox 3.1a. By adding just a single piece of code to your stylesheet, you can get crisper text. Here's the CSS you'll need:

1. body {
2. text-shadow: 0 0 0 #000;
3. }

The secret is in the way browsers handle the text-shadow. Newer browsers render an anti-aliased effect over your text, causing it to look just as good—maybe even better—as it can in Photoshop.

But what about users of older browsers? For some, there is hope. With Firefox 2, there is a small CSS hack that allows the fonts to be rendered in relatively the same manor. Here's the CSS:

1. body {
2. opacity: : .99;
3. }

Coupled with the text-shadow filter, which doesn't affect Firefox 2, you're now set for all browsers save Internet Explorer. That means Firefox 2, Firefox 3, Safari, and Opera are all getting more accurately rendered text. Watch out though, this hack has a few nuances that may sidestep your development.

Better Image Scaling in Internet Explorer

Image scaling via CSS and inline HTML is no big deal, but it has never worked well in Internet Explorer—go figure, right? Well, the creative minds behind Flickr have found two ways to help out IE6 and IE7 improve image scaling.

It turns out that the same method of scaling images—something called bicubic resampling—is present in all modern browsers, but it's disabled in IE7. See the difference?

You can enable it in IE7 with a bit of CSS:

1. img {
2. -ms-interpolation-mode: bicubic;
3. }

The only problem here is that it doesn't work for IE6. For that, we need to use an AlphaImageLoader CSS filter, just like most people use for any PNG fix. Here's the code you'll need to add:

1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');

It's not the best results, but it certainly does give a better picture (pun intended) for your audiences.

Bring Up the Rear: Turn IE5/6 into IE7

What's that mean exactly? It means that, with a little Javascript, you can render CSS in IE5 (on Windows) and IE6 just like IE7. Thanks to Javascript guru Dean Edwards, we now have a script that makes our least favorite browsers render CSS more accurately. As a bonus, it also makes transparent PNGs work!

With this fix, aside from some extra Javascript, there's no real disadvantage. You'll save development time by not having to address the box model issues, by using more pseudo selectors, and more—all without having to overhaul your website's structure. With Javascript market saturation likely above at least 95%, you don't have much to lose (save a little time learning the ropes).

---

Developing solid interactive experiences cross-browser has always been an issue. As long as browsers continue to interpret HTML and CSS in different ways, we'll have these issues to deal with. With browsers no longer under development, like IE5 and IE6, we can take some of the problems out of the picture.

These issues might seem superficial, but it's the details that make for grand experiences online. Take the extra time to use these simple cross-browser techniques to make your website look and behave it's best. Enjoy!