Nothing new really, but a good summary of what works and what doesn’t. The consensus is of course that you have to be aware of that IE6 pretty much can’t handle anything, so we’re still bound to write old code to be compatible with it. Sad but true!

It basically lets you enter the URL (local or public) of  a web page, and allow you to compare images of different browser versions. Compard to other tools, like BrowserShots, it’s got the handy addition to also inspect and compare DOM elements in the views.

Slim & Free or Fat & Premium

There’s a free, slimmed version available for Internet Explorer (6+) comparisons and a “premium” version included in Expression Web, where you can compare with Firefox and other browsers you may have installed. The premium version is available as a 60-day trial, and the licence is priced at $149 USD, which could prove to be money well spent.

I usually test my apps in IETester and on a virtual machine, but I’ve downloaded the 60-day trial of SuperPreview and will give it a go.

Hence, from time to time you need to adjust your code to make it work in all – well, actually it’s mostly about making it work in IE too, as it’s not as good as the others in following standards – browsers.

A handful of issues

A few days ago, I was testing a site in IE (both 6 and 7) and figured I might as well write down the (CSS) issues I came across:

• Issue: Opacity animation of text looks jagged.
  Solution: Adding background-color to the animated element.
• Issue: Some elements get “magic” padding/spacing at the bottom, due to the whitespace in the code.
  Solution: Adding overflow: hidden to the element(s).
• Issue: Elements within links do not inherit text-decoration, especially on :hover.
  Solution: Set text-decoration on inner elements too, e.g. text-decoration: none.
• Issue: Right floated elements without a set width expands to 100%.
  Solution: Always set width of floated elements – particularily those floating to the right.
  Note: The W3C CSS2 specs used to state that floated elements require an explicitly set width, but that section has now been removed. Do note that it’s probably good practice to set width on floated elements if it’s vital to always keep them next to each other.
• Issue: Lists (ul li) treating list-style-position and margins differently in FF and IE.
  Solution: Always use list-style-position: outside and margin-left instead of list-style-position: inside.
• Issue: Lists with images gets no padding to text.
  Solution: Adding padding-left to the list element (li).
• Issue: Block elements aren’t centered in Internet Explorer.
  Solution: Make sure to set both side margins to auto and text-align: center.

Note that these are only a handful of the issues that you can come across.

Position is Everything

Apart from Googling answers to CSS issues, I’ve got a favourite site for finding and solving Internet Explorer related problems: Position Is Everything. After a while, you know these issues by hand, but until you do, it’s really a good place to get help before tearing your hair out…

What this means to us as professional web developers, is that all products (sites) must be 100% functional in Internet Explorer. There’s no room for excuses like “but it works in Firefox”. There can be no important features/styles/etc that only works in non-IE browsers.

I read about a lot of web developers saying “ignore IE and develop according to the standards”. Maybe that works for your own personal web site, viewed by 10 users a month. But if you’re running a professional site, supported by a large business, you can’t make it a crappy experience for all the regular users out there who aren’t using the latest Firefox or Safari build. That’s just dumb.
When the non-IE browsers have 95% of the market, we can start talking about ignoring IE and its quirks.

I’m not saying I like fixing IE bugs/quirks, but it’s a part of the job, just like any other task. Firefox (my own preference), Safari, Chrome or whatever are surely awesome browsers, far better than IE. But it doesn’t matter, because it’s only us “experts” and hardcore users that know about it. Your target group doesn’t.

So make it your primary goal to have the site working 100% in IE! If you want to use the extra goodies provided by other browsers, make that the little extra functionality that makes it a 110% experience in standards browsers.

(I do my primary development using FF and Firebug (as it’s much more efficient), and do a test round in IE 6+ when I’m done with the design. )