Captivate 9 fill in the blank HTML issues

Obviously that's not how it's supposed to work.

With the file being viewed in HTML, press F12 to bring up the browser developer tools and use the inspector to find both drop-down lists in the HTML code. When you click on the target box for the drop-down the lines of code that change will be highlighted briefly. It will be helpful to write down the z-index to make it easier to compare them. Do that for both boxes and look to see what the z-index is for both boxes when they’re not clicked and then when they are clicked starting with the top box first then the lower box. Then refresh your browser and do the same process again but starting with the lower box first then the top one. Then compare the

Both boxes will actually have two lines of HTML that change. One line changes the z-index for the main target and the other line is for the options that appear. The image below shows how far down the line for the options box is nested below the target object. (The code for the options list will also change it's display from "none" to "block" when it's visible or not visible)

For my two fill-in-the-blank options, the z-index for the objects is as follows regardless of which one I click first.

Default

Top z-index: 4

Top options: 1

Lower z-index: 4

Lower options: 1

Top clicked

Top z-index: 1000

Top options: 9999

Lower z-index: 4

Lower options: 1

Bottom clicked

Top z-index: 4

Top options: 1

Lower z-index: 1000

Lower options: 9999

The main part of the problem is because each browser renders a drop-down list slightly differently. The image below shows the same drop-down quiz slide in three different browsers. Firefox and Chrome at least put the drop-down lower than the text to the right and left unlike IE that covers the word ‘and’ in the sentence.

IE is the browser that shows a different font after you’ve made a selection. You can overcome this issue by adding some CSS to your index.html file that’s created when you publish the project. If you put the following code into the index.html file directly after the top CSS code, you can force every browser to use the font Arial. If it’s not Arial you’re using then just change it to whatever font you are using.

<style type="text/css">

                select {

                font-family: Arial, "sans-serif" !important;

                }

</style>

Here's what it looks like before and after adding the code.