One of the best and worst things about the web is the fact that when it comes to your choice of web browser the program you use to access and view the internet - you have multiple options. From the standard Internet Explorer (PC) or Safari (Mac) to open source projects like Firefox to outsiders like Camino and Opera.

The problem is that all of the browsers interpret (X)HTML - the code websites are written from - very differently and all of them have their own internal style sheets and form controls. What this basically means is that a site designed in one browser can look vastly different in others especially older or non-standards compliant ones like IE6.

There are 3 main ways to deal with browser compatibility issues - having the right tools, designing with web standards, and utilizing filters or conditional statements to feed alternative styles to less compliant browsers.

Tools

The first step to dealing with cross browser issues is to design in a compliant browser. In most cases, the best one to start with is Firefox. The simple reason for this is the vast tools it gives a web designer to pinpoint problems and quickly debug code. Two of the best are the Web Developer’s Toolbar and Firebug.

The Web Developer’s Toolbar gives you the ability to edit CSS on page to test fixes quickly, to outline specific elements, disable cache easily to enable testing (since CSS is cached naturally) and many other useful features outside the scope of this article. Firebug is one of the best design tools available allowing you to inspect elements on the page, see the cascade of styles applied to that element to narrow down bugs or rendering issues, and even allows you to edit the (X)HTML on page so that you can quickly test for different scenarios. Both of these will save you a great amount of time while you are designing your site.

Web Standards

Web standards is the practice of writing (X)HTML using standards compliant code - basically utilizing correct tags for elements, using CSS for presentation, markup for content, and limiting the amount of markup to the least amount necessary to complete the task and provide enough “hooks” for your CSS. Some of the benefits include improved Search Engine Optimization and the ability to re-design your site later on simply by editing the style sheets. The other benefit is the fact that you use CSS for presentation - allowing you to deal with presentational issues relating to browsers easily.

After getting your markup done it’s time to style your site. The easiest way to avoid compatibility issues later is to reset the styles on all elements. This is done because different browsers use different styles for elements. One might naturally put 10px of padding on a p tag and another might put 10px of margin. This is the root cause for many rendering issues found later. A good reset style sheet was posted recently on Eric Meyer’s site.

If you’ve done both of the above then you are now setting yourself up to have the least amount of issues possible. Depending on the complexity of your site it might look exactly the same in most of the browsers - Firefox, Safari, IE7 and (hopefully) IE6. If not, the next step is to utilize filters and conditional statements.

Filters and conditional statements

Filters should only be used when nothing else can. If you have designed in Firefox then at this point you should have no issues in that browser. Internet Explorer will be covered in the next paragraph. Opera has no way to filter CSS to it. It typically has few rendering issues that do not pop up in Firefox though and any that do typically you must live with. The only browser not mentioned is Safari which does have a large user base. In your main style sheet you can define styles to target only Safari by using the following rule:

:: root (parameters) { styles }

So now you’ve covered the most compliant browsers: Firefox, Safari and Opera. The only one left is IE. IE has it’s own set of filters but utilizing them is not advised because they get messy as you have to override main styles for IE6 then in many cases re-override those for IE7. The best practice is to use conditional statements. You simply define additional style sheets - for example looking at the source of this site you’ll see a sheet called mainIE6.css - and put the rules for those browsers in them. Microsoft has defined conditional statements that can then feed those styles to whatever IE version you define and only IE. The standard way to do this follows:

<!–[if IE 6] (style sheet link) <![endif]–>

Other operators beside if include lt (less than), gt (greater then), lte (less than or equal) and gte (greater than or equal). So lte IE6 would target IE6 and below. The operator gte IE7 would target IE7 and above - and so on.

Now you have the tools to correct any rendering issues that might pop up.

In conclusion, the best way to deal with cross browser compatibility issues is to limit the chance for them to appear by using the right tools, standards compliant markup and CSS. Some issues will always appear and the few that do can then be handled by using either filters or conditional statements. Remember always to test in multiple browsers to find the issues. At a minimum your suite should include IE6, IE7 and Firefox. If you have access to a Mac then Safari should be included as well.

Random Tidbit: I really like SEOmoz. I like their article on getting traffic from Digg comments even better - though I’m a bigger fan of Reddit personally.

I was kind of saddened today to learn that Jericho had been cancelled.  It was one of the better shows on TV - sort of a better version of Lost.  The basic premise is that the citizens of Jericho, Kansas wake up one day and view a mushroom cloud in Denver.  Then basic services shut off and they gradually find out that Denver wasn’t the only city hit.

Little details were revealed throughout the first season about what might really be going on but much of it deals with the people of Jericho and trying to survive in a post-apocalyptic world.

It really was a great show and makes you wonder why they would cancel it when so many other crap shows stay on the air forever.  Likely no one watched it - which is a disappointment.  It’s followers were rather loyal and I recommended it to several of my friends.  The season finale was awesome and I was disappointed I was going to have to wait till next season to see the conclusion.  Now I may never.

Random Tidbit: Check out the Jericho wiki for more information and spoilers.  If you have on demand, you might still be able to catch some episodes.

So I wasn’t really able to talk about it before now, but the site I worked for has officially launched our new version - of which I’ve been a major part in since I started in January.  It’s also what’s kept me preoccupied these past few weeks as we fixed minor things in it to get it live yesterday.  We’ve already heard good feedback from our users and I’ve gotten lots of compliments on the UI (which is what I do) - though to be honest 90+% of the design work was done by other people, I just did the XHTML and CSS.

Anyways, check it out if you want to see another big example of my work.  There are still large portions I want to change - some of our dynamic boxes should be switched to the sliding doors method for example - but overall I’m quite proud.

Random Tidbit:  Apparently terrorism has spread to the virtual world.  Luckily this kind only affects 1s and 0s (hopefully, although some money may have been lost).  I don’t know much about Second Life and I’m kind of curious how they managed to pull this off - I thought it was more of a social site rather than one in which you could wage war.

Stumbled onto a great article called “10 Decks in 10 Weeks.”  It’s from the writer that does the building on a budget series.  Some really good deck ideas that can be done - online or off - relatively cheap.  Some very powerful decks and new ways to use cards that I’ve kept around but haven’t been able to work decks around.  Really good reading.  He goes through all the basic 2 color combinations and designs a wide variety of decks.

If nothing else it’s good to see another very experienced Magic player’s design strategy and sort of get into their mind as they build, test and modify a deck.  I had thought that I was getting pretty good at deck building but the card drawing and mana acceleration ideas really opened my eyes.  I might have to make another pass through my decks again.

Random Tidbit: I’ve been looking into and trying to better understand the purpose and power of microformats.  One thing I’ve found is that it’s good to be posh.

I mentioned last week I was going to build some basic templates.  I was looking through my bookmarks and found someone that already did.  CSS Tinderbox is a great resource to start off with.

Instead I’ll be posting a new, real template sometime this week.  I have a neat web 2.0 idea I want to run with.  Sorry for the infrequency of posts lately but there has been a lot of stuff going on that has been higher priority.

Random Tidbit: Some great geek shirts and why it doesn’t pay to be the computer guy.