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

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.