I did some more cross-browser testing; it turns out that my pages look like crap under Internet Explorer, and probably have for a while. Specifically, on the book card section of the page, the headers (Title:, Author:, etc.) look fine, but all the values are lined up horizontally in a row. I suspect it’s also interpreting some of the CSS I added yesterday differently as well, but the problems there are less severe.

Safari agrees with Firefox/Galeon, so it’s probably a bug in IE’s CSS. Which, apparently, isn’t uncommon, though all browsers have CSS bugs; it’s certainly conceivable that my CSS is wrong and that I’ve gotten lucky. I’ll have to look at the spec some more. Or maybe there’s something else – e.g. maybe IE has a default stylesheet that is being correctly interpreted (together with mine) to lead to the behavior I’m seeing, so perhaps I’d get the behavior I want if I can figure out what to override.

If anybody has any insights, here’s the relevant bits:

dl {
  float: left;
  width: 100%;
}
dt {
  float: left;
  clear: left;
  width: 100px;
  font-weight: bold;
}
dd {
  float: left;
  margin-left: 0;
  margin-bottom: 2px;
}

So the dt bits are being lined up vertically as expected, but IE thinks that the dd entries can all be placed on one line. And it’s not clear to me that that’s crazy: there’s no clear attribute there, after all.

It’s not clear what the next course of action is. It’s certainly unfortunate; on the other hand, realistically I’m the main person who looks at those pages, and I suspect that you, my beloved audience, are heavily Firefox-weighted as well. So I’m not sure that doing something about this is urgent. If I decided it’s worth changing, I can presumably generate and style CSS that doesn’t suffer this problem, but I’ve grown attached to my dl usage.

I will mull it over.

Post Revisions:

There are no revisions for this post.