Two issues I can't seem to figure out...one IE specific, the other FF and IE

I'm working on homepage redesign, and I'm stuck on two issues right now that I hope somebody can help me figure out how to fix. As of right now, I'm using IE7 and Firefox 3.

1) IE7 issue:



2) You can also see the issue which happens in both browsers in between the three pen images. It's a inline list, but there is a gap between each item...No matter what I do, I can't seem to figure out how to close those up?

Here's my CSS for this top section:

#topleft {
float: left;
width: 300px;
padding-top: 11px;
background-image:url(images/custom/minititle_advertisement.gif);
background-repeat:no-repeat;
background-position: top center;
}

#topright {
float: right;
width: 615px;
padding-top: 11px;
background-image:url(images/custom/minititle_featured_post.gif);
background-repeat:no-repeat;
}

#featuredpost {
width: 599px;
height: 234px;
border: 8px solid #3c3c3c;
}

#featuredpostdesc {
position: relative;
top: -33px;
height: 30px;
background-color: #000;
filter:alpha(opacity=72);
-moz-opacity:0.72;
-khtml-opacity: 0.72;
opacity: 0.72;
}

#featuredpostdesc h2 {
color: #fff;
padding: 8px 10px;
}

#topleftL2 {
float: left;
width: 417px;
margin-top: 14px;
margin-bottom: 15px;
}

#stores {
width: 417px;
height: 150px;
border-top: 8px solid #3c3c3c;
background-image:url(images/custom/background_cfstores.jpg);
background-repeat:no-repeat;
}

#stores p {
color: #bec274;
font-style: italic;
font-size: 12px;
}

#stores a {
color: #fff;
}

#stores a:hover {
color: #bec274;
background-color: #000;
text-decoration: none;
}

#stores p.left {
float: left;
width: 120px;
margin-top: 63px;
margin-left: 15px;
}

#stores p.right {
float: right;
width: 200px;
margin-top: 63px;
margin-right: 22px;
}

#toprightL2 {
float: right;
width: 498px;
margin-top: 10px;
padding-top: 11px;
background-image:url(images/custom/minititle_featured_cfg_direct_products.gif);
background-repeat:no-repeat;
}

#toprightL2 li {
display: inline;
}

Code (markup):

Here's the HTML for the same section:

<div id="topleft">
<img src="<?php bloginfo('template_url'); ?>/images/custom/temp_300x250.jpg" alt="" />
</div>
<div id="topright">
<div id="featuredpost">
<img src="<?php bloginfo('template_url'); ?>/images/custom/temp_featuredpost.jpg" alt="" />
<div id="featuredpostdesc">
<h2>Marc Newson $300,000+ Cabon Fiber Black Hole Table</h2>
</div>
</div>
</div>

<div style="clear: both;">

<div id="topleftL2">
<div id="stores">
<p class="left">Real-time database of carbon fiber products on eBay.<br /><a href="#">Check it out.</a></p>
<p class="right">CFG Direct is Carbon Fiber Gear's retail store where we sell carbon fiber products direct to you.<br /><a href="#">Check it out.</a></p>
</div>
</div>
<div id="toprightL2">
<ul>
<li><img src="<?php bloginfo('template_url'); ?>/images/custom/temp_featuredproduct.jpg" alt="" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/custom/temp_featuredproduct.jpg" alt="" /></li>
<li style="margin-left: 0;"><img src="<?php bloginfo('template_url'); ?>/images/custom/temp_featuredproduct.jpg" alt="" /></li>
</ul>
</div>

Code (markup):