A little help on a static html widget
 

I could use a little help with a static html widget. Below is a js picture slider code that I am using in a static html widget. Please take a look at my coding, its the cause of my website not working in Internet Explorer 7,8 and 9. Thanks in advance for your help.
Marc---

<style type="text/css">
ul#slider {
width: 710px;
height: 360px;
list-style-type: none;
background-color: #ffffff;
margin: 0;
padding: 0;
overflow: hidden;
}

ul#slider li {
float: left;
position: center;
font-color:#eae4e6;
/*display: none;*/
}
.top {
top: 0;
.bottom {
bottom: 0;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mySlider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").mySlider({
timeOut: 9000,
captionOpacity: .7
});
});
</script>
<ul id="slider">
<li>
<img src="images/ads/Marquee/slider/2.gif" alt="" />
<div class="top">
<b> America has Come to an Energy Crossroad . . .</b> </font>
</div>
</li>
<li>
<img src="images/ads/Marquee/slider/9.gif" alt="" />
<div class="bottom">
<b> Can the US Drill It's Way Out ? ? ?</b>
</div>
</li>
<li>
<img src="images/ads/Marquee/slider/4.gif" alt="" />
<div class="bottom">
<b> Is Natural Gas the Solution ? ? ?</b>
</div>
</li>
<li>
<img src="images/ads/Marquee/slider/5.gif" alt="" />
<div class="top">
<b> Are Biofuels the Answer ? ? ?</b>
</div>
</li>
<li>
<img src="images/ads/Marquee/slider/7.gif" alt="" />
<div class="top">
<b> Is It Solar ? ? ?</b>
</div>
<li>
<img src="images/ads/Marquee/slider/8.gif" alt="" />
<div class="top">
<b> What About Wind ? ? ?</b>
</div>
</li>
</li>
</ul>

Just taking a quick look (it's hard to read when you don't put it in code or html tags), I see a </font>, with no <font> anywhere and I see two </li> at the end when only one is needed. Fix the html and then see if it works.

Just because I had the extra</li> it was messing up IE. Thank you so much! Probably have 120 hours in trying to figure that out.
Marc---