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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

display='block' netscape and mozzila nightmare

Status
Not open for further replies.
gameon

gameon

Programmer
Feb 23, 2001
325
GB
Can ANYONE please please help me understand how to get this page to behave in IE and netscape?

M@

------------------------------------------------------------


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>
<title>Untitled</title>
</head>

<body>

<TABLE ALIGN=&quot;center&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; BORDER=&quot;0&quot; WIDTH=&quot;593&quot;>
<TR VALIGN=&quot;top&quot;>
<TD ALIGN=&quot;center&quot;>

<TABLE ALIGN=&quot;center&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; BORDER=&quot;1&quot; WIDTH=&quot;336&quot;>
<TR VALIGN=&quot;top&quot;>
<TD>1<INPUT NAME=&quot;paymentoption&quot; TYPE=&quot;radio&quot; VALUE=&quot;display1&quot; STYLE=&quot;border-top:0px;border-left:0px;border-right:0px;border-bottom:0px;&quot; onClick=&quot;showPaymentFields(1)&quot; CHECKED><BR>
2<INPUT NAME=&quot;paymentoption&quot; TYPE=&quot;radio&quot; VALUE=&quot;display1&quot; STYLE=&quot;border-top:0px;border-left:0px;border-right:0px;border-bottom:0px;&quot; onClick=&quot;showPaymentFields(2)&quot;><BR>
3<INPUT NAME=&quot;paymentoption&quot; TYPE=&quot;radio&quot; VALUE=&quot;display1&quot; STYLE=&quot;border-top:0px;border-left:0px;border-right:0px;border-bottom:0px;&quot; onClick=&quot;showPaymentFields(3)&quot;></TD>
</TR>
</TABLE>

</TD>
</TR>
<TR VALIGN=&quot;top&quot; ID=&quot;Option1&quot;>
<TD BACKGROUND=&quot;/images/common/colorfill/ffffff.gif&quot; ALIGN=&quot;center&quot;>

<TABLE ALIGN=&quot;center&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; BORDER=&quot;1&quot; WIDTH=&quot;336&quot;>
<TR VALIGN=&quot;top&quot;>
<TD>Output 1</TD>
</TR>
</TABLE>

</TD>
</TR>
<TR VALIGN=&quot;top&quot; ID=&quot;Option2&quot;>
<TD BACKGROUND=&quot;/images/common/colorfill/ffffff.gif&quot; ALIGN=&quot;center&quot;>

<TABLE ALIGN=&quot;center&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; BORDER=&quot;1&quot; WIDTH=&quot;336&quot;>
<TR VALIGN=&quot;top&quot;>
<TD>Output 2</TD>
</TR>
</TABLE>

</TD>
</TR>
<TR VALIGN=&quot;top&quot; ID=&quot;Option3&quot;>
<TD BACKGROUND=&quot;/images/common/colorfill/ffffff.gif&quot; ALIGN=&quot;center&quot;>

<TABLE ALIGN=&quot;center&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; BORDER=&quot;1&quot; WIDTH=&quot;336&quot;>
<TR VALIGN=&quot;top&quot;>
<TD>Output 3</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

<script language=&quot;JavaScript&quot;>
function showPaymentFields(number)
{
switch (number) {
case 1:
document.getElementById('Option1').style.display = 'block';
document.getElementById('Option2').style.display = 'none';
document.getElementById('Option3').style.display = 'none';
break;
case 2:
document.getElementById('Option1').style.display = 'none';
document.getElementById('Option2').style.display = 'block';
document.getElementById('Option3').style.display = 'none';
break;
case 3:
document.getElementById('Option1').style.display = 'none';
document.getElementById('Option2').style.display = 'none';
document.getElementById('Option3').style.display = 'block';
break;
default:
document.getElementById('Option1').style.display = 'block';
document.getElementById('Option2').style.display = 'none';
document.getElementById('Option3').style.display = 'none';
}


}

</script>

</body>
</html>
 
Sort by date Sort by votes
for some reason the whole cell moves to the left when an option is selected. If my monitor was not so heavy, i'd have thrown it at something by now...

M@
 
Upvote 0 Downvote
hi there

I have just tried this in IE6,avante, no movement at all

your script is just not netscape friendly i have a put a simailar code that is short that uses span tages to make sections visable or hidden which you might find useful.

<script language=&quot;JavaScript&quot;>
function showbutton(qa,divid)
{

{document.getElementById(divid).style.visibility=&quot;Hidden&quot;}

}
function Reset(qa,divid)
{

{document.getElementById(divid).style.visibility=&quot;visible&quot;}

}</script> <table width=&quot;327&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr align=&quot;left&quot; valign=&quot;top&quot;>
<td width=&quot;262&quot; height=&quot;61&quot;>Option 1 in my opinion is ranked</td>
<td width=&quot;65&quot; align=&quot;right&quot;> <div id=&quot;qa1&quot; style=&quot;visibility:visible;&quot;>1st
<input type=&quot;radio&quot; name=&quot;qa&quot; onClick=&quot;showbutton(this.value,'qb1');showbutton(this.value,'qc1');showbutton(this.value,'qa2');showbutton(this.value,'qa3')&quot; value=&quot;option 1 is my 1st choice&quot;>
</div>
<div id=&quot;qa2&quot; style=&quot;visibility:visible;&quot;>2nd
<input type=&quot;radio&quot; name=&quot;qa&quot; onClick=&quot;showbutton(this.value,'qb2');showbutton(this.value,'qc2');showbutton(this.value,'qa1');showbutton(this.value,'qa3')&quot; value=&quot;option 1 is my 2nd choice&quot;>
</div>
<div id=&quot;qa3&quot; style=&quot;visibility:visible;&quot;>3rd
<input type=&quot;radio&quot; name=&quot;qa&quot; onClick=&quot;showbutton(this.value,'qb3');showbutton(this.value,'qc3');showbutton(this.value,'qa1');showbutton(this.value,'qa2')&quot; value=&quot;option 1 is my 3rd choice&quot;>
</div>
<br> <br> </td>
</tr>
<tr align=&quot;left&quot; valign=&quot;top&quot;>
<td height=&quot;64&quot;>Option 2 in my opinion is ranked</td>
<td align=&quot;right&quot;> <div id=&quot;qb1&quot; style=&quot;visibility:visible;&quot;>1st
<input type=&quot;radio&quot; name=&quot;qb&quot; onClick=&quot;showbutton(this.value,'qa1');showbutton(this.value,'qc1');showbutton(this.value,'qb2');showbutton(this.value,'qb3')&quot; value=&quot;option 2 is my 1sr choice&quot;>
</div>
<div id=&quot;qb2&quot; style=&quot;visibility:visible;&quot;>2nd
<input type=&quot;radio&quot; name=&quot;qb&quot; onClick=&quot;showbutton(this.value,'qa2');showbutton(this.value,'qc2');showbutton(this.value,'qb1');showbutton(this.value,'qb3')&quot; value=&quot;option 2 is my 2nd choice&quot;>
</div>
<div id=&quot;qb3&quot; style=&quot;visibility:visible;&quot;>3rd
<input type=&quot;radio&quot; name=&quot;qb&quot; onClick=&quot;showbutton(this.value,'qa3');showbutton(this.value,'qc3');showbutton(this.value,'qb1');showbutton(this.value,'qb2')&quot; value=&quot;option 2 is my 3rd choice&quot;>
</div>
<br> <br> </td>
</tr>
<tr align=&quot;left&quot; valign=&quot;top&quot;>
<td>Option 3 in my opinion is ranked</td>
<td align=&quot;right&quot;><div id=&quot;qc1&quot; style=&quot;visibility:visible;&quot;>1st
<input type=&quot;radio&quot; name=&quot;qc&quot; onClick=&quot;showbutton(this.value,'qa1');showbutton(this.value,'qb1');showbutton(this.value,'qc2');showbutton(this.value,'qc3')&quot; value=&quot;option 3 is my 3rd choice&quot;>
</div>
<div id=&quot;qc2&quot; style=&quot;visibility:visible;&quot;>2nd
<input type=&quot;radio&quot; name=&quot;qc&quot; onClick=&quot;showbutton(this.value,'qa2');showbutton(this.value,'qb2');showbutton(this.value,'qc1');showbutton(this.value,'qc3')&quot; value=&quot;option 3 is my 2nd choice&quot;>
</div>
<div id=&quot;qc3&quot; style=&quot;visibility:visible;&quot;>3rd
<input type=&quot;radio&quot; name=&quot;qc&quot; onClick=&quot;showbutton(this.value,'qa3');showbutton(this.value,'qb3');showbutton(this.value,'qc1');showbutton(this.value,'qc2')&quot; value=&quot;option 3 is my 3rd choice&quot;>
</div>
<br> <br> </td>
</tr>
<tr align=&quot;center&quot; valign=&quot;top&quot;>
<td colspan=&quot;2&quot;> <input type=&quot;button&quot; value=&quot;Reset Options&quot; onClick=&quot;Reset(this.value,'qa1');Reset(this.value,'qa2');Reset(this.value,'qa3');Reset(this.value,'qb1');Reset(this.value,'qb2');Reset(this.value,'qb3');Reset(this.value,'qc1');Reset(this.value,'qc2');Reset(this.value,'qc3')&quot;>
</td>
</tr>
</table>

try that you will just need to look at the code for how it works and remove the mulitple launch comands to make what you need out of it

Have Fun

dean
 
Upvote 0 Downvote
instaed of display='block';//which causes the element to bahave like a block
use the more correct:
display='';//causes the default for the element

or even:
display='table-row';// for table-rows!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
301
AbidingDude
AbidingDude
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
104
chikwendu
chikwendu
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
484
MDGarcia
MDGarcia

Part and Inventory Search

Sponsor

Back
Top