weak support of css2 in msie

Making a truly cross-platform Web site is considerably difficult, especially if you try using standard CSS2 to stylize your content. The most prominent source of this difficulty is MSIE's incredibly weak support of CSS. MS claims CSS will be better in IE 7.0. I doubt it.

I'm going to use this post to record the inconsistencies I find with MSIE's 6.0 support of CSS2, thereby accomplishing two goals:

1. to help me track issues so I know what I can do elegantly versus what I'll be forced to hack


2. to serve as a reference for others that are attempting to separate structure from style in their sites using XHTML and CSS

So here we go... keep your arms and legs inside the car at all times....

Item 1 - child selectors

In CSS, you should be able to select a specific child element using greater-than notation like this:

body>p {
  color: red;
}

The MSIE parser dies when it encounters this. The more general descendant selector works fine, but child selectors are broken. This all works fine in Firefox.

This bug is just sad. How do you screw up one of the most basic selectors in CSS? It would be like writing a Java compiler that doesn't understand the syntax for calling a method on an object.

On a side note, this is a great bug to use to your advantage if you're forced to write MSIE-specific or Firefox-specific CSS. For example:

/* MSIE */
#myTag {
  margin: 0px 0px 0px 200px;
}
/* Firefox */
html>body #myTag {
  margin: 0px 0px 30px 200px;
}

Item 2 - pseudo-element selectors and the content property

I tried to make a breadcrumb using purely structural elements. I should be able to do something like this in XHTML:

<div class="breadcrumb">
  <div class="crumb">Home</div>
  <div class="crumb">Vehicle Trace</div>
  <div class="crumb">Summary</div>
</div>

... and then stylize it with CSS like so:
div.crumb {
  display: inline;
}
div.breadcrumb:first-child:before {
  content: "Return to: ";
}
/* add a double greater-than for the right sibling of every crumb */
div.crumb + div.crumb:before {
  content: " » ";
}

This gives me a structurally defined breadcrumb that is styled with CSS. Firefox renders this correctly; it looks something like this:

Return to: Home » Vehicle Trace » Summary

MSIE, on the other hand, chokes on the ':before' and 'content:', both of which are standard in CSS2.

Item 3 - adjacent sibling selectors

Consider the CSS expression e1 + e2. This selector will select an element e2 that is the next adjacent sibling of an element e1. As an example, consider a table that has two rows and three columns. Let's say you wanted to make the first column bold and the rest normally weighted. You could do something like this:

  table tr td {
    font-weight: bold;
  }
  table tr td + td {
    font-weight: normal;
  }

You could then apply this CSS to your HTML:

  <table>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </table>

Firefox correctly renders the 'One' as bold and 'Two' and 'Three' in normal text. MSIE doesn't recognize the adjacent sibling selector and just shows all three as bold.

I had planned to use this type of selector in a table to right-align the first column (containing label text) and left-align the second column (containing data values). Since MSIE doesn't support this, I'll have to resort to assigning a class to each <td> value.

For further reading on this subject, I would suggest Jeff Zeldman's discussion on the subject.

Item 4 - attribute selectors

I want to stylize all <input> tags that are of type="text" (that is, only text fields and not buttons, etc.). In CSS, I should be able to do something like this.

  input[type="text"]
  {
    font: 10px Verdana;
  }

Works in Firefox but not in MSIE. Big surprise!

More items to come...

This is worth checking out too.

Update (21-Mar-2006): I'm putting an end to this post. I am finding three or four problems a day--far too many to keep updating this post. Besides, Quirks Mode and Position Is Everything are more than adequate for cataloging these types of problems. So, enough beating a dead horse. Supposedly IE7 will be better at supporting CSS with at least close to CSS level 1 compliance. That doesn't help us until almost all our user base moves to IE7, but I guess that's life.

visual form's impact on cognitive processes

This blog post is a good one for us wanna-be psychology hacks. :-) In it, Rashmi Sinha discusses how form impacts information retrieval (which then impacts interface design). This post is a good differentiator of implicit (unconscious) versus explicit (conscious) long-term memory.

amazon: it's not just for media and electronics anymore

It's amazing what you can buy on Amazon these days. I had a friend request this for a graduation gift.

gift idea

Too bad my birthday and Christmas have passed. This would make a cool, geeky gift.

Thinkgeek always has cool shirts. I've always wanted an All Your Base shirt. If you're not familiar with the phrase "All Your Base Are Belong To Us," check out this link.

python encroaches... and the people doth rejoice

This article claims Python is being used more frequently for enterprise systems. I sure hope so. I'd like to use Python more at work than I do now. I like being able to write terse code (as opposed to, say, the bulky OO syntactic idioms found in Java pre-5.0).