Dining Styles and Why I Hate Internet Explorer

Contrary to what the title says, I have to warn you that this monologue is not regarding table etiquette. Instead, this is a very coding centric rant focusing mostly on my adventures with Tables (Dining) and CSS (Styles).

The job that pays me my wages requires me to be an advocate of standardization, mostly with a focus on data and application customization. When I started doing web-pages in 1997 on a Unix mainframe through a dumb terminal, the only browser I had access to was Lynx – a text-only browser. Then I got access to a terminal with graphics and was able to run Mosaic. I was able to see what my pages actually looked like with pictures.

Moving on, the next browser I had access to was Netscape Navigator, and subsequently Netscape Communicator. Those were awesome browsers, leagues ahead of the competition, which was mainly IE 3 and IE 4. They had a lot of concepts like frames, layers and so on, which let you add funky things to your pages. Of course, I never went beyond frames and some MouseOver and MouseOut events in Javascript.

Then I started off professionally, and I had to write wee bits of code to run on both Netscape and IE. This was the new IE 5, the first big release that altered the balance in the browser wars. That was when my liking for Netscape started diminishing. The whole concept of layers was, though structured, extremely convoluted. IE handled things much better. Quite surprisingly IE was MORE standards-compliant than its competition. Netscape had completely missed the bus and its subsequent releases always were playing catch-up in terms of features, and that too in the face of collapsing market share.

So for a while I just made sure my pages rendered properly on IE (now at 6). But that was when Microsoft took a 5-year break and Firefox came by and completely whipped it in terms of standards compliance. In the meanwhile, I started using programming techniques on my web-pages. I started by writing small JavaScript functions that helped me use my own template structures. Those days I had my page at geocities, so using PHP was not an option. When I purchased my own domain I replaced the JavaScript templates with PHP, which was a pretty good move.

So chronologically, I used these browsers as my primary:

1. Lynx
2. Mosaic
3. Netscape Navigator
4. Netscape Communicator
5. IE 5
6. IE 5.5
7. IE 6
8. Firefox 1.0 > IE 6
9. Firefox 1.5 > IE 6
10. Firefox 2.0 > IE 7
11. Firefox 3.0 > IE 7 > Chrome > Safari > Opera

My web-layout techniques also progressed correspondingly:

1. Plain text
2. Text with pictures
3. Frames, JavaScript
4. Table layouts, JavaScript
5. Table layouts, JavaScript, CSS
6. Predominantly CSS, with tables where unavoidable, JavaScript

Particularly between 5 and 6 above there was an interesting toss-up. If you see the layout of this page, it is quite intricate. Each line can be thought of as having 3 columns:

1. The left edge / top left corner / bottom left corner, with a shadow. The corners occur once, the edge repeats for the length of the main content
2. The middle section, which repeats horizontally to a pre-determined width, and vertically for the entire length
3. The right edge / top right corner / bottom right corner, with a shadow. The corners occur once, the edge repeats for the length of the main content

Approach 5 seemed straightforward, because in a table we can set the width of columns and things get aligned automatically. However this was easier said than done, as precision was of great importance. In any case, I had my page looking exactly as I wanted it to. My page rendered correctly on the big 4 – Firefox, IE, Safari and Opera. I had devised an approach where the layout would be created by calls to PHP functions. This was done to minimise impacts of changes like column widths etc. This worked very well for a while.

Then I migrated this blog. And the trouble began. Most content management sites use XHTML instead of HTML. And in case of my blog that royally hammered the look, because, out of all things possible, the look did not turn out correctly in IE 7.

A little research showed me that the use of XHTML was playing truant. Further research showed me that I could fix the look by using CSS instead of tables. So I started the transformation. I had never used the layout features of CSS, like float, position, margin or padding. Neither had I used CSS to extensively control backgrounds. I found out what I was missing. This approach was so much better than my table-based hacks. More importantly my page was slowly becoming standards compliant.

How did I know that I was compliant? Quite simple – I used the site validation techniques that I accidentally stumbled across. There are two of them that I am aware:

1. CSS – Checks if your stylesheets are using valid tags throughout
2. XHTML – Checks if you comply with the XHTML standards. This is really useful and points out a lot of good practices by means of code corrections, like the use of an "&" instead of an "&" while linking to pages and so on.

You don’t see the validation links down in this page, but that is because WordPress refuses to listen to you even if you insist you want to put in your own HTML code and not use the visual editor. So WP puts in <p> tags by itself when you don’t need them. Anyway, I hope to make the blog compliant later. At the end of the day, though IE made me do the hard yards, I was happy because my pages were compliant, as you can see at the bottom right-hand of my main home page.

My sites were compliant and everything was well, till I removed my “left bar” and replaced it with a “menu bar”, to free up some real estate. Bad idea. I checked the look on IE Mac 5.2 and had a seizure. The menu bar looked like a film by the Ramsay Brothers instead of the nice sleek design I wanted to give it. I immediately decided that this needed testing on IE 5.5 and IE 6 at least, in addition to IE 7. This was particularly important since a lot of people working on XP still use IE 6 and not IE 7.

How did I isolate the problems? And how did I test it out on all the IE versions without installing them or using different virtual machines? I found this very good set of tools in my attempts:

1. Firebug – This is a must-have Firefox plugin if you are a web-developer. It identifies which section on a page is using which style in a very nice manner by highlighting the section on the page.
2. IETester – I love this in spite of the fact that it tends to crash more often than I would have liked on Vista. This application lets you open tabs for IE 5.5, IE 6, IE 7 and IE 8 RC2 and renders pages based on the browser selected
3. Sandboxie – I don’t know if this was supposed to be “Sandbox IE”. Nevertheless, this lets you install different applications, like other browsers in a “Sandbox” area, without messing up your core installation

IETester was a phenomenal help. It helped me figure out how ugly some things were in IE.

1. The CSS boxing problem was a major nuisance. If a page rendered correctly in IE 5.5 it wouldn’t render in IE 6 and so on. I had to tackle this with a bunch of hacks:
   1. Using * html before an element in the CSS to make IE read it
   2. Inserting a “” in an element name, a.k.a. the Tantek hack.
2. I couldn’t get some PNG files with a transparent background to show up correctly, so I replaced them with GIF.
3. I couldn’t set the widths to be automatic as they were taking up the whole width

There are a lot more that I cannot recall at this moment. Finally, after a lot of effort I managed to make the look consistent across all the IE versions. Actually I succeeded in not breaking it. The consistency part of things is there between the big browsers, not the older IE versions.

— End of rant.

Update on 14th July 2009: Having redone the blog’s theme some points above are longer valid. However, the basic premise holds – IE sucks.