This is my page. It works just fine in firefox, but in ie, when i hover over the the anchor tag, the floating gets messed up and skips lines.
This goes away when i take away the a:hover {font-size:14px}, but i kinda wanna keep that.

Whats wrong?

both folder.png and folderhover.png are 200px images

also, if you have any suggestions on how to achieve this layout in a better fashion, let me know.

HTML Code:
<!doctype html>
<head>
	<style>
		.container {width: 890px; margin: 0 auto;}
		.item {float: left; width: 200px; min-height: 225px; padding: 10px;}
		.item a {text-decoration: none; font: 12px helvetica, sans-serif; color: #555; text-align:center; display: block;}
		.item a:hover {font-size: 14px; color: #000; background: url('folderhover.png');}
		
		.item a img {border: 0px;} /* for ie */
	</style>
	<title>Index</title>
</head>
<body>
	<div class="container border">
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />

				<span>Folder 0</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 1</span>
			</a>

		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 2</span>
			</a>
		</div>
		<div class="item">

			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 3</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />

				<span>Folder 4</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 5</span>
			</a>

		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 6</span>
			</a>
		</div>
		<div class="item">

			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 7</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />

				<span>Folder 8</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 9</span>
			</a>

		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 10</span>
			</a>
		</div>
		<div class="item">

			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 11</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />

				<span>Folder 12</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 13</span>
			</a>

		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 14</span>
			</a>
		</div>
		<div class="item">

			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 15</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />

				<span>Folder 16</span>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<img src="folder.png" width="200" height="200" alt="img" />
				<span>Folder 17</span>
			</a>

		</div>
	</div>
</body>