Help Creating a Table of Contents for an FAQ

[eluser]adamk[/eluser]
Sorry if my question is retarded, but I am very new to web programming and can't tell if the problem I am having is due my html or codeigniter.

For context, someone made the site with codeigniter and I have basically added this static plain FAQ page to the site myself.

The page is here:
www.sirum.org/faq

The problem is when you click on the first two questions in the TOC, the browser moves within the plage to the location of the question that I intend, but doesn't load anything above it (the top portion of the page including picture and toc just disappear)

If you look the the third link in the TOC, I tested going to the top of the page with the #top link and this works fine. I have confirmed the same problem in Firefox and IE6.

Do I need to change something in the code igniter controller for this TOC to work properly? Any ideas are greatly appreciated!!!

Thanks
Adam

[eluser]umefarooq[/eluser]
Hi to solve this problem try to use the following style for you faq

http://edushield.net/faq-item-4.htm

you need javascript for the try to use JQuery accordion here is link

http://jqueryui.com/demos/accordion/

[eluser]adamk[/eluser]
Thanks. I would do this as an alternative if I can't make this idea work. But I am sure someone must know how to quickly fix this TOC problem.

[eluser]kgill[/eluser]
As this is a static page it has nothing to do with CI so you don't need to touch any of the controllers, the problem lies in your CSS. If you disable the link to the stylesheet everything of course gets ugly but the page then behaves the way you want it to. So you're going to have to mess with styles until you get things right, if I had to hazard a guess I'd start with the stuff for the menu.

[eluser]slowgary[/eluser]
Have you removed the TOC? I looked but I don't see any links.

[eluser]adamk[/eluser]
Yes. For whatever reason the CSS was interfering with the locational hyperlinks. I don't know how I would change the CSS to make it work so I just gave up. If anyone has any good links on how to modify CSS to avoid this problem it would be appreciated.

[eluser]TheFuzzy0ne[/eluser]
That is not possible. If it is, then you're page is not valid HTML, so you may want to [url="http://validator.w3.org/"]validate the page[/url].

[eluser]slowgary[/eluser]
I agree, CSS won't break your links. Most likely one of your anchors was missing the closing tag or something. I would suggest checking your page out through an HTML validator. There's a great Firefox plugin that'll do that for you, or your could use something like the W3C's validator at http://validator.w3.org/

Checking your current page, there a lots of errors without the TOC:

http://validator.w3.org/check?uri=http:/...ne&group=0

I noticed you are using the same 'id' value for many different elements. When you have many elements that share the same identifier (for styles, or JavaScript, etc.) you would use a 'class=' instead of an 'id='. Ideally, you should go through every error on each page and squash them.

[eluser]TheFuzzy0ne[/eluser]
That's very true. the IDs must be unique, so there can only be one per page. If you need more than one ID, then you probably need to use classes instead.