Page jumping in IE

[TheJoshMan]

I have no clue what is causing this, so I'm posting it in the HTML forum. Feel free to move it if I'm in the wrong spot...

I'm building a site for a client, and it looks perfect in IE, FF, Opera, and Safari... However, in IE when you scroll down the page seems to "jump".

It doesn't scroll very smoothly, it's very jittery.

Here's the link: http://centercrosscustoms.com/site-test/

Any ideas?

[Schmoopy]

It seems very strange, but maybe you should try validating the page first and see if the problem persists.

[TheJoshMan]

I have validated... THe only things which do not validate is the "smoothgallery" script and shadowbox passes an empty string to "getelementbyid" when clicked on.

Other than that, everything else validates.

[Schmoopy]

Are you sure?

I saw 30 errors :S

http://validator.w3.org/check?uri=http%3A%2F%2Fcentercrosscustoms.com%2Fsite-test%2F&charset=(detect+automatically)&doctype=Inline&group=0

[Schmoopy]

If after you've validated the page, and it's still messing up in IE, then comment out parts of the HTML until you single out the problem.

My guess would be the image gallery thing, as that seems to load very slowly in IE and it scrolls fine until it starts loading it.

[TheJoshMan]

Yea, sorry. I did have it validated... Apparently I goofed somewhere and used a diff doctype in the header.php page which threw everything off.

I've used the correct doctype now, and it's only showing 6 errors and 8 warnings.

Most of the errors are coming from the js links for the paypal shopping cart...

I'll comment out the gallery and see what happens.

[Schmoopy]

Ok, well I fixed a few more things in your code purely for validation purposes, I was bored so:

A few of the things are to do with links that have an "&" in them, and you can relplace this with "&" so change:



<span class="txt_4" style="font-size:1.03em;">Checkout</span> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_cart&business=4N4DBNX7EVKSY&display=1"><img src="images/cart-checkout-trans.png" alt="View Cart" class="up3" /></a>



to this:



<span class="txt_4" style="font-size:1.03em;">Checkout</span> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_cart&amp;business=4N4DBNX7EVKSY&amp;display=1"><img src="images/cart-checkout-trans.png" alt="View Cart" class="up3" /></a>


also, later on you use "°", but you neglect to close it with a ";" which will also give you an error.

so change this line from:



<p>Did you know that cooler air intake can dramatically improve your vehicle's performance? Studies have shown that a functioning cowl hood reduces the IAT (intake air temperature) which can improve your vehicle's performance. Temperature reduction can range anywhere from between <span class="txt_4">2-3°</span> at a standstill, to <span class="txt_4">7-11°</span> while in motion (depending on speed).</p>


to:



<p>Did you know that cooler air intake can dramatically improve your vehicle's performance? Studies have shown that a functioning cowl hood reduces the IAT (intake air temperature) which can improve your vehicle's performance. Temperature reduction can range anywhere from between <span class="txt_4">2-3°</span> at a standstill, to <span class="txt_4">7-11°</span> while in motion (depending on speed).</p>


You can also take out the "</div>" on line 143 as you don't need it.

This should get rid of most of the errors, but the others are to do with the doctype you've chosen which I can't really do much about.

Hope it is the gallery causing the problem anyway, at least it narrows it down.

[TheJoshMan]

Alright, I've got it down to ONE error now... apparently i'm using a < ol > the wrong way or something, but I can't figure out how to fix it.

That's besides the point though... I removed the extra < /div > tag, and now get this... In IE the page looks fine (still scrolls jumpy though), but in FF it's like that DIV tag was needed because now half the background is up top where it shouldn't be!

I'm about ready to just say to (*&W#$(T with it and let him have it as is.

I also commented out the gallery and it wasn't the problem. So i proceeded to comment out ALL the scripts and it moved a *little* faster when you scrolled, but it was still extremely jumpy.

So i'm assuming that the scripts are causing a bit of lag, but it's not what's ultimately making the page jump.

[Schmoopy]

Ok, the problem with the <ol> is that it's contained within the <p> tag, you can see here, that the <p> begins before the <ol> and ends just after it:



<p>However, there are a few guidelines and stipulations in regards to being featured.</p><p>
They are as follows:
<ol>
<li>You must be a current or former customer who has purchased our hood</li>

<li>The image of your Trailblazer must be of decent quality</li>
<li>Image must also be primarily focused on the hood which we sold you</li>
<li>Must be satisfied customer<span class="orange"> **</span> (see below)</li>
</ol></p>


So if you change it like this:



<p>However, there are a few guidelines and stipulations in regards to being featured.</p>
<p></p>
They are as follows:
<ol>
<li>You must be a current or former customer who has purchased our hood</li>

<li>The image of your Trailblazer must be of decent quality</li>
<li>Image must also be primarily focused on the hood which we sold you</li>
<li>Must be satisfied customer<span class="orange"> **</span> (see below)</li>
</ol>


You should be error free, good luck with solving the problems with the scripts though =/

Also, about the <div>'s maybe, there was more than one div that wasn't needed, I'm not sure but you should go through your code with Notepad++ or something equivalent to see where they start and end, so you can see exactly what is contained in each <div>.

Hope it helps.

[TheJoshMan]

alright I got it figured out...

It wasn't a script lag at all...

I got all the validation errors and warnings fixed, and then took out ALL scripts and it was still doing it.

So, my next guess was css...

I had a 2x2 pixel image set to repeat as the background for one of the divs... Apparently an image that small was causing some serious lag. I enlarged the image to 100x100 pixels and it works like a charm now!