the vengeful cow blog

Three more reasons to hate Internet Explorer

Posted by marshall Tue, 16 Aug 2005 07:15:00 GMT

Internet Exploder, Internet Exploiter, Internet Expletive...as if I need any more reasons to loathe it, today I was unhappily introduced to three more bugs. Well, not so much bugs as key portions of CSS that were defined seven years ago -- before the release of Internet Explorer 5 -- yet are missing from even the latest beta version of Internet Explorer 7.

Today's exercise in IE frustration deals with creating flexible lists in CSS. The idea behind CSS is that the HTML can describe the content in meaningful ways (e.g. "this is a list") and the CSS style sheet can define rules for how to present the content (e.g. "use a 12-point font with square bullets"). So, for example, you could have an unordered list ("ul") defined in HTML like this:

    <ul class="food">
      <li>Steak</li>
      <li>Chicken</li>
      <li>Shrimp</li>
    </ul>

Without any style sheet applied, this will appear as:

• Steak
• Chicken
• Shrimp

Well, suppose you wanted those line items ("li" elements) to all appear in one line, like this:

Steak | Chicken | Shrimp

In the Bad Old Days of intermingled content and presentation, you would have had to re-write the HTML:

    <b>Steak</b> | <b>Chicken</b> | <b>Shrimp</b>

That's not too much of a problem for one page, but suppose we're talking about a site menu that appears on every single page of a massive site. That could get rather tedious. Plus, by doing this you've lost the meaningful markup telling the browser that this is a list -- information that could be useful for small-screen renderers or text browsers or browsers for the disabled.

With CSS, you don't have to change anything at all in the HTML. You just put the following in your CSS style sheet:

    ul.food li {
      border-left: 1px solid black;
      font-weight: bold;
      display: inline;
      padding-left: 0.5em;
    }

This selects all of the line items in the "food" unordered list, places a border to the left of each item (creating the vertical bar), makes each item bold, makes each item "inline" (as opposed to each being on its own line), and adds some padding to space them out from each other. So far so good...except that when you do this, the first item has a vertical bar to its left. We don't want the bar on the first one, we just want it between the items.

Well, no problem. CSS is made to handle this kind of thing. Simply follow up the previous rule with this:

    ul.food li:first-child {
      border: none;
    }

This overrides the previous rule so that the very first "li" doesn't have the border. Beautiful! Except for one tiny detail: it doesn't work on Internet Explorer. Yes, even though :first-child was defined in the 1998 CSS2 specification which Microsoft helped write, Microsoft decided to leave this out of their own browser, and all subsequent revisions of it.

Well, OK, we'll try another way. CSS has a way of specifying that when an element follows another element, a certain rule should be applied. So the two rules listed above could be re-written as:

    ul.food li {
      display: inline;
      font-weight: bold;
      padding-left: 0.5em;
    }
    ul.food li + li {
      border-left: 1px solid black;
    }

Good, so now only line items that aren't the first one will get the line next to them. Except Internet Explorer doesn't support this either. Not in IE 5.0, not in 5.5, not in 6.0, not in any of the service packs, not in the new 7.0 beta -- all of which have been released since Microsoft helped write the specification for it.

The third useful CSS property for lists that I've been working with is the "immediate child" selector. Suppose you have multiple nested lists, and you only want to apply formatting to the first level of indentation. You can do it like this:

    ul.food > li {
      font-weight: bold;
    }

Unless you're using Internet Explorer, which of course doesn't support this one either.

Yeah, it's basically impossible to do useful things with lists without resorting to littering the HTML with unnecessary classes. That is, to get the unordered list without the first bar, you'll have to do something like:

    <ul class="food">
      <li class="first">Steak</li>
      <li>Chicken</li>
      <li>Shrimp</li>
    </ul>

And then you'll need to write up a rule that matches li.first. You'll need to do this for every list that you want to style in such a manner. Hope you don't need that class attribute for anything useful.

So why do these problems exist? Why is Internet Explorer's support for PNG, XHTML, :before and :after selectors, DOM events, the object tag, and so many other long-standardized features so miserably broken? Well, I think that all comes down to competition. After Microsoft used its operating system monopoly to take over the browser market (preinstalling IE on every PC), Microsoft disbanded the IE team and let the browser remain the mess it was. Having virtually killed Netscape, they focused on squashing competition in other markets. Only recently with the success of Firefox has the IE team been reinstated to extinguish the fire, once again pushing in the bare minimum set of features to keep people from realizing that there are better options out there.

(sigh)

And Microsoft will still call it innovation, and people will still believe it.

I should mention that all three of these work as expected in Firefox and Safari, the two other browsers I use on a regular basis.