Side effects of vertical-align in Internet Explorer

While I was doing some HTML editing yesterday, I stumbled upon an issue in Internet Explorer. I was constructing a table, in one row of which there was supposed to be an image, one pixel high. Looking something like this (showing the border here to make things easier to see):

Text one Text two

To be clear, the image itself is this: (maybe not that easy to see between the table border lines).

I’m quite hopeful that everybody should be able to see the table just the way I was intending it to look, with the cell spanning two columns exactly one pixel in height. Problem was, in the page I was editing yesterday, it didn’t look that way in IE, while it did in Firefox. Instead, it looked something like this (simulated):

Text one Text two

Well, it took me quite a while to find out where this was coming from, and I wasn’t able to find that hint anywhere on the web. That’s why I thought it might be useful for me to publish it here, and also to make me remember it myself if it ever comes up again. So, the reason for this was that somewhere in a voluminous stylesheet system in use with that page, there was this entry:

img {
  border: none;
  vertical-align: middle;
}

Setting the img tag to default to a middle vertical-align shows the problem in IE. Here’s the table once more, this time with a style="vertical-align: middle;" on the img tag. Everything’s as it should be in Firefox, but you should be able to see the problem in IE. For the record, my IE shows version 6.0.2900.2180.xpsp_sp2_rtm.040803-2158 (BTW, do they employ extra staff to create those version numbers?).

Text one Text two

(Ah yes… if you’re just using IE to look at this, do you have any idea why the <pre> box above shows that ugly additional space in the bottom? I never hunted that one down, wasn’t as important as the image thing. Once again, something that doesn’t show in a browser which really understands CSS.)

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s