Forum Moderators: not2easy
I've tried to create a sort of FAQ based on toggle elements following the TJK design format but I've got a problem. I want a plain text date to separate the lists. So for example I've got 13th April at the top followed by one sentence links which if you click on them open up to reveal large paragraphs. Then I've got 4th April in plain text followed again by one sentence links which open up if clicked. This looks perfect in Firefox but in IE7 only the top date appears while the 2nd is integrated into the hidden paragraphs.
Also, IE7 makes a large horizontal scrollbar appear even though there is no content outside the 760px area I have in the centre.
Any idea what this may be due to and how to fix it?
Thanks in advance for your help!
We would normally ask for a sample of your code, but as it's reliant on the TJK javascript and
it's Sunday and leeway day ;) - I'm going to admit having seen your link on another forum
I first of all am going to suggest you validate your HTML [validator.w3.org] which should be a first step in any debug process. You are looking for missing and unclosed elements in the main - but your page also has two Doctypes and 3 x head sections containing CSS which may or may not be causing problems (I didn't check)
Second you should try creating your menu/faq in a completely clean page before merging it in your main page/content area it should be easier to get your CSS into separate files or merge it with your existing CSS this way and you'll know you're merging a working version, so if it doesn't work once you merge it you'll know that there is then some conflicting CSS in your main page.
Anyway, once you've created the faq/ in a clean page and also got it validating or nearly you could then post the smaller sample code snippets here if you still have aforementioned problems
leeway day.. I already have a shortened, simplified example of your markup and without CSS or JS it looks like this:
<body onload="TJK_ToggleDL()">
<dl id="TJK_DL" class="style1">
<a id="TJK_ToggleON">Open All</a> <a id="TJK_ToggleOFF">Close All</a>
<br /><br />
13th April 2007<dt><strong>Question 1</strong></dt>
<dd>....<br />If you wish to view the meeting's itinerary, please click here.<br /><br /></dd><dt><strong>Elective in Malaysia</strong></dt>
<dd><p>blahh blahh</p></dd><dt><strong>UCL MSA Society 10K Fun Run</strong></dt>
<dd><p>There are still ....!<br /><br /></p></dd>4th April 2007
<dt><strong>Revision Course Organised By ......</strong></dt>
<dd>Book early to avoid disappointment!</dd><dt><strong>Accommodation Wanted</strong></dt>
<dd>blah blah....</dd>
</dl>
For the benefit of others I'll just say the JS works by clicking on the <dt> to toggle the display of the sibling <dd> and it is dependant on the ID of the entire <dl> - belal, you can post the JS later if some JS knowledgable folks decide it would be best to see it!
The CSS isn't here yet, the horizontal scrollbar is a CSS problem - but the main question's { 2nd and subsequent dates being included in <dd> }answer is here somewhere, I know the cause but not sure on the best way to fix it for your needs.
That's why I'm posting it like this rather that us helping you rewrite someone else's script maybe there's another way it can be done to better suit your need for subtitles?
Suzy
[edited by: SuzyUK at 9:27 am (utc) on April 14, 2007]
