IE Rollover Problem

Here’s a weird thing I encountered yesterday. I’m trying to do a simple list-based rollover menu.

However, for some reason in IE each item has a two pixel gap between it and the next, despite the fact that in the CSS border-bottom is set to 1px.

When I change the font from Arial to Trebuchet MS, however, the problem goes away! The only thing I’ve changed is the font-family. This doesn’t make any sense, does it?

Any help would be much appreciated.

2 thoughts to “IE Rollover Problem”

  1. I wonder if there is a different, inherent line-height associated with each font. Therefore, I wonder if reducing line-height for Arial would solve the extra space.

Comments are closed.