IE em counting error?

[Stomme poes]

Hello all,
I'm wondering if there's some em counting error in IE? This includes IE7 as well.

I tried copying the effect Eric Meyer has on his Complex spiral demo. I couldn't do it exactly the same because I'm floating a box right on a liquid page. But, I got it working. I have a right-floating sidebar with a menu. The menu has a background (the "normal" image) and each anchor has its own copy of the "overexposed" image to show on hover (I couldn't use just one fixed image like Eric did), and each anchor is 2em high. So, all the coordinates for each "overexposed" image is off by 2 em. Works in everything that I can test except in IE, where it also works, but only on the first menu item. The next menu item is off by just a hair. The next one is off by a bit more, and as you go towards the bottom, it gets worse.

It's as if IE is adding 2em and 2em and getting 4.1em or something.

http://stommepoes.jobva.nl/Tests/koffie.html
Yes, I've got permission for the images (they're from stock exchange .hu but I needed permission/to notify the owners for when this gets (freely) distributed).

No, this isn't a finished page, though the menu was pretty much done. But any other critisism with code is welcome.

[Erik J]

Set the height on ul a-tag to get it to correspond with line-height.
(It is triggering the IE has-layout. Or you can test triggering IE has-layout with IE property zoom:1 insted)

ul a {
  display: block;
  height:2em;
  text-decoration: none;
  font: bold 1em/2em Verdana, Arial, sans-serif;
  color: #fff;
  text-align: center;
}

[Erik J]

Though a better solution is to float the li.

ul li {
  float:left;
  width: 250px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul a {
  display: block;
  text-decoration: none;
  font: bold 1em/2em Verdana, Arial, sans-serif;
  color: #fff;
  text-align: center;
}

[Paul O'B]

HI,

Ie has a lot of whitespace problems and "haslayout" issues with list and the best way to defeat both is as erik suggested above and to float the list items instead. This completely collapses the white space and the menu will be almost pixel perfect.

In fact for IE most lists (and anchors within the lists) are better floated and where pixel precision is a concern. This does of course depend on the layout and the fact that you will probably need to have fixed widths etc.

[Stomme poes]

Ah thanks! I didn't know IE7 still had haslayout issues... in fact, I have little idea of what is fixed and not in IE7. Teh googles only shows what everyone found in the Beta, but not the current shipped w/Vista.

It's a little bland still, but anyone who wants that template may use it. I like that it's not white. I got permission for all the images except the arch, which I dunno if I'll keep or replace with bricks (the current idea). The arch is from a much huger image (also Royalty free) from stock xchange .hu

Thx again.