Marcos Placona Blog

Programming, technology and the taming of the web.

I truly hate you IE!

Reading time: 2 – 4 minutes

Firefox vs. IE
(Photo: Kay Kim)

I just came across a very interesting bug on my website. I’ve made a post on twitter today asking the local CSS gurus if they knew of any way to fix this:
IE screws up again
As you can see, the contents were being shifted about 150px to the left from where they were supposed to be (you can click on the image above to see it bigger). Only IE does it, every other browser (Safari, Chrome, Opera, Firefox (few different versions including Linux)) simply displays the page correctly.
I was thinking it was something really funky that would take me hours to debug. The guys over at twitter came up with various different solutions, but most of them had div floats or margins involved.
I was ready to get started and get my hands dirty with it.
I then opened my local version of the blog, and couldn’t reproduce it. I tried IE7, IE8 on windows XP and Vista, and couldn’t get it to shift things over to the left. I gotta be honest, at this time I really thought I was out of lucky, as I could only think that my website was out of synch with SVN.
I checked SVN (both on the website and my local version), and they were running the same revision. I then remembered that my homepage is published, and rewritten to another URL (flat HTML page) in order to save on resources, and load the page faster.
I the enabled URL rewriting on my local server and was able to reproduce the error.
I couldn’t really find anything different, as both the dynamic and the static pages are suppose to have the same HTML contents when read by the browser. The only difference is that my Flat HTML pages have a comment on the very top of it with its generation date and time. Something like:

<!-- published on {ts '2009-08-24 20:38:53'} -->

I would never think this would make any difference, but as soon as I deleted it, my page started to render properly. i the moved it to be generated at the bottom of my pages instead of the top, and now everything works a treat.
I can’t really explain why IE didn’t like my HTML comments on the top of the page if I’m honest. W3C doesn’t seem to have a problem with it when it validates my HTML.
The message here is: IE is evil, and will complain about the minimum thing just in order to bug you and steal your evenings.

8 Comments

  1. Absolutely right !
    IE = Infinitive Errors

    Apart from CSS rendering problems, there are MANY javascript problems as well.

  2. When you say “at the top”, what do you mean? If it’s before the !DOCTYPE, it’ll make IE go to quirks mode instead of standards mode.

  3. According to the standards, nothing should come before the DOCTYPE declaration and opening html tag, not even a comment. This is one of those extremely rare and very off the wall situations where IE did it right, and everyone else was outta wack.

  4. The comment at the beginning of the document made IE go into quirks mode, which was probably why it was not rendering the same as the other browsers.

    …ala wikipedia (http://en.wikipedia.org/wiki/Quirks_mode)
    “Quirks mode in any version of IE will also be triggered if anything but whitespace precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, IE will use quirks mode”

    PS – agreed. IE is totally hate-able.

  5. I for one love IE. Simply for the everyday reality checks it presents to the misguided utopians.
    BTW: The “Post comment” button on this site is not displayed in IE7, locking out a vast amount of the open web. Don’t complain, work harder.

  6. The Post Comment button really doesn’t show in IE, another great reason to dislike it.

  7. @Barney, @James: I really didn’t think about quirks mode, and honestly i thought it was a thing from the past. Didn’t think it was still present on IE8

    @subhero: You’re probably the only one to like IE, people seem to complain more and more at every release.

    @subhero & @ Billy: I’ll check what’s going on. i have IE8 and it works fine. I’ll have to wait till I get home to work on a fix for it. Can you guys give me more details about how it happens, and if it throws any error.

  8. I use DWTs (dynamic web templates) to keep my website uniform. If I move the (or something like that) before the , it triggers quirks mode in all versions of IE, yet it displays fine in all others.

    CURSE YOU INTERNET EXPLORER!!!!!

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>