web page validates, works in FF, but not IE, HELP!

**deller** · 07-27-2011 05:20 PM

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>

**deller** · 07-27-2011 05:23 PM

figured it out. sorry for the bother

**Frank62** · 07-27-2011 10:08 PM

Please read this post: http://www.webdeveloper.com/forum/sh...ad.php?t=68822.

Thread: web page validates, works in FF, but not IE, HELP!

Thread Tools

Display

web page validates, works in FF, but not IE, HELP!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions