IE makes me want to stop using CSS

This might sound depressing, but I think I’ve had enough. Not to exaggerate, but I think I spend at least one third of my working time covering up for flaws and inconsistencies in Internet Explorer. When using something like float or position: relative, text might disappear, get rendered incorrectly or something else that’s horrible.

The code can work in 99 pages, and then something just throws it off in the 100th one. I’m spending way too much time fixing things like this, being worried that it might break. No rules, just sheer luck if correct code works. I know IE 7 is supposed to work fine and support proper CSS, but I don’t know for how much longer I can stand it.

Sure, one can attack the hasLayout problem, but it’s definitely not a 100% guarantee that things will work. Raise your hands, how many of the problems mentioned in Explorer Exposed! have you come across? Let me list the names of them, and it might be a hint for you:

  • Peekaboo Bug
  • Internet Explorer and the Expanding Box Problem
  • Quirky Percentages In IE6’s
  • Visual Formatting Model
  • IE/Win Line-height Bug
  • IE6 Border Chaos
  • Disappearing List-Background Bug
  • Guillotine Bug
  • Unscrollable Content Bug
  • IE 6 Duplicate Characters Bug
  • IE and Italics
  • Doubled Float-Margin Bug
  • Duplicate Indent Bug
  • Three Pixel Text Jog
  • Escaping Floats Bug
  • Creeping Text Bug
  • Missing First Letter Bug
  • Phantom Box Bug

Please give me piece of mind! Maybe I should just use table layouts and some extensive DOM scripting; at least that works.

47 Comments

  • Explorer Makes me Wanna Smoke Crack!

    That is one major reason why in 2000 I abandoned my root site and have not changed it since because various browsers were so shoddy with CSS. Nearly 6 years now and I am not convinced MSIE has got much better with CSS.

  • I raised this question not so long ago. You know how people are trying to make game developers responsible for the violence done by a player? Sure, they're not very successfull, but Microsoft made me kill my kitten! πŸ™

    On another note, another bug might be added to that list soon.

  • Oh, yeah I forgot:

    MS CSS bugs makes me wanna smoke crack,

    Fall out of the window,

    and I'm never comin' back.

    CSS bugs make me wanna get high,

    They can't get it right no matter how they try.

    Yes, I still feel the pain.

  • Tijs Vrolix says:

    That's exactly what I think when I've finished a new layout and start the horrible IE debugging. We should actually get some kind of payment from Microsoft for all the time we waste on projects (or they could finally come up with a browser that works).

  • Tommy Olsson says:

    Funny, for me it's the other way around: CSS makes me want to stop everyone from using IE! πŸ™‚

    It's not the fault of CSS that Microsoft can't be bothered to implement the recommendations they've agreed on.

    Try to enlighten people instead: tell them about better options available for free: Opera, Firefox and Safari, for instance.

  • will says:

    In my experience, once I worked with and learned about IE's bugs enough, I learned to avoid them when designing. By not doing things that produce the bugs in the first place, I have fewer headaches. And when necessary, I know how to fix them when they appear. By now, we should all have fixes for the bugs in your list pretty much memorized, right?

  • Johan says:

    Here are some tests listed with IE CSS bugs and other browser bugs: worth a bookmark IMHO

    http://www.brunildo.org/test/

  • Marco says:

    I guess I'm going to sound really weird here but I hardly have major problems with IE. Maybe I've adapted a design style that hardly requires stuff that breaks horribly in IE, I don't know. Usually it's just a couple of tweaks and everything's fine for me.

  • Chris says:

    Hi Robert,

    I know how you feel. Most of our customers use IE, sure. I still hope that IE7 will make some things better. And I always hope that some people will do what Tommy describe – sometimes I write pages which are fucked up in IE intentionally >-)

  • Rowan Lewis says:

    While I've come across many of those, I've also come across so many more that have never been documented.

    There are morons out there who keep trying to tell me 'how good quality Internet Explorer is compared to Firefox'…

  • Marco says:

    IE7 will not make anything better. For years to come we're stuck with IE6 because there's an army of users out there that cannot upgrade because they're running windows 2000 or some other pre-XP version of Windows. Microsoft is deliberately not releasing IE7 for those versions of Windows in an attempt to 'pursuade people to upgrade', leaving us web developers stuck with IE6 for a long long time…

    Therefore IE7 will just add yet another layer of complexity because it will most probably have new quirks of it's own.

  • Robert Nyman says:

    People,

    Thank you for your opinions!

    It's absolutely important to enlighten people, but it's pretty hard to convince the whole user base of a web site one's working on to use another web browser.

    I do have high hopes for IE 7, although Marco's definitely right: IE 6 will still be around for a long time.

  • Jens Meiert says:

    OMG, severe IE psychosis! Guys, let's get Robert the hell out of there! πŸ˜€

  • Robert Nyman says:

    Jens,

    Ha ha! πŸ˜€

  • Emil Virkki says:

    Often people use IE just because they have to. For example in corporations and schools the IT department decides the browser is to be IE, and there is no chance of using any other.

  • […]It’s alright Robert…
    …you’re not the only one getting to the end of your tether. We had a major website release to p […]

  • Henrik says:

    I totally agree.

    My site, http://www.haf.se, is done purely in CSS, and hence works great in Opera, Safari and Firefox, but not in IE6 Win.

    However, today I tried submitting it to a screen-shot-taker, which gave me a screenshot of IE5.2 Mac. For some VERY strange reason, the whole layout worked properly in IE5.2 MAC, and a lot better than in IE6… I was bemazed.

    I agree with you that IE sux when it comes to CSS rendering.

  • Henrik says:

    I might also add that floats are rather annoying because of the 3px bug, but can be fixed by displaying them inline instead, and if you want to skip all of that and design a layout that works right away, just juse relative floats.

    div { position: relative; } div div { position: absolute; top; left; }

    Those are my two best tips…

  • Hakan Bilgin says:

    The title:

    "IE makes me want to stop using CSS"

    Do you use Firefox? Because from time to time, the design of this site flips out and everything looks weird (in IE and FF). Also the width of the documents seems to be poorly contraint…'coz of the horizontal scrollbar…

    Anywho, it seems that everyone agrees with Robert here, but I must say that I am tired of the never ending nag…

    One can complain about the tools beeing of wrong type or the absence of the right nuance of color…or just realize that you aren't an artist. In an ideal world, there will still be complaints and nagging (if not more than usual). Understand that those who can and has create wonderfull things with limited tools. Untalented people will still create garbage regards of all the desired elements available.

    Understand that this is begining of a new era…the internet and its technologies are still evolving, and this evolution is influenced by numerous companies and organizations. And expectations and demands will vary from the suply, for many reasons.

    If you accept the complaints, than I guess you don't mind me complaining about humans inability to fly. Many people, including me, would like to be able to fly, but we can't…damn god (or nature or whatever you believe in)…for designing the humans so poorly.

  • Robert Nyman says:

    Emil,

    Totally true, many people can't choose what to use.

    Henrik,

    While those are good advice, <code>position: relative</code> can make text disappear and other "interesting" things when used in conjunction with <code>float</code> and/or a hasLayout fix.

    Hakan,

    I do use Firefox as my primary web browser, yes. If you have problems with this web site, please let me know in a constructive way.

    Regarding nagging:

    I don't know if you come here often or what you work with, but I also normally offer constructive advice how to get things to work in all web browsers. It's not about bashing IE just because it's IE/Microsoft, it's about pointing out general flaws.

    Also, since I do work full time (to say the least) developing web pages, I also feel the need to sometimes channel my frustrations here in my private blog.

    My main gripe isn't IE's lack of support for web standards; what bothers me is the inconsistencies. I imagine that if you had a car that would only work half the time you filled it up with gas, and the other half it would act totally perplexed about getting gas at all, you'd be pretty upset too.

    Then, of course it comes down to talent as well when building web pages, I don't want to argue with that.

    To round this off: I would love to be able to fly! However, in my humble opinion, I believe it to be easier to construct a web browser than a human being… πŸ™‚

  • Rowan Lewis says:

    Henrik, Mac IE was not based on windows IE, and had better CSS support πŸ™‚

  • Hakan Bilgin says:

    I do come here often and read your posts. I have stopped bothering to respond to the nagging everywhere. I have done it here because the atmosphere is positive for deviant opnions. Also, if I didn't appreciate your work, I really wouldn't bother responding.

    With that said; I agree…it should be easier to build a webbrowser that a human being. But there is a reason to the difficulties. A couple of yours ago, MS had to be innovative in browser technology and they have introduced a lot in IE, that wasn't standardized. And for a long period there wasn't any real opponent, and the developers adapted the MS way. Which means that there are a lot of MS customers sitting with solutions hardly connected to the ways invented for and supported by IE.

    Now, MS's options are either to ignore their previous innovations and fall into standard guidelines (which means even more unpopularity among their existing customers), or continue on the path laid earlier and try to innovate thier way into the future (which also result in unpopularity among the developers).

    The third option is to balance between first and second option, which is unbelivable difficult. There are demands and millions of voices and everybody wants different things. And that's just externaly speaking…there are MS internal agenda and demands also, that we're not familiar with.

    Last but not least, the knowledge seems to escape MS. Great developers that have been innovative so far has been and are beeing recruited by the compeditors.

  • Robert Nyman says:

    Hakan,

    Thanks for a calm and well-written response, Also, thanks for the compliments and for reading! πŸ™‚

    I think it's interesting what you write about Microsoft; it describes their current situation very well, but few people look at it that way. I am very curious in what they will do in the future, and what their stance will be.

    That's one of the perspectives I tried to touch on in my Web standards vs. competitive edge post.

  • Robert Nyman says:

    Hakan,

    Yeah, I saw that. Apparently some thing in WordPress…

    I escaped your code so it looks as intended now.

    But definitely, other web browsers have their quirks too.

  • Hakan Bilgin says:

    Well, it's easy to go nuts with FF also… FF (v1.0.6) doesn't render the border of the DIV below, while IE parses everything as expected… Another thing that is really annoying, Webdings should be supported in FF, standards or no-standards…

    <code>

    <html>

    <head>

    <style type="text/css">

    body {background: #EEE;}

    #test {border: red 1x solid;}

    #test a {display: block;}

    #test a:hover {background: silver;}

    .test2 {border: red 1px solid;}

    </style>

    </head>

    <body>

    <div id="test">

    Item 1

    Item 2

    Item 3

    </div>

    <span class="test2">Hello</span>

    </body>

    </html>

    </code>

  • Hakan Bilgin says:

    Notice: The sign "#" where stipped…

  • Jim says:

    FF (v1.0.6) doesn’t render the border of the DIV below, while IE parses everything as expected

    Actually, Internet Explorer will only "work" properly if you are using quirks mode. If you had taken the few seconds to run that code through a validator, you'd see that the border is missing its units (1x should be 1px).

    The CSS specification is very clear on the matter; that border should be ignored. Internet Explorer screws up by displaying the border.

    Another thing that is really annoying, Webdings should be supported in FF, standards or no-standards…

    Webdings is an awful, awful hack.

    For example, the smiley. There is a Unicode character for the smiley. If you include it in a page, it shows a smiley. Simple enough, right?

    But this isn't good enough for some people. Some people feel the need to *not* include the smiley character, but include the 'P' character instead, and then try and set a font (Wingdings) that includes the smiley character where the 'P' character should be.

    Needless to say, everybody who doesn't happen to have that font installed; or who prefers a different font; or search engines; or any other user-agent that processes the information instead of the visual rendering, will get a 'P' character, not a smiley character.

    Unsurprisingly, many browser vendors have said "stop doing that, it's a totally stupid thing to do". Unsurprisingly, many browser vendors want to develop *features* for *end-users* instead of working around other people's stupidity that they could easily fix.

  • Hakan Bilgin says:

    Jim,

    I am a little ashamed, for missing out on "px"…Thanx for pointing out…

    About browser vendors forbidding features because end users might not have that specific font installed; well, it should be up to me and not to browser vendors, if I want to use it or not. Maybe I want to ignore the fact that some of my visitors doesn't have the font, or maybe I know for a fact that my visitors do have the fonts installed (intranet)…

    The backside of using images instead of Webdings (or any other) for smileys, arrows or any other arbitrary signs, is that the network is traficated more and the server has to send a lot of small images to clients…

  • Jim says:

    Hakan,

    It's not about forbidding features. It's perfectly possible to use smileys etc in Firefox. I even explained how to do it properly.

    I never said anything about using images. I said that if you want a character, use that character. Don't use a totally different character and try and use a broken font to "convert" it. You might get the correct glyph some of the time for some browsers, but that's a poor substitute for simply doing it right to begin with.

    The correct characters are there for you to use. Why aren't you using them?

  • Mike says:

    I use the IE6 underscore hack pretty judiciously ……. if my layout gets butchered in IE then I just bust it out.

    Link: http://www.noscope.com/journal/2005/01/showing-cs

  • Robert Nyman says:

    Mike,

    Ah, interesting. Now you probably opened Pandora's box here…

    I never use any CSS hacks, but instead serve IE-specific CSS to IE-only by using conditional comments. I think it's a more elegant solution, and also to separate valid CSS from invalid.

  • Shani says:

    Lets hope all of those bugs will be fixxed in IE7.

    but, that's just a hope πŸ™

  • Robert Nyman says:

    Shani,

    I share your hope, and the IE team have said that these things will be fixed. However, we don't really know until IE 7 has been released…

  • Robert Hartl says:

    Robert,

    – great name πŸ˜‰ (though we're not responsible for it)

    – for me the problem is not CSS but the fact, that most users do use the IE.

    – IE 7 will show, how serious the IE team wants a conform solution.

    – then conditional comments will achieve new importance.

  • Robert Nyman says:

    Robert,

    Yeah, it's a great name, isn't it? πŸ™‚

    As you say, the problem definitely is IE and I have strong hope and confidence that IE 7 wil change that. However,IE 6 will still be around for a long time… 😐

  • Just apply the style

    <code>zoom:1;</code>

    to every element that's misbehaving in IE and you'll be alright :P.

  • Robert Nyman says:

    KBS Gladiator,

    Most of the time, yes. πŸ™‚

  • amenobis says:

    Seems all you guys are hoping IE7 is fixing all the bugs, maybe it will, so what's the matter? Do you really think when IE7 will come out all your customer and all web customers on the entire planet will instantly switch to IE7? … I doubt! Today I still have customer working on Windows 95!!

    I'm absolutely not an "anti-microsoft", even if I'm losing roughly 1/3 of my web design time about IE bugs. In my opinion, Microsoft completely prevented (and are still preventing) the evolution of the Internet by trying to keep the monopole on web browsing. It's a joke how Microsoft couldn't issue a single "update" for IE6 (and previous versions) in order to fix all these well known bugs. And it will last at least for the next 5 years if not a decade.

    Anyway, I can understand Robert when he's thinking going back to table design .. at least it works, but significantly makes web pages bigger. On the other hand, after a while we anticipate bugs .. but unfortunately not all of them.

    So what? I'm just continuing using CSS, because I'm convicted it's the best way to design web pages and I'm using table when it's inevitable. Meanwhile I'm trying to genlty make understand my customers there is something else than IE …. firefox is by far my favorite, because it looks very much like IE, so customers are quickly acustomed to it. That's my "little" war against IE!

  • Robert Nyman says:

    amenobis,

    Thanks for your comment. Good to hear about your little war! πŸ™‚

    And yes, I agree: at least IE 6 will probably at least be around till 2010… 😐

    But we'll see what happens, maybe a lot of users will be shifting web browser to other ones or upgrade to IE 7 so at least the remaining usage base is neglible.

  • webdesign says:

    I only work with CSS. IE6 ist terrible, but IE7 solves not all problems. So for every project I work with 4 browsers and the most work is to erase the mistakes in the different browsers. But I will work with css further…

  • […] Looks like I’m not the only one fed up with IE. […]

  • Tobey says:

    I also completely said goodbye to IE. Firefox is the future, lately I came along a very interesting statistic which said that there are almost as many users of FF as there are of IE. That's a proof of how great Mozilla has promoted their browser!

  • kaiserkraft says:

    We think the exact same here!

  • EspadaV8 says:

    Still feeling the pain 3 years after this post, alas I'm still seeing about 1/3rd of our IE uses using IE6, although IE7 still has just as many bugs, only slightly different.

  • Robert Nyman says:

    EspadaV8,

    Couldn't agree more! πŸ™‚

  • May the fleas of a t says:

    So here we are in 2010 after 5 years and IE6 still refuses to die. For days I've been attempting to get to the bottom of a particularly obnoxious Peekaboo bug; the application's almost ready but being held up with this…

    After 5 years we still all hate Microsoft for producing such unadulterated awful code as Internet Explorer. IE7 turned out to be nothing more than IE6 with some fixes, but with new bugs added. IE8 was a little better but still not perfect.

    With a bit of luck the EU's ruling that Microsoft have to offer choice of Browser on the desktop may well change things.

    There's a special place in hell reserved for the managers and marketeers at Microsoft…

  • Robert Nyman says:

    Yes, we can only cling on to the small hope we have. πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.