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

 

[lozza]

</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>

Remove the top</div> tag and put it at the botom, the adobe link will then fall into place below the rest of the navigation links with the same styling.

If thats not what you want, and probably the better way to do it would be to create another div for the adobe link.

so you would have:

<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>
<div id="links">
<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>
</div>
</div>

 

[Sherbs]

Why do you need a list for an image?