CSS cross browser compatibility on Ubuntu - css

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

Answer 3

If you have a copy of Windows you could install it in a virtual machine (Virtualbox is a good, free option). Or if you don't mind a lot of lag time and publicly exposing your web pages you could use a service like BrowserShots.

Answer 4

I have not tried this on Ubuntu or anything but windows - but this seems to be a pretty good testing system over the web.
http://spoon.net/browsers/
however, I think your best result would be to use a VM if possible.

Answer 5

I have to add my voice to those opting for VirtualBox.
VMs are the only way to get an accurate representation of how IE platforms behave. They also allow you to keep your main Linux install free of WINE and IE gunk, which is otherwise always troublesome and fragile. (Especially if you're trying to run multiple IEs, which is unreliable and inaccurate even under Windows).
They're not necessarily that big, if you take care to prune the unneeded features, turn off swap, compact the disc image and so on. My XPSP3 test image is just over 800MB.

Answer 6

I didn't want to install all this stuff as I wanted to move forward quick.
I found public AWS images with pre installed browser that you just can start and use.
http://www.hens-teeth.net/html/products/cross_browser_testing.php
If you already have an AWS account this will take you only 5 min. Make sure that you enable the RDP port on the incoming traffic in your security group.
As I use ubuntu I was looking for a way to connect from it to MS Win.
I'm connection on to them via remote desktop.
The way to go here is rdesktop, a command line utility for Windows Remote Desktop. (sudo apt-get install rdesktop)
If you feel like a GUI use tsclient. It's very close to the windows version.
From a work flow perspective I develop for Chrome in Ubuntu first, then have a look at the other browsers via browserlab.adobe.com.
After that I start my new AWS instance to debug.
The small AWS Windows instance is a $0.12 per hour (http://aws.amazon.com/ec2/#pricing). I can work for a long time on that before it's worth installing all this stuff.

Answer 7

CrossBrowserTesting.com works from Linux. Allows you to access Mac, Windows, and Ubuntu configurations and all the browsers loaded on them via vinagre vnc client.