www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid View

  1. #1
    Join Date
    Jul 2011
    Location
    0xf72408d5eb9d0ae5
    Posts
    30

    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>

  2. #2
    Join Date
    Jul 2011
    Location
    0xf72408d5eb9d0ae5
    Posts
    30
    figured it out. sorry for the bother

  3. #3
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    R.,
    Frank

    Please report back how suggestions worked out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles