Browser Compatibility Blues (and also triumphs)
Today is a rainy day on the Oregon coast, probably the fifth or sixth in a row. Just the kind of day that you want to be going through a new web layout checking for inconsistencies in different browsers. So I sit with my Apple laptop and my super-cheap Compaq laptop running Windows XP. On my Mac I've got my website files open in TextEdit as well as views in Safari, Firefox and Camino. Camino is a bit repetitive since it is a Mozilla browser, but why not, right? On the PC I have almost no software other than Internet Explorer 7, Internet Explorer 6 and FireFox. As I develop a new website, I divide it into chunks so that as each chunk wraps up it is then put through some testing and other QA checks. That way I'm not building on a broken foundation, and the plan is to go through the pages that I need to check with each browser and root out inconsistencies. Then try and fix them.
First, a word about browser consistency. There are a ton of things that look different in different browsers and different operating systems. For example, on a Mac my site uses the font "Lucida Grande," however on a PC it defaults to "Arial" since many PC's to not have the Lucida font. In a reverse twist Safari will put a purple "highlight" border around text areas that have focus, whereas other browsers will not. In some cases these differences are things that do not affect usability, and are nothing to focus on. Unless you want things to be perfect as they can be, like me. In my case, I have put a ton of work into creating an interface that will look and behave as consistently as I can get it across different browsers. By using JavaScript and CSS, I have been able to incorporate my own text area borders (hiding the pesky Safari ones) and interactive effects that work in all browsers.
In fact, to start things off with a triumph, I have to say that creating JavaScript using the Prototype library has been a pleasure. Anyone that has tried to write cross-browser JavaScript knows what I am talking about. However, with Prototype it is much easier and much more efficient to create scripts that work in all browsers. In fact, by using Prototype I don't have to worry about whether or not it will work in other browsers, since I know it will. Now I can just focus on scripting, which is what I want to be doing in the first place. So to much personal relief I did not have to make any adjustments to my JavaScript files as I was testing across browsers. Hooray! My how I wish the CSS story had the same happy, anti-climactic ending. Nope.
Okay, now that all the good news is out of the way, it's time to dig into the bad news. To start there were some serious visual problems with the way that the site looked in Internet Explorer. Firefox was consistent across operating systems, however there were even a few differences between Safari and Firefox, which are usually really easy to fix but can cause an initial panic. Before getting started I had made sure that all of my pages were valid XHTML 1.0 strict, so I didn't intend to make any changes to my markup. Since valid CSS is a bit of a pipe-dream right now if you want to utilize some of the cool CSS features of late, I usually try to solve all of my problems with CSS.
The first visual issue is that IE seems to have issues with the "float" directive. Even in IE 7, which is the newest offering, there seems to be a glaring oversight in how the browser handles this style. For example, if you have a paragraph of text you can place an image at the beginning and float it left using CSS to make it align left and also to have the text wrap around it (aligning at the top). This is the proper behavior based on the reasons for the "float" directive in CSS, and makes good common sense. So it would seems obvious, and indeed it did to the makers of all other browsers, that everything that is assigned the "float:left;" style would adhere to this behavior. Nope. If you assign the float to a span of text, or a paragraph, or a div (the point being that it doesn't matter if it is a block-level or inline element) it will align to the left, and the text will wrap, but it will align vertically to the bottom of the element. What??? Only happens in Internet Explorer, and is EXTREMELY frustrating.
For this one, the solution came after about 6 hours of experimenting and involved adding an additional DIV element to my markup (which I really didn't want to do). Additionally, I had to devise two separate hacks because of the differences between IE6 and IE7. It seems that aside from displaying things improperly they have little else in common. In the end, I got it fixed, and all works great. One page down, and now I can look forward to starting on the rest tomorrow. Hopefully it becomes painfully obvious to those reading this what a tremendous waste it is for browsers to not comply with standards, and how inefficient it is for designers to have to ensure that sites are consistent.
