Why doesn't IE display this requested background image?

Question

Here's an odd rendering difference between IE and other browsers.

Internet Explorer 8

Firefox 3.5

Chrome 5

See the difference? That vertical line suddenly stops in IE8. That's because IE8 refuses to display a certain background image. Here's a relevant snippet of CSS code:

td#leftbar {
    background: url(img/leftbar.gif) repeat-y right top;
    width: 100px;
}

You can get additional information by viewing the website on your own computer here: http://labs.pieterdedecker.be/vspwpg/

Answer 1

The problem is not leftbar: It is the leftbartop table cell stretching all the way down to the bottom. That is because leftbartop is in the same table row as the content.

In fact, I think IE is the only browser doing this correctly: All elements in the tr get forced to the same height. IE is ignoring the columns' rowspan properties for some reason. Why, I do not know.

The first thing that comes to mind in terms of a solution - unless somebody comes up with an explanation for this behviour - is having a separate table on the left-hand side with the first (leftbartop) and third rows (leftbarbottom) having a fixed height.

Oh, and using tables for layout is no longer socially acceptable. Just as a side note :)

Answer 2

I'll second Pekka's comment about avoiding tables for layouts, but since proposing serious structural changes would be a bit extreme, the following CSS seem to work well enough to fix the problem:

TABLE#body {
  background:url(img/leftbar.gif) repeat-y 94px top;
  border-collapse:collapse;
  width:100%;
}

TD#leftbar {
  width:100px;
}

TD#leftbarbottom {
  background:#FFFFFF url(img/leftbarbottom.gif) no-repeat right top;
  height:100px;
}

As far as why there is a difference between IE and Firefox/Chrome, the only potentially relevant piece of information that I could find right now was the CSS 2.1 section on table height, which states:

CSS 2.1 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.

So, not only is IE's behaviour bizarre, there's doesn't seem to be a clear cut explanation of what should happen. In IE's case, space required by the multi-row cells appears to be divided up using some sort of relative percentages related to the minimum height of each included row.

To illustrate this, you can cause #leftbar to take up all the space it's leaving empty now by using the following rules:

TD#leftbartop {
  height:1px;
}

TD#leftbar {
  height:150px;
}

Another interesting example is a 1/3, 2/3 split:

TD#leftbartop {
  height:33px;
}

TD#leftbar {
  height:66px;
}

Note that if you set the height to something unreasonably small (like 1px in the earlier example), it calculates a height for that cell that is not based on the relative percentage, but something else. I'm not sure where that comes from right now, but I'll play around with the numbers and see if I can take a guess at it later on.