Solved

jQuery widget acts weird in IE7

Posted on 2010-08-23
3
339 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
Comment Utility
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
Comment Utility
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
Comment Utility
Cleaning up all the issues on the css and html made everything clear.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 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

6 Experts available now in Live!

Get 1:1 Help Now