I have <img> links within a DIV (stacked on top of each other).

In IE, there seems to be a "default" space being put on the top/bottom of each image. I used "overflow:hidden" and that seemed to get rid of some of the whitespace.

In Firefox it looks fine.

#nav {width:141px; float:right; overflow:hidden;}
<div id="nav">
  <img src="_assets/images/common/linkInfo.gif" />
  <img src="_assets/images/common/linkHome01.gif" alt="Home" width="141" height="17" />
  <img src="_assets/images/common/linkAboutUs01.gif" alt="About Us" width="141" height="17" />
  <img src="_assets/images/common/linkContactUs01.gif" alt="Contact Us" width="141" height="17" />
  <img src="_assets/images/common/linkDividerA.gif" alt="" width="141" height="11" />
  <img src="_assets/images/common/linkCarpenters01.gif" alt="Carpenters" width="141" height="17" />
  <img src="_assets/images/common/linkMillwrights01.gif" alt="Millwrights" width="141" height="17" />
  <img src="_assets/images/common/linkAlliedWorkers01.gif" alt="Allied Workers" width="141" height="17" />
  <img src="_assets/images/common/linkDividerA.gif" alt="" />
  <img src="_assets/images/common/linkSiteMap01.gif" alt="Site Map" width="141" height="17" />
  <img src="_assets/images/common/linkDividerB.gif" alt="" width="141" height="10" />
Site: http://www.jamiegerrard.com/carpentersUnion/

Any suggestions? Do I need to use a hack? And can anyone point me to a resource that contains differences in CSS rendering between the different browsers?

Thanks Jamie