jQuery widget acts weird in IE7

Hi -
I have a website that is giving me a lot of problems when viewed in IE7.  

On this page I'm trying out an excellent jQuery plug-in called Scroll-to.   Above the big rectangle (screen div) in the middle of the page there are 11 links inside a "navigation" div.  In any other browser these links sit nicely above the rectangle but in IE7 they are shoved over to the right.  They are pushed right out of the main-content area.

I am not a javascripter at all so I'm guessing when I say that the problem is not javascript but rather the CSS.  But I'm not sure.

What change do I need to make for IE7 to render these links the same way as seen in other browsers?

Thanks in advance for your help.
d2


dzash2000Asked:
Who is Participating?
 
s8webCommented:
I would start by correcting the errors in your markup.
There are a few that could cause display issues -  
http://tiny.cc/ag1aq 

0
 
Albert Van HalenAnalyst developerCommented:
Funny
It seems that the stylesheet http://thymetoeat.net/N2010/w/_css/serialscroll-jl3.css is generated dynamically.
In IE7 there's a rule #navigation.
It has the following :
#navigation{
            width:800px;
            text-align:center;
            margin-left:22px;
      }
While in FireFox and IE8 the rule isn't even there...
Well; width set to 800px is the problem.

NB Take s8web's comment into account as well, invalid documents (sometimes) render incorrect.
0
 
dzash2000Author Commented:
Cleaning up all the issues on the css and html made everything clear.
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.