Solved

jQuery widget acts weird in IE7

Posted on 2010-08-23
3
342 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 250 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Gmail Account risks 4 78
CSS Position not returning 2 48
alert before form submission 6 31
is this a cms? 8 35
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now