web page validates, works in FF, but not IE, HELP!
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>
