Effectively, I’ve now spent the better part of an entire week just trying to code a Web site so that it’s HTML 4.01 standards compliant and works/looks the same in both IE and Mozilla. (Plus won’t fail to work if the person browsing the site has javascript disabled.) Even though I’ve learned how to do everything I need to specification, IE doesn’t care. It’s irrational.

There are just so many things that IE does terribly – either not following the standards, or exhibiting strange little quirks that throw everything off. I’ve now tried a handful of different design strategies. All of which might have worked just fine as an alternative, but all of which, in the final analysis, proved to be incapable of being displayed properly by IE.

I even got to the point where I ended up throwing in some non-standards compliant code, just for IE’s sake:

“overflow: auto; overflow-x: hidden”

(It’s the second bit that’s invalid in any browser but IE, so only IE pays attention to it.)

Just because, for whatever messed up reason, IE insisted on displaying horizontal scrollbars even though the content fit inside the boxes just fine. Worse, when resizing the browser window the scrollbars disappeared! But – they’d always be there when it was displayed initially. Talk about strange – and frustrating. (It was while I was Googling around for the “disappearing scrollbar” solution that I came across the IE’s proprietary overflow-y tag. What? They realise that they haven’t implemented “auto” properly so they have to throw in some band-aid fixes?)

Here’s another example:

“top: 10; bottom: 10”

You’d think that any decent browser would figure out that the top margin should be 10, the bottom margin 10. Mozilla handles this beautifully. IE, on the other hand, starts with a top margin of 10 – then proceeds to completely ignore the bottom margin.

Which led to me to having to define different sections of the screen with different “priorities” (using z-index in case you care), so that when one box is scrolled up on top of another it disappears behind it. No problem. Except that my drop down boxes (form selects) completely ignore such layering and don’t disappear behind anything at all. So far, there seems to be no workaround. Other than to remove IE. (If only I could snap my fingers and do that, making everybody in the world use Mozilla, life would be so much simpler.)

Every time I solve one batch of problems, I run into another insane bit of (mis)behaviour. I may try looking into making parts of my code conditional. If Mozilla, display this simple and correct page, if IE, do something entirely different, making use of all sorts of stupid and non-standard code. It’s called browser sniffing – the only problem is I’m not sure how to apply it to the actual code itself, nor is such sniffing entirely reliable or “kosher” in its own right. It sure sounds like a no-win situation to me.