This weekend I had the pleasure of fighting a bunch of browser incompatibility issues that got to bite me today.Building server side applications seems to be getting easier and easier with more tools and experience, but the client side of things continues to frustrate the hell out of me as the browser incompatibilities and incomplete object models make building something that is consistent very difficult.

I spent a couple of hours creating a generic and pretty basic all-client side tab control because several of my forms in the Web Store were getting pretty large. The Tab control is basic - it essentially displays text tabs in a table row. The control handles click all client side, so the idea is that you display a tabstrip and when you click on one of the tabs you show or hide pages in your content.  Simple enough and it took a couple of hours to have a re-usable control I could plop into three ASP.Net forms.

That is until I tried testing with other browsers. The functionality worked in all browsers, but the display was very different in all of them. I started out with HREF links (that can point either to URLs or javascript script links) but I had to give that up because Mozilla refuses to render inline-block styles as block content. Inline block allows giving the element with the tag a specific size - ie the tabsize. Works perfect in IE, not in Mozilla. So that I had to toss using A tags to do all the work and instead redesign using a table and using JavaScript and OnClick to force the code to work with all browsers. Unfortunately this also lost some features, like showing the selected tab as bigger etc (well, could still be done, but it would require some extra work). Then came the issues of browsers not finding the elements to make the tab switches and not finding the script code. In the end I had to embed the script code right alongside the actual tabs in order for all browsers to find the code and the code finding the tags.

I spent about 2 hours building the original control - the rest of the day trying to make it work in all browsers. Talk about misguided developer effort huh?

It seems amazing to me that in this day we still have to fight major browser incompatibilities like this. The HTML standard has been fairly stable for a few years now still the major browser providers can't agree on supporting the same functionality. The above omission of support for inline block by the Gecko engine is pretty annoying - and probably the most common reason that UIs always look funky in Mozilla when primarily designed for IE because inline block mode is IE's default mode (as opposed to Mozilla's Inline and non-support of inline-block).

Mozilla too has many little UI quirks - the way it treats form controls for example. Mozilla's support for percentage based style tags is completely inconistent. And how about the HR tag and that 1980s looking line it draws?

The HTML spec is complex, but how hard could it be to fix the few remaining quirks in browsers to make them CSS 2 spec compliant?

It seems like such a waste to continously have to look over ones shoulder to make sure HTML works with all browsers. The sad part about this is that we are fairly close - if you can assume a recent browser that supports CSS you're at least close to having a workable application that runs cross browser. But even then there are still issues on many small things that make applications look crappy or not work at all with other browsers.

Then again, these days browsers are hardly a priority for any of the major players. Hey another win for Microsoft with the 90% browser adoption. But as predicted as soon as the dominance was established support of the technology dropped to nothing. There are still many major bugs in the IE engine, and MS has announced that besides security plugs there will be no major update to IE until the next version of Windows in a few years... we can only hope that changes.

In the meantime we can all look forward to having at least 3 or 4 browsers installed just to make sure that our apps at least look reasonable on the major versions...