Tools for Cross-Browser CSS Checking (A Follow-up to My IE Gripe)

Since posting my Gripe Against Internet Explorer, I’ve had a little time to be better able to come to grips with the difficulties, challenges, and (dare I say?) adventure involved in programming websites to be viewable by the majority of the population.  In my last post I found that nearly 70% of the Internet browsing marketshare is owned by Internet Explorer, and since none of the IEs supports Cascading Style Sheets in the same ways, I was forced to learn how to tell each version of IE to read and display my code as it was intended.

Interestingly enough, as minor code changes were making massive differences in the display of IE6 and IE7, the other browsers I worked with (Opera 8, 9 , Firefox 3, Google Chrome, Safari 3, Camino 1) were not affected by my code changes at all, and continued to consistently display the page I wanted.

During my time of “learning the ropes” of IE programming, I ran across a number of very useful tools on the Internet that aid in the development of websites, especially cross-browser IE compatibility checking.  Here, I’ll present the tools I’ve found, a look at my current “under-development” website in a number of browsers, and a few links to some more IE CSS bugs that I’ve found helpful.

Tools for Cross-Browser Checking

1. IE NetRenderer

IE NetRenderer is the first tool I stumbled upon in my quest to check my website across multiple IE browsers.  It

“allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany…It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.” – NetRenderer

IE NetRenderer also has an Internet Explorer 8 renderer as well, and the best part about it is it’s all FREE.

This solution is good initially, but slightly limited as well.  First, I have to upload my website to the Internet and then provide NetRenderer with the URL for the site.  However, I generally prefer to do the majority of my testing on my personal computer BEFORE uploading the site to the web.

I then specify which version of IE I want it to render, and it does just that: it renders.  Therefore, I cannot dynamically view my page from NetRenderer as the service only provides a screenshot of the end result of the URL I specified.  I also cannot scroll to the bottom content of my page as the service only renderers a single screen’s view of the webpage.  Below is the IE 8 rendered version of the site I’m currently working on.  It took 15.44 seconds to render (and slightly longer to load).

2. Litmus – Browser Testing

I found Litmus through a link on the NetRenderer’s page.  Litmus is very similar to NetRenderer in that it renders screenshots  of your website, but it is far more versatile than NetRenderer.  Litmus promises to “show you screenshots of your websites as they look across all major web browsers.”  (They list 18 Windows browsers, including multiple versions of the popluar ones like IE and Firefox, 4 Mac OS browsers, and 3 Linux browsers).

Litmus also has a really handy feature of bug tracking that tells you which browsers your site is compatible with, and which ones it isn’t compatible with.  You can “Keep track of where the outstanding bugs are within all the page templates you’re working on.”

Additionally beyond browser-testing, Litmus has other features as well, such as email-testing for newsletter compatibility across all major email clients, case studies that document other users interactions with Litmus, resources like “Top 10 Email Clients,” and a blog that for the month of February 2009 will be offering an unlimited number of full browser-tests and full email-tests. It’s a great resource to take advantage of while you can.

Pricing of this extensive service is reasonable as well, beginning at FREE for a limited setup of 50 tests per month on IE7 and Firefox2, to $24 for a one day pass for all testing, to $49/month for an individual, or $199/month for a team subscription.  They also offer a full refund for their services within 90 days if you’re unsatisfied for any reason.  For web developers who have a lot of cross-browser checking to do, this could be a very valuable resource.

I have not had a chance to use this service yet, although I do hope to take advantage of their Free-February-Weekends.

3. Standalone IE 7 Browser

I ran across this Standalone IE7 Browser by TredoSoft just today as I was looking for a way to run IE6 and IE7 side-by-side for dynamic browser-testing.  From their website, TredoSoft classifies themselves as “a technology oriented website with particular focus on software development, Internet technologies, network security, Windows and the Linux operating systems.”

On their Standalone IE7 Browser page, TredoSoft provides guides to 2 methods of making IE6 and IE7 play nice together: the manual way (editing registry keys and the like), and the automatic way (complete with .exe installer).  I downloaded and ran the installer which worked like a charm, and soon I was dynamically browsing my site in both IE7 and IE6, side-by-side.  Take a look at the screenshot below:

The client I’m developing for would occasionally send me a screenshot or two of incompatibilities on her computer that I couldn’t see on mine (she was running IE7 in Vista, I had only IE6 in XP).  What a relief to have both of them running side-by-side so that I could really SEE and then fix the problems she mentioned.

Total cost to implement: FREE.

4. Multiple Versions of IE on your PC

Taking the standalone browser idea one step further, TredoSoft has another installer for Multiple Versions of IE on your PC that I just had to try out.  This one installs IE 3.0, 4.01, 5.01, 5.5, and 6.0 as separate entities on your computer.  Check out my screenshot of ALL my Internet Explorers in my Quick Launch menu:

Now, that’s browser compatibility testing!  Just for fun, I wanted to find out what my site would look like in all of the possible Internet Explorer browsers.  Lucky for me, less than 1% of the Market Share still uses browsers lower than Internet Explorer 6:

Just for fun, here is what my site looks like in every version of IE:

IE 3.0

IE 4.01 unfortunately crashed closed every time I opened it.  No screenshot.

IE 5.01

IE 5.5

IE 6

IE 7

NetRenderer Image of IE 8

As you can see, only IE 6, 7, and 8 correctly render the site.  All Internet Explorer versions before IE 6 either don’t fully support CSS 2.1, or don’t support CSS at all (as seems to be the case with IE 3.0).  But, it was fun to check it out on multiple browsers.

More IE CSS Bugs

Over the past few days, while working the kinks out of my website code to make my site display properly in Internet Explorer 6 and 7, I stumbled across a few other sites that demonstrate, test, or otherwise document IE bugs when dealing with CSS.  In no particular order, these sites are:

1. Position is Everything – Explorer Exposed (19 bugs)
2. IE’s Top 10 CSS Problems
3. Float Test (IE seems to have lots of problems with floats)
4. CSS “position: fixed” in IE (I fixed one background image problem by using “position: absolute; z-index: -99;” to make the image float UNDER the text instead of on it)
5. On Having Layout (this is one of the most commonly referred to articles about IE and CSS and seems to help fix a lot of the common problems)
6. IE/Win hasLayout Triggers (demonstrates many triggers to get IE to see an element “hasLayout”)
7. CSS Tests and Experiments (extensive documentation -> over 200 tests, and about 100 for IE)

So, if you’re having trouble with the development of a website due to IE or other cross-browser issues, I hope that some of these tools and links are helpful.  Let me know what kinds of issues you’ve had to deal with, or send me some more useful materials!  Here’s to happy, stress-free, standards-compliant web development!  Good luck in your endeavors~