Solved

Jquery Accordion issues on IE

Posted on 2010-11-08
6
442 Views
Last Modified: 2012-05-10
Hello,
I have used the jquery UI to build a simple accordion for the Tools on this page: http://www.africanhealthleadership.org/resources/toolkit/

Everything works fine on Firefox, but things are weird on IE7.  When someone clicks on one of the accordion elements, the line/arrow above the previously clicked accordion element disappears.  

The line/arrow will reappear on mouseover, but something seems to be overwriting the stylesheet information.

Also on IE, I am getting unwanted scrollbars on the first item (Preparation) after a user clicks on a different part of the accordion.  

I have tried all sorts of ideas but with no luck.

Thank you for any help!
0
Comment
Question by:rjunk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 34089961
Please check and correct the errors in your page as it's more than possible that's what is causing your problems:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.africanhealthleadership.org%2Fresources%2Ftoolkit%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
 

Author Comment

by:rjunk
ID: 34093300
Thanks Tagit, I resolved the big ones that applied to the accordion. I will clear up the others before launch, but the problem still persists and I don't suspect that it is tied to those unresolved items.  Any ideas are appreciated, thank you.
0
 
LVL 43

Expert Comment

by:Rob
ID: 34097382
I'm just looking at your code in your main page and all your javascript comments only have 1 slash.  This will definitely be causing unpredictable results.  I would suggest testing with Firefox and download an add-on called Firebug.  it shows you all js and dom errors

eg


                  ); / end hover
            }); / end each
      }); / end ready()
0
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
LVL 2

Expert Comment

by:wasim117
ID: 34100863
I verified code, markup is wrong.
p should be children of li not ul
view below code.
 









<ul class="tools">

<li>Overview of Preparation Tools</li>

<li><p><a href="http://www.africanhealthleadership.org/wp-content/uploads/Special-Education-Paraprofessional-posting.pdf">Programmatic Logic</a></p></li>

<li><p><a href="http://www.africanhealthleadership.org/wp-content/uploads/FinalLogo-tag-line.pdf">Project Management &ndash; test</a></p></li>
</ul>

Open in new window

0
 

Accepted Solution

by:
rjunk earned 0 total points
ID: 34101107
Thanks Tagit and Wasim. I was able to solve by removing the clears and setting overflow to auto on the parent div.  I will go and clean up the validation errors now, thank you for your help.
0
 

Author Closing Comment

by:rjunk
ID: 34134489
Why a B? I was the goof who put the malfunctioning code in there in the first place, no A for me.
0

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

688 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