...

View Full Version : Resized img causes choppy scrolling in Firefox/IE



jwmollman
06-24-2010, 08:36 AM
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:


<?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:


/* 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;
}

Rowsdower!
06-24-2010, 01:05 PM
I can't replicate the problem here.

mrgoose
08-09-2010, 11:52 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum