Internet Explorer 9 Display Problem

Hello

I was wondering if anyone can help me.

I have a website that looks completely normal in Firefox - but in internet explorer 9 the images in the middle are all out of place.

Here is a pic of the place that is messed up on my website in IE9:



And here is what it should look like and how it looks in firefox:



Here is the code for that particular part of the site:

<div id="middle">

<div class="img3"><img src="<?php bloginfo('url'); ?>/i/img06.jpg"width="180" height="95" /><br><a href="index.php?cat=5"><img src="<?php bloginfo('url'); ?>/i/title/cat-advice.png" width="180"style="padding:0px 0px 0px 0px;"/></div>
<div class="img3"><img src="<?php bloginfo('url'); ?>/i/img07.jpg"width="180" height="95" /><br><a href="index.php?cat=6"><img src="<?php bloginfo('url'); ?>/i/title/cat-tips.png"width="180" style="padding:0px 0px 0px 0px;"/></div>
<div class="img3"><img src="<?php bloginfo('url'); ?>/i/img08.jpg"width="180" height="95" /><br><a href="index.php?cat=7"><img src="<?php bloginfo('url'); ?>/i/title/cat-info.png"width="180" style="padding:0px 0px 0px 0px;"/></div>
<div class="img3"><img src="<?php bloginfo('url'); ?>/i/img09.jpg"width="180" height="95" /><br><a href="index.php?cat=271"><img src="<?php bloginfo('url'); ?>/i/title/cat-articles.png" width="180"style="padding:0px 0px 0px 0px;"/></div>
<div class="img3"><img src="<?php bloginfo('url'); ?>/i/img10.jpg"width="180" height="95" /><br><a href="index.php?cat=4"><img src="<?php bloginfo('url'); ?>/i/title/cat-featured.png" width="180"style="padding:0px 0px 0px 0px;"/></div>


</div>

Also I should mention that every other part of the website looks file - it is just that middle part that looks funny - but only in internet explorer 9.

Thanks for your time.
Clare