Why is javascript+CSS display setting making radio buttons dissapear?

Question

I have a simple javascript that hides/shows various DIVs based on a dropdown menu choice - but it makes the radio buttons on one of the divs go away... anyone know why? the lists with radio buttons are programatic, and it works with the "Book" option, but not the "Video" Option. code:

<script>
    function showstuff(boxid){
        if(boxid=="Book" || boxid=="Layers" || boxid=="3D"){
            document.getElementById("Video").style.display="none";
            document.getElementById("Book").style.display="inline";
        }else{
            document.getElementById("Video").style.display="inline";
            document.getElementById("Book").style.display="none";
        }
    }
</script>
 <select id="ARtype" name="ARtype" onChange="showstuff(this.value)">
    <option selected="selected" value="Book">Book</option>
    <option value="Video">Video</option>
    <option value="Layers">Layers</option>
    <option value="3D">3D</option>
</select>

        <div id="Video" style="display:none;">
    <dl><a href="uploadvideo.php">Upload Video</b>
            <img src="images/upload2.png" alt="Upload assets" /></a><br>

         <dt><label for="video">Video Overlay*</label></dt>     
        <!-- ###GET IMAGES FROM TRIGGERS FOLDER -->
    </dl>
        <table><tr><td>
        <?php
        foreach (glob("cmpping/videos/*.*") as $myimage){
           echo "<div style=\"float:left;border-right:1px solid black;padding-right:5px;margin-left:5px;'\"><span style=\"white-space:nowrap;padding-bottom:0px;line-height:30px;\">
                    <input name=\"URLVideo\" id=\"URLVideo\" type=\"radio\" value=\"$myimage\"/>
                    <img align=\"middle\" width=\"30\" style=\"max-height:50px;margin-left:5px;\" src=\"img/video.png\" /><br>".str_replace("cmpping/videos/","",$myimage) ."</span></div> ";
        }
        ?>
        </td></tr></table>
        <table><tr><td>
        <?php
        foreach (glob("cmpping/trigger/*.*") as $myimage){
            echo "<!--triggerimage=" . $query_result->triggerimage . "--><!--myimage=".$myimage ."-->";
            echo "<span style=\"white-space:nowrap;padding-bottom:20px;line-height:70px;\">
                    <input name=\"triggerid\" id=\"triggerid\" type=\"radio\" value=\"$myimage\"/>
                    <img align=\"middle\" width=\"50\" style=\"max-height:50px;margin-left:5px;\" src=\"$myimage\" /></span> ";
        }
        ?>
        <!--<input type="file" name="triggerid" id="triggerid" r />--> 
        </td></tr></table>
</div>
<div id="Book" style="display: inline">
        <table><tr><td>
        <?php
        foreach (glob("cmpping/trigger/*.*") as $myimage){
            echo "<!--triggerimage=" . $query_result->triggerimage . "--><!--myimage=".$myimage ."-->";
            echo "<span style=\"white-space:nowrap;padding-bottom:20px;line-height:70px;\">
                    <input name=\"triggerid\" id=\"triggerid\" type=\"radio\" value=\"$myimage\"/>
                    <img align=\"middle\" width=\"50\" style=\"max-height:50px;margin-left:5px;\" src=\"$myimage\" /></span> ";
        }
        ?>
        <!--<input type="file" name="triggerid" id="triggerid" r />--> 
        </td></tr></table>
</div>

Answer 1

Your problem seems to be related to the niceforms Javascript lib you are using.

Since some of your radios are invisible at some point, this lib is setting the image used to to do the pretty format off the screen (by setting their left and top to 0).

In order to fix it you could call NFFix() inside your showstuff() function.