By Cesar Olivas
When developing and designing websites, it is imperative to make them work in multiple browsers, from IE6 to the newest browsers in Windows and Mac. Cross browsing is the most challenging task of a web designer and it takes lots of time and effort to do. I do not condone their use, and I think that in most cases, standard compliant CSS should alleviate most of the issues between browsers, even for the dreaded IE6.
I personally start developing the website in Firefox 3, and then I go and work with IE, Safari and other browsers if needed. As personal experience, the differences between FF3, 2 and IE8 are very minor, but when it comes to IE7 and IE6 it can be somewhat different, this is when I try to fix first by CSS and changing some markup and other tricks which are not hacks and might list on some other post, but when even this does not make the work for either browser, I have to use some hacks.
I will list the most used hacks that work for the different explorers, and that you will be using a lot if your work is making websites work in multiple browsers.
In these examples, I’m using the ID #wrapper, and the property and value are for example, margin: 0 10px; I will start with Internet Explorer browsers, going to Safari, Opera and then Firefox.
IE6
This is probably the hack that you are going to use the most. It has been around for ages, and it saves lives of many of us web designers. I hope we would never have to use this again. The companies have to start looking forward and start developing only for the newer browsers, but until then use it when needed.
IE7
This hacks is also very known, the star hack is a life saver when troubleshooting IE7. You can use it with the underscore hack, just make sure you declare the rule for IE7 first
IE8
This is a fairly new hack, compared to the other ones. It will work only with IE8, though you probably won’t have to use it that often, since I must say, IE8 is a pretty good, CSS compliant browser. Thanks for that one Microsoft; we finally got a decent browser from you.
Safari 3+
This is not a hack as much as taking advantage of a valid CSS3 pseudo class that most of browsers DO NOT support. Firefox 3.5 now supports it, so this rule will also apply to FF3.5 and with the time, more browsers will start supporting this so be careful.
Opera 9
Opera is an excellent browser, probably the best supporting compliant CSS, so probably will never have to use this technique, because actually, this isn’t really a hack. There is no real way to target just Opera, but what can be done is target Opera and other web kit browsers like Safari and Google Chrome, and then reset it later using the technique used for Safari 3.
Firefox 2
First of all, Firefox is a great browser. Firefox 2 is pretty good, almost as good as FF3, but when sometimes things don’t work out, here is the hack. This won’t be used a lot, since Firefox makes us upgrade our browser every time a new version comes out, so the number of people using it is minor.
Firefox 3
Firefox 3 will not give you almost any problems, especially if you start developing for it, but, if you feel the need to throw a hack at it, here is how. You can also throw a FF2 and FF3 hack at the same time.
If you know any other hacks or techniques to make our lives easier when developing for multiple browsers please let me know.