?
Solved

Jquery Accordion issues on IE

Posted on 2010-11-08
6
Medium Priority
?
460 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
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
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).
Suggested Courses

850 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