IE7 scrolling and rendering problem

I have two desktop machines both running XP home and using IE7. I also have two laptops, 1 is linux unbuntu with Opera,FF 3.5, Chrome and Epiphany browsers, and the other a new laptop with IE7.

Here's the problem. I am developing a website that so far works great until I load it with IE7. I have conditional style sheets loaded depending on the browser so everything lines up properly. This is working for IE7 and it looks fine, only the page takes a while to load, and more importantly, if you try scrolling it has a delay first, then scrolls about half a line, then jumps down about 4 or 5 lines and the screen renders VERY slowly.

I have done about 24hours of research into this and got the normal responses like :
it's a ram issue
it's your mouse driver
it's a plugin
it's because you have smooth scrolling enabled

My opinion is "It's an IE7 issue"

I need help working this out. I have tested a test page with other browsers on different machines and ALL work as they should except IE7 and I have tried that on 3 machines. All very jerky and slow.

It is NOT an internet problem as I also have a local server on two machines and the problem is there as well.
Any thoughts or ideas would be appreciated

As a footnote I might add that I have a feeling it is to do with the style sheet and absolute positioning but I'm not certain. I have attached the stylesheet code...
html, body {
	margin:auto;
	background:url('../images/hatch.png');
	}
a:link {
	color:yellow;
}
a:visited {
	color:yellow;
}
a:active {
	color:yellow;
}
#page
{
	width     :900px;
	height    :1213px;
}
#logo-area
{
	width     :900px;
	height    :106px;
  background-color:#000000;
	position  :relative;
	left      :0px;
	top       :0px;
}
#logo-left
{
	position  :relative;
	float     :left;
	top       :0px;
	width     :265px;
	height    :106px;
	background:url('../images/logo.png');
}
#admin-link
{
	position  :relative;
	left      :88px;
	top       :54px;
	width     :10px;
	height    :10px;
	cursor    :pointer;
}
#logo-mid
{
	position  :relative;
	float     :left;
	width     :315px;
	height    :106px;
  background-color:#000000;
}
#logo-right
{
	position  :relative;
	float     :left;
	width     :320px;
	height    :106px;
  background-color:#000000;
}
#email-block
{
	     float:right;
	position  :relative;
	top       :-56px;
	width     :280px;
	height    :56px;
}
#email-submission
{
	position:relative;
	float   :right;
	width   :280px;
	top     :0px;
	font    :12pt arial;
	color   :#dddddd;
      text-align:center;
}
#email
{
	position:relative;
	left    :60px;
	top     :5px;
	float   :left;
	width   :160px;
	height  :20px;
}
#email-go
{
	position:relative;
	float   :left;
	left    :60px;
	top     :3px;
	width   :41px;
	height  :25px;
	background: url('../images/email-go.png');
	cursor  :pointer;
}
#email-go:hover
{
	background: url('../images/email-go-over.png');
}
#block-main
{
	width     :900px;
	height    :340px;
    position  :absolute;
	left      :0px;
	top       :106px;
	background:url('../images/mainswf.png');
}
#horizontal-pin
{
	position  :absolute;
	top       :446px;
	left      :0px;	
	width     :900px;
	height    :1px;
  background-color:#dddddd;
}
#menu-block
{
	width     :239px;
	height    :766px;
    position  :absolute;
	left      :0px;
	top       :447px;
	text-align:left;
  background-color:#2d2d2d;
	color     :#e6e6e6;
}
#menu-main
{
	position  :relative;
	left      :16px;
	top       :10px;
	background:url('../images/menu/menu-button.png');
	width     :200px;
	height    :auto;
 background-repeat:no-repeat;
      overflow    :hidden;
}

#menu-main1
{
	position  :relative;
	left      :16px;
	top       :10px;
	width     :200px;
height :26px;
}
#menu-main-text
{
	position  :relative;
	left      :40px;
	top       :4px;
	font      :12pt arial;
	color     :#e6e6e6;
       font-weight:bold;
	cursor    :pointer;
}
#menu-main-text:hover
{
	color     :#CDCDCD;
}
#menu-sub
{
	position  :relative;
	left      :24px;
	top       :10px;
	width     :132px;
	height    :15px;
	background:url('../images/menu/menu-sub.png') 0%;
 background-repeat:no-repeat;
 margin-bottom    :4px;
	padding   :3px;
}
#menu-sub-text
{
	position  :relative;
	left      :35px;
	top       :-2px;
	font      :12pt arial;
	color     :yellow;
	cursor    :pointer;
	padding   :4px;
	}
#menu-sub-text:hover
{
	color     :white;
}
#credit
{	position  :relative;
	left      :16px;
	top       :50px;
	width     :200px;
	height    :30px;
	background:url('../images/menu/credit.png');
}
#vertical-pin
{
	position  :absolute;
	left      :239px;
	top       :447px;
	width     :1px;
	height    :766px;
  background-color:#dddddd;
}
#block1
{
	width     :660px;
	height    :218px;
        position  :absolute;
	left      :240px;
	top       :447px;
	background:url('../images/page2.png');
}
#block1-text
{	position  :absolute;
	width     :652px;
	height    :72px;
	left      :240px;
	top       :665px;
        background:url('../images/hatch2.png');
	text-align:left;
	font      :12pt arial;
	color     :#dddddd;
	padding   :4px;
}
#block2
{
	width     :660px;
	height    :218px;
        position  :absolute;
	left      :240px;
	top       :745px;
	background:url('../images/page3.png');
}
#block2-text
{	position  :absolute;
	width     :652px;
	height    :72px;
	left      :240px;
	top       :963px;
    background:url('../images/hatch2.png');
	text-align:left;
	font      :12pt arial;
	color     :#dddddd;
	padding   :4px;
}
#block3
{
	width     :660px;
	height    :170px;
    position  :absolute;
	left      :240px;
	top       :1043px;
	background:url('../images/page4.png');
}
#page1
{       position  :relative;
	float     :right;
	width     :660px;
	font      :18pt verdana;
	color     :maroon;
   padding-top:5px;
	text-align:left;
}
#bottom-menu
{
	position  :relative;
	top       :-43px;
	width     :898px;
	height    :40px;
background-color:black;
	font      :10pt arial;
	color     :silver;
	text-align:right;
}

Open in new window

LVL 20
Mark BradyPrincipal Data EngineerAsked:
Who is Participating?
 
Dave BaldwinFixer of ProblemsCommented:
I've attached what I would do, the 'meta' statement is the one you need to fix that.  Although I know a lot of people are big on XHTML, I'm not.  I mostly stick with HTML 4.01 Transitional which is the DOCTYPE in my example code.  It's easier than XHTML for a lot of things.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Open in new window

0
 
Mark BradyPrincipal Data EngineerAuthor Commented:
Here is the test page link. Please try it with IE (any version) and any other browser and let me know the results please.

www.bnsrecords.net/dropshop/
0
 
Dave BaldwinFixer of ProblemsCommented:
Firefox 3.6 and IE6 seem to work Ok, IE8 has to be put into compatibility mode.  I dont' have IE7 anymore.  But your page won't 'validate', it shows 51 errors.  You can go to this page [ http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bnsrecords.net%2Fdropshop%2F ] to see what I mean.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Mark BradyPrincipal Data EngineerAuthor Commented:
Wow. Ok let me go and fix those issues and retest it. Thanks !
0
 
Mark BradyPrincipal Data EngineerAuthor Commented:
I'm not sure how to respond to this problem but this function seems correct. It works. the value of 'x' comes from a PHP variable and it is obviously working so maybe that est page doesn't look at php variables?

function menuclose()
{ var x=0, i=1;
x = '<?php echo $x+1;?>';
for(i=1;i<x;i++){   /// showing an error here on the validation page. The ';' needs to be there (I think)
document.getElementById('menu-main'+ i).style.height = '30px';
}
}
0
 
Dave BaldwinFixer of ProblemsCommented:
The validation problem with for(i=1;i<x;i++){ is probably that your javascript 'type' is missing.  It is also common to enclose your javascript in comment marks so browsers and validators don't consider it HMTL.   Some of the other problems are that 'id's are supposed to be unique.  If you're just trying to apply a common style, then classes can be used for many elements.
0
 
Mark BradyPrincipal Data EngineerAuthor Commented:
Ok I'm slowly fixing those issues. Can you point me in the right direction to find the correct way to insert the HTML document statement using English. Here is what I have now:

<!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" xml:lang="en" lang="en">

That is causing one of the errors saying there is no character type
0
 
Mark BradyPrincipal Data EngineerAuthor Commented:
Excellent. That will work for me. I'm not sure if it will fix the scrolling problem but if it doesn't, I'll post another question once I get rid of those errors. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.