Cross browser coding tips.

First of all let me say that I am not going to teach you how to cross browser code here. I am going to show you the best way to chose in what order is best to code so that you don't have to make as many changes; going back and forth and testing and so forth and so on.

Any web designer knows that cross browser coding is a bitch. We would loved to think that the cross browser wars will end soon, but as a browser company fixes one thing to be compatible with the other browsers it changes something else and then there is a whole new problem.

You code for the browsers as such: Firefox and Opera (both Mozilla) are about the same, Google Chrome and Apple Safari are about the same and then finally Internet Explorer all by its' lonesome.

The best way to start a project in my opinion is to code for Firefox/Opera first and then make your hack fixes for IE and Chrome/Safari later. The only problem with this is that FF isn't 100% the same as it's sister Opera and Chrome isn't exactly the same as as Safari. So now we have to pick one of the two that is most important: Do we sacrifice FF for Opera? Or Opera for FF? Unfortunately FF is far more used than Opera so FF is the winner. Do we sacrifice Chrome for Safari or Vice versa? Well on this I'm not 100% sure because even though more people use Windows than Mac, Apple's Safari is on both operating systems and Chrome is alot newer than Safari, so it is a toss up. I would say code for Chrome, because I am somewhat anti-Apple. My main problem I find is that relative positioning is off by 1px in both situations.
Coding for IE's is a whole different ball game. You have to code for both IE7 and IE6 which I hate.

IE7 luckily has its own seperate style sheet, but when coding for IE6 and all the other browsers you need to use the Lite Pacific Hack. You can use that hack for IE7 as well, but I prefer the to ise IE7's own style sheet (call it ie.css, I do) which can be linked to your html in your head section with this line of code:

< ! - -[if IE]>
< rel="stylesheet" href="ie.css" type="text/css">
< ! [endif]- - >

remove spaces in between < ! - - and - - > above.

What happens here is that when the browser parses the code it will check to see what browser is parsing and if it is IE7 then it use styles and rules from the ie.css instead of the normal style sheet. If it is not IE7 then it uses the normal code.

There are many debates on whether cross browser hacks are useful or not and I say they are, just don't waste your time thinking it is the only solution, these hacks can cuase more problems than fixes if you aren't 100% what you are doing; even the most seasoned coder can have problems in this area. Always look for non-hack solutions first and when all else fails...

Some coders think they are slick for figuring out hacks, thinking they are so smart and then they use hacks in all their code making their page files large with alot of sloppy code that isn't necessary. Make your page as small and clean as possible so that your page loads fast. To learn how to use the Lite Pacific hack click the link above. The rest is up to you, if you aren't already quite fluent in CSS then this article is too advanced for you know and you should bookmark me (ctrl+d) and come back later. Any questions? Leave a comment and email address.