Problems in using CSS with Netscape

May18 · May 18, 2001

Hi folks,

I have some problem in using CSS with Netscape. I wonder if some one can help me -

I'm trying to use JavaScript and CSS to make the hide/show effect on html pages. What I'm thinking is show the first question text on the web page, when user click "Yes, I like to continue", then show the second question text. In order to do this, I include the second question in a <div>....</div> tag, and use CSS to control the visibility attribute. It's working fine in IE, but when the second question contained some form elements like radio button, text box, the form elements can not be shown up in Netscape.

Did some one experience a similiar problem? some one help me?

The following is the test code for this problem. Try it with Netscape, you will see what the problem is.

****************************************************
<HTML>

<style type="text/css">
#div1 {position:absolute; left:8; top:420; width:700; border:0px #ff0000 solid; visibility:hide; visibility:hidden;}

#div2 {position:absolute; left:8; top:420; width:700; border:0px #003366 solid;}

</style>

<BODY>

<script>
<!--

function showText()
{

// for Netscape
if (navigator.appName.indexOf("Netscape&quot

!= -1)
{
document.div2.top = 530;
document.div1.visibility = "show";
}
/* for IE */
if (navigator.appName.indexOf("Microsoft&quot

!= -1)
{
div2.style.top = 530;
div1.style.visibility = "visible";
}

}

function hideText()
{
// for Netscape
if (navigator.appName.indexOf("Netscape&quot

!= -1)
{
document.div2.top = 420;
document.div1.visibility = "hide";
}
/* for IE */
if (navigator.appName.indexOf("Microsoft&quot

!= -1)
{
div2.style.top = 420;
div1.style.visibility = "hidden";
}

}

-->

</script>
<form name=form1>
<br>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 HSPACE=0 VSPACE=0 width=771>

<tr><td colspan=2><FONT SIZE=2 FACE="Arial, Helvetica, sans-serif"><br>
<p>Question Text 1</P>
</td></tr>

<tr><td > Yes<INPUT name=QQPROCEED type=radio value=Yes onclick="JavaScript:showText()"> No<INPUT name=QQPROCEED type=radio value=No checked onclick="JavaScript:hideText()"></td><td width="80%"></td></tr>

<tr><td colspan=2>

<div id="div1">
<p> <FONT SIZE=2 FACE="Arial, Helvetica, sans-serif">
Question Text 2 .....</p>
Yes<INPUT name=QQREPLACE type=radio value=Yes> No<INPUT name=QQREPLACE type=radio value=No CHECKED>

</div>
</td></tr>
<tr><td colspan=2>

<div id="div2">
<input type=submit name=continue value="Continue" size=9>
</div>

</td></tr>

<tr VALIGN="TOP"><td colspan=2 height=100><IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=160 BORDER=0> </td></tr>

</table>



</form>
</BODY>
</HTML>
******************************************************

Thanks for any response.

aperfectcircle · May 18, 2001

Netscape 4.x is really picky about its form tags. Try this:

Code:

<HTML> 

<style type=&quot;text/css&quot;>
#div1 {position:absolute; left:8; top:420; width:700; border:0px #ff0000 solid; visibility:hide; visibility:hidden;}

#div2 {position:absolute; left:8; top:420; width:700; border:0px #003366 solid;}

</style>


<BODY>

<script>
<!--

function showText()
{

    // for Netscape
    if (navigator.appName.indexOf(&quot;Netscape&quot;) != -1)
    {
        document.div2.top = 530;
        document.div1.visibility = &quot;show&quot;;
    }
    /* for IE */
    if (navigator.appName.indexOf(&quot;Microsoft&quot;) != -1)
    {
        div2.style.top = 530;
        div1.style.visibility = &quot;visible&quot;;
    }

}

function hideText()
{
    // for Netscape
    if (navigator.appName.indexOf(&quot;Netscape&quot;) != -1)
    {
        document.div2.top = 420;
        document.div1.visibility = &quot;hide&quot;;
    }
    /* for IE */
    if (navigator.appName.indexOf(&quot;Microsoft&quot;) != -1)
    {
        div2.style.top = 420;
        div1.style.visibility = &quot;hidden&quot;;
    }

}


-->

</script>
<form name=form1>
<br>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 HSPACE=0 VSPACE=0 width=771>

                    
                    <tr><td colspan=2><FONT SIZE=2 FACE=&quot;Arial, Helvetica, sans-serif&quot;><br>
                    <p>Question Text 1</P>
                    </td></tr>

                    <tr><td >    Yes<INPUT name=QQPROCEED type=radio value=Yes onclick=&quot;JavaScript:showText()&quot;>  No<INPUT name=QQPROCEED type=radio value=No checked onclick=&quot;JavaScript:hideText()&quot;></td><td width=&quot;80%&quot;></td></tr>

                    <tr><td colspan=2>
</form>
<div id=&quot;div1&quot;>
<form>
<p>        <FONT SIZE=2 FACE=&quot;Arial, Helvetica, sans-serif&quot;> 
 Question Text 2 .....</p> 
     Yes<INPUT name=QQREPLACE type=radio value=Yes>  No<INPUT name=QQREPLACE type=radio value=No CHECKED> 
</form>
</div>
                    </td></tr>
                    <tr><td colspan=2>

<div id=&quot;div2&quot;>
                    <input type=submit name=continue value=&quot;Continue&quot; size=9>
</div>  

                    </td></tr>


                    <tr VALIGN=&quot;TOP&quot;><td colspan=2 height=100><IMG SRC=&quot;images/spacer.gif&quot; WIDTH=1 HEIGHT=160 BORDER=0> </td></tr>

</table>

<!--  **** End of body ****  -->
<!----HTML SOURCE ENDS HERE -->
</BODY>
</HTML>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Problems in using CSS with Netscape

May18

Programmer

aperfectcircle

Programmer

Similar threads

Part and Inventory Search

Sponsor