Help with image position on website

[KevinCB]

Hi,

I'm having a problem with positioning an image. It works fine in IE6, but not in IE7 or Firefox.

Web Link

The image is the adobe reader link, that seems to end up in the middle of the navigation, instead of underneath it.

This is the source for my navigation:

<div id="l-col" align="center">
<div id="menu">
  <ul>
   <li><a href="index.htm">Home</a></li>
   <li><a href="about.htm">About REG</a></li>
   <li><a href="REG_team.htm">The REG Team</a></li>
   <li><a href="news_events.htm">News/Events</a></li>
   <li><a href="case_studies.htm">Case Studies</a></li>
   <li><a href="links.htm">Useful Links</a></li>
   <li><a href="contact_us.php">Contact REG</a></li>
   <li><a href="feedback.php">Feedback To REG</a></li>
  </ul>
</div>
  <ul>
   <li><a href="http://www.adobe.co.uk/products/acrobat/readstep2.html" target="_blank"><img src="images/getacro.gif" alt="Get Acrobat Reader" width="88" height="31" border="0" /></a></li>
  </ul>
</div>

This is the CSS source for the above HTML:

#l-col {
 float:left;
 background: #003F54;
 color: #333;
 width:200px;
 margin:0;
 padding:0;
 }

* html #l-col {margin-right: -3px;}

#menu {
  padding:0;
  margin:0;
  height:45px;
  font-weight:bold;
  }

#menu ul {
  padding:0;
  margin:0;
  list-style-type:none;
  }
  
#menu li {
  display:block;
  width:200px;
  height:45px;
  margin:0;
  padding:0;
  border-bottom:1px solid #fff;
  }

#menu a, .menu a:visited {
  display:block;
  height:45px;
  padding:0px 15px;
  margin:0;
  color:#fff;
  text-align:right; 
  background:#00607C;
  text-decoration:none;
  }

#menu a:hover {
  color:#000; 
  background:#F2EA87;
  text-align:right;
  }

Can anyone help me sort the positioning out?

Thanks