IE + css = fun (simple 'clear' help please)

[Scam]

http://2m2l.net/scam/work/tranquil/ (please load the popup)

Everything is nice and spangly in FF but IE isnt quite there.

With the frame on the right... you can see IE has mucked it up. It should be how it appears in FF. Whats wrong?

HTML:

<div id="nav">

<div id="img"><a href="thiswontwork.html" target="vidframe" title="Click to View"><img src="img/vidcaps/28days.jpg" alt="28 Days Later" /></a></div><!--/img-->
<div id="description">
<p><a href="thiswontwork.html" target="vidframe" title="Click to View">Morbi porttitor. Sed erat arcu, malesuada vitae, commodo sit amet, posuere volutpat, enim. In in nibh. Sed sed sem. Vestibulum tellus elit, gravida id, mollis mollis, cursus ac, ante. In hac habitasse platea dictumst. Duis blandit dignissim pede. Ut justo. Curabitur semper condimentum risus. Etiam imperdiet turpis vitae turpis. Curabitur sed augue eget nisl aliquet hendrerit. Aenean porttitor tristique quam.am dignissim aliquet lectus. Etiam ut neque.</a></p>
</div><!--description-->

<div id="img"><a href="thiswontwork.html" target="vidframe" title="Click to View"><img src="img/vidcaps/28days.jpg" alt="28 Days Later" /></a></div><!--/img-->
<div id="description">
<p><a href="thiswontwork.html" target="vidframe" title="Click to View">Morbi porttitor. Sed erat arcu, malesuada vitae, commodo sit amet, posuere volutpat, enim. In in nibh. Sed sed sem. Vestibulum tellus elit, gravida id, mollis mollis, cursus ac, ante. In hac habitasse platea dictumst. Duis blandit dignissim pede. Ut justo. Curabitur semper condimentum risus. Etiam imperdiet turpis vitae turpis. Curabitur sed augue eget nisl aliquet hendrerit. Aenean porttitor tristique quam.am dignissim aliquet lectus. Etiam ut neque.</a></p>
</div><!--description-->

etc.

</div><!--/nav-->

CSS:

div#nav { 
	width: 250px; 
	height: 430px;
	color: #fff; 
	overflow: auto;
	background: #2b86bd url(img/nav-bg.jpg) repeat-y scroll top;
	}
	
div#img { /*--inside #nav--*/
	float: left;
	clear: both;
	width: 70px;
	height: 70px;
	border: 1px solid #000;
	margin-left: 5px;
	margin-top: 5px;
	}
	
div#description { /*--inside #nav--*/
	float: right;
	width: 145px;
	font-size: 10px;
	}

I've never been truly clear with the 'clear' stuff so i guess i've done something wrong there?

Thanks for any help.

EDIT: Also any blue hyperlinks dont seem to hover properly in IE


CSS:

a:link { color: #2ea8fe; text-decoration: none; border: 0;}
a:visited { color: #2ea8fe; text-decoration: none; border: 0;}
a:hover { color: #2ea8fe; border-bottom: 1px solid #2ea8fe;}
a:active { color: #2ea8fe; border-bottom: 1px solid #2ea8fe;}

 

[Scam]

Well i know why no one has replied.. because that is some truly horrendous markup up there^ lol. Multiple id's on the same page? Eurgh i must be going crazy!

Changed to:

<div class="navitem">
<div class="img"><a href="thiswontwork.html" target="vidframe" title="Click to View"><img src="img/vidcaps/28days.jpg" alt="28 Days Later" /></a></div><!--/img-->
<div class="description">
<p><a href="thiswontwork.html" target="vidframe" title="Click to View">Morbi porttitor. Sed erat arcu, malesuada vitae, commodo sit amet, posuere volutpat, enim. In in nibh. Sed sed sem. Vestibulum tellus elit, gravida id, mollis mollis, cursus ac, ante. In hac habitasse platea dictumst. Duis blandit dignissim pede. Ut justo. Curabitur semper condimentum risus. Etiam imperdiet turpis vitae turpis. Curabitur sed augue eget nisl aliquet hendrerit. Aenean porttitor tristique quam.am dignissim aliquet lectus. Etiam ut neque.</a></p>
</div><!--description-->
</div><!--/navitem-->

and

div.navitem { clear: both;}
	
div.img { /*--inside #nav--*/
	float: left;
	width: 70px;
	height: 70px;
	border: 1px solid #000;
	margin-left: 5px;
	margin-top: 5px;
	}
	
div.description { /*--inside #nav--*/
	float: right;
	width: 145px;
	font-size: 10px;
	}

Not sure if there's still an easier way but