Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    jwmollman
    Guest

    Resized img causes choppy scrolling in Firefox/IE

    I have my page styled exactly how I want it to be. I basically have five images in a table, and those images are within anchor tags which link you to the full size image. The images in the table are shrunk from their original form to 180px wide. I gave it a test run in Chrome, Firefox 3.6, and IE8 and everything displayed perfectly. When I tried to scroll the page up and down in Firefox and IE, things are very sluggish. As I try to scroll the page in Chrome, it's not like this at all. The page scrolls smoothly.

    Is there anyway to style my page so I can eliminate the choppiness in Firefox and IE, or is this just how the browsers handle pages like these?

    Or you can just view the site here with the images I'm sure you don't have. http://www.mrmollman.com/sketches.html

    HTML:
    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Sketches by John Mollman</title>
    		<link rel="icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.png" />
    		<link rel="shortcut icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.png" />
    		<link rel="stylesheet" type="text/css" href="styles/sketches.css" />
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="description" content="Sketches by John Mollman" />
    		<meta name="keywords" content="mrmollman, mollman, mr, sketches, illustrations,
    				drawings, john, john mollman" lang="en-us" />
    		
    		<!--
    			Website written and designed by John Mollman
    			All graphics/images created by John Mollman
    			email: jw.mollman@gmail.com
    			http://www.mrmollman.com/
    		-->
    	</head>
    	
    	<body>
    		<div id="mainWrapper">
    			<div id="nav">
    				<a href="mailto:jw.mollman@gmail.com">email</a> <font color="#d8d8d8">/</font> <a href="index.html">home</a>
    			</div>
    			
    			<h2>Sketches by John Mollman</h2>
    			<p style="color: #a4a4a4;">Click on the images to view their full size.</p>
    			
    			<div id="contentWrapper">
    				<table align="center">
    					<tr>
    						<td>
    							<a href="images/john_child.jpg"><img src="images/john_child.jpg" width="180px" alt="" /></a>
    						</td>
    					</tr>
    					<tr>
    						<td>
    							<a href="images/sad_girl.png"><img src="images/sad_girl.png" width="180px" alt="" /></a>
    						</td>
    						<td>
    							<a href="images/crying_boy.png"><img src="images/crying_boy.png" width="180px" alt="" /></a>
    						</td>
    						<td>
    							<a href="images/man1.png"><img src="images/man1.png" width="180px" alt="" /></a>
    						</td>
    						<td>
    							<a href="images/man2.png"><img src="images/man2.png" width="180px" alt="" /></a>
    						</td>
    					</tr>
    				</table>
    			</div>
    			
    			<br />
    			<p class="copyright">John Mollman &copy; 2010</p>
    		</div>
    	</body>
    </html>
    CSS:
    Code:
    /* stylesheet for the sketches page */
    
    body {
    	font: 14pt Arial, Helvetica, sans-serif;
    	background-color: #fff;
    	color: #000;
    }
    #mainWrapper {
    	position: relative;
    	width: 800px;
    	height: auto;
    	margin: auto;
    	background-color: #fff;
    	color: #000;
    }
    #nav {
    	float: right;
    	font-size: 150%;
    }
    #contentWrapper {
    	padding-top: 30px;
    	width: 800px;
    }
    a img {
    	border: none;
    }
    a {
    	text-decoration: none;
    	font-weight: bold;
    	color: #00f;
    }
    a:link {
    	text-decoration: none;
    	font-weight: bold;
    	color: #00f;
    }
    a:hover {
    	text-decoration: underline;
    	font-weight: bold;
    	color: #00f;
    }
    a:active {
    	text-decoration: underline;
    	font-weight: bold;
    	color: #0404b4;
    }
    p.copyright {
    	text-align: center;
    	color: #a4a4a4;
    }
    tr td {
    	padding: 10px 10px 10px 10px;
    }
    Last edited by jwmollman; 06-24-2010 at 08:43 AM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I can't replicate the problem here.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your wrapper div needs to be "absolute" not relative. For some reason IE(8) becomes sluggish if the "top level" wrapper DIV is not absolute.


  •  

    Posting Permissions

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