Internet Explorer just simply sucks!

I’ve had poor results with this browser before, but my experiences over the weekend when working on a Web site I administrate, had me at first pulling my hair out with frustration and then eventually had me laughing so hard over the amazing stupidity of Microsoft and their shitty excuse for a browser – that I finally gave up on it.

I will no longer even attempt to support their shit.

Here’s the quick rundown. I was working on a site which utilizes Joomla as a content manager, meaning that the site design is handled by XHTML and Cascading Style Sheets (CSS). The task was a simple one, create a new division in the PHP index file for a Joomla user container in the header of the page, move a random image plugin from another container on the opposite side of the banner to the new division and then put a new plugin into the old container. Pretty simple layout for a header: plugin, banner, plugin. If you have any familiarity with Joomla, the most difficult part of this task is creating the new division in the PHP file and matching settings in the CSS sheet to make it display correctly – and all said, this is not a difficult task.

I created the division, assigned the new module, re-assigned the old space and examined the results in Opera. A few minute’s tweaking and everything looked great. I checked it via Opera on Windows – it looked perfect. I checked it with Firefox on both Linux and Windows and it looked perfect. I checked it with Safari on Windows and it looked perfect. I checked it with Safari on the Macintosh and it looked perfect. Konqueror has for the moment a problem with the Flash plugin on one side, but the layout was perfect.

Then I opened Internet Explorer 8 on my Windows box and couldn’t believe what I saw.

The entire banner was messed up in alignment. What appeared perfectly within its confines on all other browsers I had tried, was completely disjointed under IE8. I went to my wife’s system and tried IE7. The same mess.

So, I did what anyone else in this situation would do – I went off to Google.

The first thing I discovered, is that one of the most basic structures of CSS implimentation, the box model, is pretty much completely broken in IE. All CSS compliant browsers deal with a box element as the totality of margin, padding and width of the container as a summation. IE, on the other hand, includes the padding and margins as part of the value of the set width – meaning that the box renders incorrectly, becoming narrower and shorter than what it should be. IE has been doing this since version 3, from 1996, meaning that the brain-dead programmers at Microsoft haven’t gotten a clue over this glaring break from the standards for thirteen years now! By careful adjustment I was able to fix the issues without having to resort to a conditional clause for IE versus every other browser.

The next problem, however, I haven’t found a good fix for. In the random picture division, I wanted the image to simply center. Horizontal centering was easy enough to accomplish, but vertical centering just wasn’t going to happen. For all other browsers to work correctly, I had to add but two lines to the division:

div#picflash {
    display: table-cell;
    vertical-align: middle;
}

However, as usual, IE doesn’t recognize vertical-align and puts the picture at the top of the cell. To correct it, you can use Javascript in a conditional statement, testing for IE, or there are some other CSS tricks to handle it. The best of the tricks and one of the most common used requires making two sub-containers inside the container, and then adjusting the margins of the containers to cause vertical centering. The code would go something like this:

div#picflash {
    width: 165px;
    height: 150px;
    position: relative;
}

.wrapper {
    position: absolute;
    top: 50%;
}

.content {
    position: relative;
    top: -50%;
}

With this in the HTML/PHP file:

<div id="picflash">
    <div class="wrapper">
        <div class="content">
            <jdoc:include type="modules" name="user7" /> <!-- This is the Joomla container...) -->
        </div>
    </div>
</div>

Technically, this is crappy CSS code. Percentages in a division are ignored unless you set the height of the container explicitly. As such, CSS compliant browsers just ignore this.

However, it works in IE, because IE ignores the specification that the height must be specified for percentages to be used. In short, even if I were to put this crap into a conditional statement for IE only, in doing so I’m "fixing" the situation by specifically exploiting a bug in IE! So, instead of supporting a shitty browser with any fix for their breaking of standards, I decided to ignore the broken browser. IE users get to see the image aligned on the top of the cell.

What it comes down to is this: every time a Web designer makes exceptions, via conditional statements, CSS hacks, Java script wrangling, or any other distortion of the XHTML and CSS standards, that Web designer is allowing a compliance ignorant software to control a portion of the Web! They are giving Microsoft tacit approval of their violation of the standards everyone else attempts to comply with. By doing so, they are allowing Microsoft to dictate the structure of the Web – effectively giving them a free reign to continue to break existing standards and any new standards which come out in the proper Web community.

I will not support Microsoft in this disgusting attempt to usurp control of Web standards. Instead, I am designing what little I work with as close as I can to the proper standards (I’m no expert on CSS, but I will try my best!) and adding in the following conditional code to any Web page I design.

<!--[if IE]>
    This site is best viewed with a XHTML and CSS compliant browser.
    <br />
    Try <a href="http://www.mozilla.com/en-US/firefox/firefox.html" target="_blank">Firefox</a>,
    <a href="http://www.opera.com/browser/download/" target="_blank">Opera</a> or
    <a href="http://www.apple.com/safari/download/" target="_blank">Safari</a> today.
    Learn more <a href="http://www.lockergnome.com/news/2004/06/15/why-you-should-dump-internet-explorer/" target="_blank">here</a>.
<![endif]-->

The last line is a link to a very insightful article by Chris Pirillo at lockergnome.com, where he briefly summarizes the problem and why it is so important to drop this stinker of a browser.

If you use Internet Explorer, I urge you to switch to a browser which at least tries to follow the set standards, instead of arrogantly imposing Microsoft’s broken implementations.  There is no good reason to continue to support IE by using it.  In the process, I think you’ll find that the other major browsers out there provide a much richer experience than IE ever has or will.  There is nothing innovative in IE.  IE has never set new trends in browser design.  Why settle for half-assed software, just because it came with Windows?  Firefox, Opera and Safari are free to download for all.  Even Google is getting into the act with Chrome. Why not try them all and see which one you like the best?  (Mind you, this is a partial list out of dozens of browsers.  These are just the most commonly known.)

If you are a Web developer, stop stooping to Microsoft’s level and force them into compliance by allowing their browser to falter and fail.   Don’t make exceptions for stupidity.  Don’t make the design of your sites dependant on "the most popular browser" as you’re afraid that you’ll loose business.  If designers stopped catering to Microsoft’s stupidity, they would eventually find themselves painted into a corner and it would be Microsoft which would be forced to fix their problems to become compliant with the rest of the world.