A wonderfully simple, wonderfully useful IE CSS hack

For the past few years, I’ve been doing a lot of web development. Part of my design mantra (at least from a code perspective) is table-less design using CSS that works in as many browsers as humanly possible.

Since Firefox‘s support for CSS standards is superior to that of IE, I generally code everything so it looks good in Firefox, then apply hacks to get it to work in IE. (Most other browsers require minimal tweaking once something works well in Firefox and IE.) At times, the hack is to add some IE-specific CSS code, which is usually done using the asterisk hack:

.myClass {
 background-color:white;
}
* html body .myclass {
 background-color:black;
}

Only IE recognizes the second line, so in IE, the background color of any element with the myClass class will be black; for all other browsers, it will be white.

However, this hack can be replaced by one I found today, which is beautifully simple and elegant: add an underscore before the CSS property name.

body {
 background: green; /* show to Mozilla/Safari/Opera */
 _background: red; /* show to IE */
}

It works in IE Windows only, according to the guy who wrote about it on his blog, Joen Asmussen. Hats off to you, Joen — a great solution not only in its simplicity (one extra character) and in its readability (you can visualize the IE-only hack in the same content as your non-IE CSS).

For more on CSS hacking with IE, check out Essentials of CSS Hacking For Internet Explorer by Marko Dugonjic. For more info on CSS standards support in modern browsers, check out Web Browser Standards Support by David Hammond.

IE in Firefox with the IE Tab extension

If you’re a Web developer or designer, you know the pains of testing Web sites with multiple browsers. My approach is typically to code against the standards, then check to make sure it looks good in Firefox, then check to make sure it looks good in Internet Explorer. It’s that third step which is a bear, because with every change you make to try to get something to work in IE, you need to check and make sure it didn’t break anything in Firefox. Needless to say, that’s a lot of time spent ALT-TABbing.

I stumbled across a Firefox extension that makes this job easier. IE Tab allows you to have a Firefox browser tab that uses the IE rendering engine — quite literally, Internet Explorer in Firefox. It works flawlessly, and makes one less window to manage on my desktop. Even better, it will ensure that certain WEb sites (like Windows Update) will always use the IE rendering engine — perfect for easy handling of those IE-only sites out there. A highly recommended extension to Firefox!

Posted in Uncategorized | Tagged

One less reason to use IE: Opera is now free!

As reported on Slashdot, the Opera Web browser is now free of licensing fees or advertisements. (You can still pay for premium support.) You don’t even have to provide an email address or name to download it.

Oh, and there’s versions for Windows, Mac OS, Linux, FreeBSD, Solaris, OS/2, QNX, and for dozens of different mobile devices. All free. Wow!

Posted in Uncategorized | Tagged

Three reasons to use Firefox

The Firefox web browser, part of the Mozilla project, became my standard Web browser some weeks back, replacing Microsoft’s Internet Explorer. There’s a lot of reasons to use Firefox instead of IE: Firefox is more secure, takes up less system resources, is independent of the rest of the operating system, has a tabbed interface, and more.

The biggest reason to use Firefox is for its extensions. Extensions are “small add-ons that add new functionality to Firefox”. Here’s three extensions that any tech-savvy person can not do without.

  • Web Developer. This is the single greatest thing for Web developers since the birth of the markup language. Web Developer adds a toolbar to Firefox that allows you to do dozens of tasks: edit a page’s CSS, auto-complete form fields and expose password fields, convert between GET/POST requests, display image ALT, size, and dimensions (or hide them altogether), view cookie and header info, display HTML block, ID, CLASS, and link properties, clear cache/cookies/authentication, outline block elements, resize your Web browser window, link the current page to the W3’s HTML and CSS validators, and more… If you are a Web developer, this extension will increase your productivity. If it doesn’t, you’re not a good Web developer.
  • WebmailCompose. I use GMail for e-mail. Unfortunately, the typical mailto: link in a Web page tries to open the operating system’s e-mail program. WebmailCompose fixes that by trapping mailto: links and redirecting them to any of a wide number of WebMail services, including GMail, Yahoo! Mail, Hotmail, and any other that you use. You can even code your own string to work with your own Web-based email client.
  • PasteIP. Whereas Web Developer is incredibly complex, this is incredibly simple, but for those times when you need it, it’s invaluable. Need to paste your IP address somewhere? Just right-click and “Paste IP Address.” No more trips to the command prompt or to whatismyipaddress.com.

There’s plenty of other useful extensions available, and some not-so-useful – just take a look and find what works for you.

Posted in Uncategorized | Tagged