Improve company productivity with a Business Account.Sign Up

x
?
Solved

jQuery widget acts weird in IE7

Posted on 2010-08-23
3
Medium Priority
?
369 Views
Last Modified: 2013-12-08
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


0
Comment
Question by:dzash2000
3 Comments
 
LVL 16

Accepted Solution

by:
s8web earned 750 total points
ID: 33503857
I would start by correcting the errors in your markup.
There are a few that could cause display issues -  
http://tiny.cc/ag1aq 

0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 33504579
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
 

Author Closing Comment

by:dzash2000
ID: 33506413
Cleaning up all the issues on the css and html made everything clear.
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

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.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question