Rogue

I was working on a little side project last night (so consider this a sneak preview for those who care) when I once again ran into our old friend mister IE, or as I call it; I - hate - the - world - and - cause - cancer - Exceptionally.

So I thought I'd share for the purposes of education and amazment. (note: large embedded pics).

Follow up:

What you see immediately below is close to how I want things to be. This is Mozilla Firefox, a Standards compliant browser, accessing the page from my ISP webspace while I'm at work. Behold;

Note the sexy transparency effect. The text containers are not bolted to the page, each one will maintain it's aspect ratios (eg. stay fluid) when the user shifts their window size. Likewise those running at different resolutions will get the same sexiness as everyone else.

However... then we do our cross browser testing, and lo and behold IE shows it's taint once more.

This window is positioned at exactly the same point as the last, however as you can see not only has it failed to correctly position the colored background image, it has also not been able to position the content backgrounds anywhere near where they are supposed to be.

And to make matters worse, it has also complete removed the quote container and everything therein. You might say, "Well you probably floated it so it's up the top someplace."... oh no, my friend, that at least would be marginally rational.

What we have here is a case where this entire container has vapourised yet it's displacement is still there. So it's there, yet not. Thankyou so much IE.

So how do we solve it? Well there are a couple of ways around this kind of nonsense. None of which are particularly pleasant.

As any cluey builder does, I've seperated as much 'appearance' info as humanly possible off into an external CSS document. What that enables us to do is do a quick switch onload to a more IE compatable version if the browser type is detected, curtesy of a little client side code.

So in essence we actually end up with two versions of the same page. One is the full-strength original flavour, with all the wizbangery and magnificence. The other is a slightly uglier version for non-standards-compliant browsers (IE 7.0-, Mac/IE, etc) which is flavoured just to display without looking completely broken.

I mentioned before that this is a bad practice. Why? Well when you come to update your work or make a change you now have to make it twice with adjustments as well, and you also have to be very very careful with your content because you need to be aware that it will not always be the same.

Essentially it's the same as building for a mobile phone, a PDA, a tablet, and a projector, with printers as well. Yet with those you have the process automated, cross browser style differentiation requires additional code to capture it and make the changes.

And now you know

Save a developer, switch to Firefox.