CSS cross browser compatibility on Ubuntu

Question

I'm currently working in web development and my default desktop is Ubuntu and I'm kind of happy with the setup and applications I got going. But I need to test web pages for cross browser compatibility while still being on Ubuntu. I have gone through hell trying to get IE7 or IE8 (with wine) to run on ubuntu and when they finally worked they were very buggy and the graphics/scrolling was insanely slow. Of course there is the option of virtual box but again, too much GBytes just to run a small application!

So to all the CSS gurus out there, how can I continue with my beloved Ubuntu and still deliver a good quality (tested) page.

Thank you.

Answer 1

Edit:

Update for freshness: I now use the paid service from browserstack.com to provide the multitude of different browser testing environments via flash tunnelling. I'm a paid user, but there is an initial free trial period. browserstack has freed me of the need to run the windows os on my machines in any form, virtual image or otherwise. Since it also allows tunnelling, I can host the site on my local machine but still test in browserstack browsers. I consider the monthly fee money very well spent.

End Edit

Various options I have tried, including "the final solution": free downloadable windows testing OSes from microsoft

I've tried a number of the options below, but virtualbox may be your best bet for full & complete testing, especially because in a professional capacity you often have to test ie8, ie7 -and- ie6. Which gets tricky with only a single os installed. So in order of simplest and most shallowly testing to most complex and most fully testing:

browserlab.adobe.com

• A newer, interesting online solution is: browserlab.adobe.com. It's actually very specific and fast compared to browsershots. It only gives you screenshots, but it's a great first step. So I do recommend that for purely visual (and thus relatively shallow) testing.

Browsershots.org

• And while browsershots.org is also something that you should use for an overview experience of what users might see, you really can't get by without the real browsers for javascript and behavior testing (instead of just display & rendering testing that browsershots provides). The delay before you can see the images is also killer.

Dual booting into windows

• Another that I've tried is dual booting, I work 99% of my time in ubuntu, and I have windows installed & available to dual boot into. Not a fast way to test, but if you don't have any other way to access ie, it should work for at least the latest version.

Remote desktop-ing over to a running windows box

• Before I mention the "covers-all-the-bases" option, another useful possibility is to set up a windows machine and boot it up and connect to it via remote desktop so that you can work from one machine and test from both.

The final solution, using virtualbox

• Finally, the mother of all solutions, using virtualbox:

Luckily (I know you said you didn't like the virtualbox solution, and I know it's an annoying setup process, but...) Microsoft provides available-for-a-year-or-more virtualmachine distros with different versions of ie pre-installed, available without the need for a license for a year or so before you'd have to update the virtualmachine, @ http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

Installing a virtualmachine from microsoft's freely available browser testing images

Because this guide to setup on ubuntu is no longer available in full anywhere else, just in case you or someone else actually need it I feel compelled to include the actual details of the install process that were suggested to me on the ubuntu forums and worked when I went through them. I apologize for their length. Courtesy of the now anonymous original poster on the ubuntu forums:

Free Access to Microsoft Browser Compatibility Virtual OSes, Install Steps for Ubuntu

http://ubuntuforums.org/showthread.php?t=1097080 (Ed: I can't find this thread online any more)

HOWTO: run IE6, IE7, IE8 on Linux in VirtualBox You need: virtualbox, qemu, wine

Code: apt-get install virtualbox qemu wine

Download the free(!) Microsoft Internet Explorer Application Compatibility Check VPC Images here: http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en (Note: you don't have to download the full pack, you can cherry pick specific combinations of XP/Vista and IE6-8)

Extract the VPC image(s) with wine (double-click). (Note: it might take a while before the first window shows up)

Turn the VPC image(s) into (a) VMWare image(s) (which is/are readable by VirtualBox): qemu-img convert -f vpc image.vhd -O vmdk image.vmdk

Setup a new VM in VirtualBox, using the vmdk image as an existing disk. Boot it, you will see the Windows boot progress bar and ... it will BSOD shortly after.

Fixing the BSOD:

The BSOD is caused because the virtual Windows tries to load processor drivers for the wrong processor (it is not running on VirtualPC proc, but on VirtualBox proc). Or something like that... We need to force Windows not to attempt to load drivers for the processor (it doesn't need any proc drivers, because it's all virtual anyway). Start safe mode by (frantically) hitting F8 at Windows boot and choosing safe mode.

Ignore all the 'New hardware' detected warnings (we will deal with those later). Start a command box and run the following command to disable the loading of processor drivers:

Code: sc config processor start= disabled (note the space between '=' and 'disabled'!)

Restart the virtual Windows, it should now boot all the way to the Windows Desktop.

Now just when you think you can start browsing the web with IE, you will find out that the virtual Windows needs to install the drivers for the AMD PCnet NIC, which are located on the Windows install disk. Fortunately for those without a Windows install disk, there is another way :)

Download AMD PCnet drivers here: http://www.amd.com/us-en/ConnectivitySolutions/ProductInformation/0,,50_2330_6629_2452%5E2454%5E2486,00.html

Make an iso file containing the drivers. I used Brasero for simplicity. Choose to create a Data Project, add the zip file (or the unzipped files, saves you a step in Windows), create the iso. No need to burn an actual cd!

Stop the virtual Windows, edit the settings in VirtualBox: mount your brand new iso.

Start the virtual Windows, when it asks to install the drivers for the PCnet nick, point it to the (unzipped) drivers. Et voila! You have teh innernets! (Now you can also try to install the other drivers it complains for, but it's not really necessary)

The image README says the image will expire after about a year. In my experience the system gets hobbled against multi-hour use, but is still usable for the kind of short periods that you might want when booting up to test a website. At worst you might have to go through these steps again, so be sure to put them somewhere where you can find them again after a year or so.

Answer 2

I think setting up a virtual machine (Virtualbox or VMWare or...) with a proper Windows will be your only (local) option.

I you don't have one, buy a used Windows XP license. XP is cheap (around 20-30 euros here in Germany, for example) and all relevant versions of IE run on it. Home edition is enough. No need for Windows 7 or anything.

You could install IETester on that to get all the IE versions on one OS. IETester has flaws and is not always 100% reliable in what it renders, but for a general CSS compatibility check it should be okay.

I've never tried IE using Wine, but even trying to imagine the combination gives me goose bumps :D