If you do even a bit of website building weather for you own site/blog or for others you are destined to get the cross browser developement headache. Not only do websites look different in Firefox 2, Firefox 3, Internet Explorer, Safari, but they even look different in Windows and Linux using the same browser.

If you build a lot of sites, let me show you a setup you can use to test on multiple browsers. First of all, I gather you already have Windows installed, or if you don’t because you’re a linux user, go ahead and install it first. Once done, you can install the new Ububtu Linux from Windows itself, without the need to muck about in boot screens and so on.

Now, you have two systems installed, all you need to do is get all the browsers you can into these systems. WIndows has IE by default, so you need to install the others only. I recommend installing three browsers here, Firefox, Opera and Safari. Firefox and Opera have large fan bases, and Safari is sort of a middle ground between installing OS X.

Head on over to your linux system and if you have Ubuntu, Firefox will be on there by default. The options you have here are much mor evaried. The good news is that most problems occur between IE and all other browsers and you don’t have to think about IE in linux too much. The bad news is that there are many more browsers used. Apart from numerous smaller browsers you can install Galeon and Konqueror, many Linux distros come with these as defualt. Galeon is based on the gecko engine (like Firefox), so you won’t have many problems there.

The main difference I’ve seen with Linux vs WIndows is the differnece in text size, usually smaller in Linux. This can cause some elements to shift about, but if you have some experience with IE problems, solving these will be a cicnh.

I’m probably a little late with this info, but Google has released Google Code University, a page simply built around teaching people code. It already features some AJAX and CSS stuff plus some more and I bet they’ll expand a lot on this.

Knowing Google, in a year this will all be integrated with Google Maps, Gmail and Google Docs, so you can filter documents from Papua New Ginea which contain tutorial sections on AJAX functions and have been sent as an attachment in an email in the past 32 and a half hours.

Google Code University perfectly embodies the reason why I love Google, I wrote a little bit more about this in my personal blog, feel free to take a look if you’d like.

If some of you are into tweaking your sites and blogs you may dabble in CSS sometimes. If you want to be all productivity about it, I suggest you “learn” CSS shorthand. Not that there’s too much to learn, it’s just basically a way of writing less inside the file, to make it smaller, hence load faster, hence offer a better user experience.

A very common example is the way we designate margins. If you need an element to have a different margin on all sides, you would normally write:

margin-left: 5px;
margin-right: 10px;
margin-top: 4px;
margin-bottom:8px;

There’s a much-much shorter, more productive and organized way to go about writing all this down, called CSS shorthand. You can write all this in just one short line, like so:

margin: 4px 10px 8px 5px;

This short line will set all the attributes I wrote above, much simpler and productive right? You can also apply this to padding, borders and whatnot, in each case the first number will set the top of the element. The others follow clockwise, so top, right, bottom, left is the order. There is also an ever shorter notation if you have matching top-bottom and left-right values. In this case you could write:

margin: 6px 0;

This would give you top and bottom margins of 6px and left and right margins of 0px. Note that px is not needed for 0 values, you will even pass css validation.

While browsing through some info on official css specs and best practices, I came across a cool feature on the W3C homepage. They have a tool that lets you view four sites with eight different core stylesheets. You can also view the pages without styling, or you can take a look at just the style source.

If you are just learning css, this is a great way to take a look at a stylesheet that is definitely well formed and made in a web-friendly and compliant way. You can also use them to give your page a pretty good look right away, which you can tweak and tune as you like, or as you learn more and more.

Take a look at W3C core css styles on theW3C homepage