add to cart divaFAQ Standalone version: Frequently Asked QuestionsPC/Mac  $29

divaFAQ is really easy to apply to your page, but you may want to change its styling. There are detailed comments throughout the /diva/divaFAQ/divaFAQ.css file (which is added to your site when you add divaFAQ to a page,) and we have these FAQs as well:

divaFAQ Frequently Asked Questions

Can I add my own images or edit the supplied images for the Group Togglers, Questions and Answers?
Sure!

To add your own images, simply put your new images in the appropriate image subfolders in the diva/divaFAQ/i/ folder. Be sure to check the images we supplied for the proper image dimensions to use.

Or feel free to edit any of the supplied images, easily accomplished by using their png files to make your edits and then exporting the new gif files.

Is it possible to load the page with a specific answer already opened?
Yes. Simply place a Named Anchor
(<a id="theAnchor"></a>)
in the Question (DT), and then when you link to that page, add that anchor in the url like this: www.yourwebsite.com/FAQpage.htm#theAnchor
The Question (DT) icons are doubled, there are two icons per DT (in Internet Explorer)!
When you add a namedanchor to a DT, this occurs in IE as a result of an IE work-around we added to the stylesheet recently. Scheduled to be fixed in the next update, for now you can easily fix this yourself. In the /diva/divaFAQ/divaFAQ.css file, at about line 32, change this selector:
.divaFAQ_DL dt a,
.divaFAQ_DL dt a:visited {
to this:
.divaFAQ_DL dt a:link,
.divaFAQ_DL dt a:visited {
Can I change the styling of the FAQ?
Absolutely. Absolutely, and we have included many comments in the CSS file (/diva/divaFAQ/divaFAQ.css) that controls the FAQs' appearance to make this as easy for you as possible. In addition, in the package you download when you purchase divaFAQ, you will get a demonstration site with many tips and pointers to assist you even further.
I get a Javascript error in the browser. What does "zDD[i] has no properties" mean?.
This error most likely means you are using an old version of divaFAQ. Please update to the latest version.
How come under some conditions in Internet Explorer, the icons that appear to the left of the DT (Question) are not clickable? AND Why is the file divaFAQ.css not Validating?
To handle a well-known Internet Explorer bug, we have added a trick to the css file, which, if we were to Validate the file, would throw a Validation error. It is easy to make the css file Valid once again, AND to resolve this IE bug in all modern versions of Internet Explorer by using Conditional Comments.
The trick we included in the css file is to make sure this element "hasLayout". To make the css file valid once again, you can simply remove our trick (Find in the /diva/divaFAQ/divaFAQ.css file this line: "zoom:1;" and simply delete it) and instead place the following Conditional Comment before the closing HEAD tag in your document):
<!--[if lte IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dt a {zoom:1}
</style>
<![endif]-->
If the above gives you a different result between Internet Explorer versions 6 and 7, try the following (both together):
<!--[if IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dt {zoom:1}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dt a {height:0}
</style>
<![endif]-->
The icon I am using for the DTs (Questions) is being partially cut-off. Why that?
The idea is to give a minimum height to the DT to make sure it leaves enough room for your icon.
For this, you need to use two different properties, one for the good browsers out there and one for the bad ones:
In the divaFAQ.css stylesheet, find the
.divaFAQ_DL dt a {...}
rule and add the following declarations to it (use the same value as your icon's height):
min-height:20px;_height:20px;
If you prefer to use a Conditional Comment rather than the CSS filter above (the underscore hack), then replace that second declaration with the following, before the closing HEAD tag in your document (or just add the rule to an existing Conditional Comment if you have one already):
<!--[if lt IE 7]>
<style type="text/css" media="screen">
divaFAQ_DL dt a {height:20px}
</style>
<![endif]-->
The image I'm using for the DDs (Answers) is being partially cut-off. How come?
Same as above. The idea is to give a minimum height to the DDs (Questions) to make sure it leaves enough room for your image.
For this, you need to use two different properties, one for the good browsers out there and one for the bad ones:
In the divaFAQ.css stylesheet, find the
..divaFAQ_DL dd {...}
rule and add the following declaration to it (use the same value as your image's height):
min-height:40px;_height:40px;
If you prefer to use a Conditional Comment rather than the CSS filter above (the underscore hack), then replace that second declaration with the following, before the closing HEAD tag in your document (or just add the rule to an existing Conditional Comment if you have one already):
<!--[if lt IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dd {height:40px}
</style>
<![endif]-->
In Safari, and only in that browser, the DDs (Answers) do not expand. How can I fix it?
It seems that Safari has trouble opening DDs that begin with certain tags, particularly <P> tags. If you experience this wierd behavior in Safari, you can remove these elements, OR insert some text or even just a &nbsp; entity before the offending tag, OR try adding one of these three CSS rules:
.divaFAQ_DL dd {display:table;}
or:
.divaFAQ_DL dd {display:inline-table;}
or:
.divaFAQ_DL dd p {position:relative;}
In Safari, icons do not appear next to the DTs (Questions) and DDs do not expand or when they do, they overlap each other. Why?
Are you using PRE elements inside the DDs? If this is the case, I don't know of any fix besides removing them from your markup.
In Internet Explorer, the "+/-" icons flicker when the user hovers over the questions. Is that normal?
This is due to an Internet Explorer bug related to image caching. By default, this does not happen, as it depends on custom user settings usually only used by (us) developers.
To make the flickering disappear, add the following within the HEAD element of your page:
<script type="text/javascript">
<!--
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
//-->
</script>
My two Group Toggler buttons have no space between them and/or in Internet Explorer the first Question is indented!
Most likely you have a CSS style on our page that is telling images to float. This is easily fixed. Simply find this selector in the /diva/divaFAQ/divaFAQ/css file on your site:
img.divaFAQ_twoi_spacer {
and add to it:
float:none ;
What should I include in my "print styles sheet" to allow the Answers to be printed?
Add the following rule:
dl.divaFAQ_DL dd.hideDD {position:relative;top:0;}
Can I nest DLs in an FAQ, in other words, can I put a second set of Questions&Answers inside a Question?
Sure, simply add a unique id to each DL, and apply divaFAQ to both of them. We've seen good success with the No Group Toggler Option, but experiment with whatever option you'd like. And then add these styles either to a style tag in the head of your page, or even right in the /diva/divaFAQ/divaFAQ.css file if you wish (Thierry has not reviewed this, so any foolishness is mine - emb):
.divaFAQ_DL .divaFAQ_DL .DTplus a, .divaFAQ_DL .divaFAQ_DL .DTminus a {   background-image:none
}
.divaFAQ_DL .divaFAQ_DL .DTplus a a{
  background-image:
    url(diva/divaFAQ/i/Q/Q_00-1_open.gif);
}
.divaFAQ_DL .divaFAQ_DL .DTminus a a{
  background-image:
    url(diva/divaFAQ/i/Q/Q_00-1_close.gif)
}
.divaFAQ_DL .divaFAQ_DL dt a,
.divaFAQ_DL .divaFAQ_DL dt a:visited {
  padding-left:25px;
}
.divaFAQ_DL dl.divaFAQ_DL {
  margin-left:-20px;
}
.divaFAQ_DL dl.divaFAQ_DL dd{
  margin-left:22px;
}
I do want to support IE5mac. Is there anything special I need to do?
In IE5mac, hardcoded onload events in the <body> tag will prevent diva scripts from firing. So to support IE5mac you will need to move those <body> onload events to a window.onload functon. But that's easy. Here's how to move body onload events into windows.onload.