Free Weekly Tech Newsletter

**Force Flow** · 06-16-2005, 09:31 AM

This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and, of course, it displays at it should in IE6:
http://computerslayer1.spymac.com/formpics/IE---1.gif
http://computerslayer1.spymac.com/formpics/IE---2.gif

In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing.
http://computerslayer1.spymac.com/fo.../opera---1.gif
http://computerslayer1.spymac.com/fo.../opera---2.gif

Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8.
http://computerslayer1.spymac.com/fo...firefox--1.gif
http://computerslayer1.spymac.com/fo...firefox--2.gif

Any ideas, guys? I'm stuck.

here's the code:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

  <meta name="generator" content=

  "HTML Tidy for Windows (vers 1st August 2004), see www.w3.org" />



  <title>page</title>

  <meta http-equiv="Content-Type" content=

  "text/html; charset=us-ascii" />

<style type='text/css'>

<!--

table {

        margin-left: auto; 

        margin-right: auto;

        width: 100%;

}

.td_seen { 

        border: 1px solid black; 

}

.table_seen { 

        border: 2px solid black; 

}

div.c2 { 

        text-align: left;

        margin: auto;

 }

div.c1 { 

        text-align: center; 

        margin: auto;

}

#ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions, #AV, #Periphs, #ShowProblem, #ShowRequest {

        display: none;

}

#ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions {

        width: 350px;

}

#AV, #Periphs {

        width: 100%;

        }

-->

</style>

<script type="text/javascript">

<!--

                function doHide(elementId){

                        document.getElementById(elementId).style.display = 'none';

                }

                function doShow(elementId){

                        document.getElementById(elementId).style.display = 'block';

                }

                function resetDropDown(elementID){

                        document.getElementById(elementID).value = '- Select One -';

                }

                function resetText(elementID){

                        document.getElementById(elementID).value = '';

                }

                function hideAllProblem(){                      

                        resetDropDown('ShowProblem');

                        //resetDropDown('Type');

                        //resetText('Manufacturer');

                        //resetText('Model');

                        //resetText('SN');

                        //resetText('Desc');

                        doHide('ComputerOptions');

                        doHide('PrinterOptions');

                        doHide('MonitorOptions');

                        doHide('AVPeriphsOptions');

                }

                function hideAllRequest(){

                        resetDropDown('ShowRequest');

                }

                function ProblemSelect(){ 

                        var ProblemSelect = document.getElementById('ShowProblem');

                        var cSelectVal = ProblemSelect.options[ProblemSelect.selectedIndex].value;

                        

                        switch (cSelectVal){ 

                                case '- Select One -':

                                doHide('ComputerOptions');

                                doHide('PrinterOptions');

                                doHide('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                case 'Computer':

                                doShow('ComputerOptions');

                                doHide('PrinterOptions');

                                doHide('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                

                                case 'Monitor':

                                doHide('ComputerOptions');

                                doHide('PrinterOptions');

                                doShow('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                

                                case 'Printer': 

                                doHide('ComputerOptions');

                                doShow('PrinterOptions');

                                doHide('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                

                                case 'AVPeriph': 

                                doHide('ComputerOptions');

                                doHide('PrinterOptions');

                                doHide('MonitorOptions');

                                doShow('AVPeriphsOptions');

                                break; 

                                

                        } 

                } 

                function RequestSelect(){ 

                        var RequestSelect = document.getElementById('ShowRequest');

                        var cSelectVal = Request.options[Request.selectedIndex].value;

                        

                        switch (cSelectVal){ 

                        

                                case 'Software Installation':

                                break;

                        

                        }

                        

                }

//-->

</script>

</head>



<body>

  <form action="" method="post">

    <div class="c1">

      <table class="td_seen" style="width: 520px;" cellpadding="1" cellspacing="0">

        <tr>

          <td class="td_seen">

            <div class="c1">

              <table style="width: 468px;" border="0" cellspacing="2" cellpadding="1">

                <tr>

                  <td style="width: 213px;">Building: 

                    <select size="1" name="Building">

                    <option selected="selected" value=

                    "- Select One -">

                      - Select One -

                    </option>



                    <option value="High School">

                      High School

                    </option>



                    <option value="Elementary School">

                      Elementary School

                    </option>



                    <option value="Bus Garage">

                      Bus Garage

                    </option>

                  </select></td>



                  <td style="width: 241px;">Room/Cluster:

                  <input name="Room" type="text" size="20" /></td>

                </tr>

              </table>

            </div>

          </td>

        </tr>



        <tr>

          <td class="td_seen">

            <div class="c1">

              <table style="width: 432px;" border="0" cellspacing="2" cellpadding="1">

                <tr>

                  <td style="width: 189px;">First Name:

                  <input type="text" name="FirstName" size="12" /></td>



                  <td style="width: 241px;">Last Name: 

                  <input type="text" name="LastName" size="20" /></td>

                </tr>

              </table>

            </div>

          </td>

        </tr>

      </table>

    </div>

    <div>&nbsp;</div>

    <div class="c1">

      <table class="td_seen" style="width: 200px;" cellpadding="1"cellspacing="0">

        <tr>

          <td class="td_seen">

            <div class="c1">

              <input type="radio" name="ProblemRequest" onclick=

              "doShow('ShowProblem'); doHide('ShowRequest'); hideAllRequest();"

              value="Problem" />Problem

            </div>

          </td>



          <td class="td_seen">

            <div class="c1">

              <input type="radio" name="ProblemRequest" onclick=

              "doShow('ShowRequest'); doHide('ShowProblem'); hideAllProblem();"

              value="Request" />Request

            </div>

          </td>

        </tr>

      </table>

    </div>



    <div class="c1">

      



      <table style="width: 0px;" border="0" cellpadding="1" cellspacing="2">

        <tr>

          <td>

            <div class="c1">

              <select id="ShowProblem" size="1" name="Problem"

              onchange="ProblemSelect()">

                <option selected="selected" value="- Select One -">

                  - Select One -

                </option>



                <option value="Computer">

                  Computer

                </option>



                <option value="Monitor">

                  Monitor

                </option>



                <option value="Printer">

                  Printer

                </option>



                <option value="AVPeriph">

                  A/V & Peripherals

                </option>



                <option value="Combination">

                  Combination

                </option>



                <option value="Other">

                  Other

                </option>

              </select> <select id="ShowRequest" size="1" name=

              "Request">

                <option selected="selected" value="- Select One -">

                  - Select One -

                </option>



                <option value="Software Installation">

                  Software Installation

                </option>

              </select>

            </div>

          </td>

        </tr>

      </table>

    </div>



    <div class="c1">

      <table id="ComputerOptions" class="table_seen" cellspacing="0" cellpadding="6">

        <tr>

          <td>

            <table border="0" cellspacing="2" cellpadding="1">

              <tr>

                <td>

                  <table border="0" cellspacing="2" cellpadding="1">

                    <tr>

                      <td>

                        <div class="c2">

                          Manufacturer/Brand:

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c2">

                          Model:

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c2">

                          Serial Number (S/N):

                        </div>

                      </td>

                    </tr>

                  </table>

                </td>



                <td>

                  <table border="0" cellspacing="2" cellpadding="1">

                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="ComputerManufacturer" size="20" />

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="ComputerModel" size="20" />

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="ComputerSN" size="20" />

                        </div>

                      </td>

                    </tr>

                  </table>

                </td>

              </tr>

            </table>



            <div class="c2">

              



              <table border="0" cellspacing="2" cellpadding="1">

                <tr>

                  <td>

                    <div class="c2">

                      Description of problem:

                    </div>

                  </td>

                </tr>



                <tr>

                  <td>

                    <div class="c1">

                      <textarea rows="4" name="ComputerDesc" cols="36"></textarea>

                    </div>

                  </td>

                </tr>

              </table>

            </div>

          </td>

        </tr>

      </table>

    </div>



    <div class="c1">

      <table id="PrinterOptions" class="table_seen" cellpadding="6" cellspacing="0">

        <tr>

          <td>

            <table border="0" cellspacing="2" cellpadding="1">

              <tr>

                <td>

                  <table border="0" cellspacing="2" cellpadding="1">

                    <tr>

                      <td>

                        <div class="c2">

                          Manufacturer/Brand:

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c2">

                          Model:

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c2">

                          Serial Number (S/N):

                        </div>

                      </td>

                    </tr>

                  </table>

                </td>



                <td>

                  <table border="0" cellspacing="2" cellpadding="1">

                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="PrinterManufacturer" size="20" />

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="PrinterModel" size="20" />

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="PrinterSN" size= "20" />

                        </div>

                      </td>

                    </tr>

                  </table>

                </td>

              </tr>

            </table>



            <div class="c2">

              



              <table border="0" cellspacing="2" cellpadding="1">

                <tr>

                  <td>

                    <div class="c2">

                      Description of problem:

                    </div>

                  </td>

                </tr>



                <tr>

                  <td>

                    <div class="c1">

                      <textarea rows="4" name="PrinterDesc" cols="36"></textarea>

                    </div>

                  </td>

                </tr>

              </table>

            </div>

          </td>

        </tr>

      </table>

    </div>



    <div class="c1">

      <table id="MonitorOptions" class="table_seen" cellpadding="6" cellspacing="0">

        <tr>

          <td>

            <table border="0" cellspacing="2" cellpadding="1">

              <tr>

                <td>

                  <table border="0" cellspacing="2" cellpadding=

                  "1">

                    <tr>

                      <td>

                        <div class="c2">

                          Manufacturer/Brand:

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c2">

                          Serial Number (S/N):

                        </div>

                      </td>

                    </tr>

                  </table>

                </td>



                <td>

                  <table border="0" cellspacing="2" cellpadding="1">

                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="MonitorManufacturer" size="20" />

                        </div>

                      </td>

                    </tr>



                    <tr>

                      <td>

                        <div class="c1">

                          <input type="text" name="MonitorSN" size="20" />

                        </div>

                      </td>

                    </tr>

                  </table>

                </td>

              </tr>

            </table>



            <div class="c2">

              



              <table border="0" cellspacing="2" cellpadding="1">

                <tr>

                  <td>

                    <div class="c2">

                      Description of problem:

                    </div>

                  </td>

                </tr>



                <tr>

                  <td>

                    <div class="c1">

                      <textarea rows="4" name="MonitorDesc" cols="36"></textarea>

                    </div>

                  </td>

                </tr>

              </table>

            </div>

          </td>

        </tr>

      </table>

    </div>



    <div class="c1">

      <table id="AVPeriphsOptions" class="table_seen" cellpadding="6" cellspacing="0">

        <tr>

          <td>

            <div class="c1">

              <table border="0" cellspacing="0" cellpadding="1">

                <tr>

                  <td>

                    <div class="c1">

                      <table class="td_seen" border="0" cellpadding="1" cellspacing="0">

                        <tr>

                          <td class="td_seen" style="width: 50%;">

                            <div class="c1">

                              <input type="radio" name="AVPeriph"

                              onclick=

                              "doShow('AV'); doHide('Periphs');"

                              value="AV" />A/V

                            </div>

                          </td>



                          <td class="td_seen" style="width: 50%;">

                            <div class="c1">

                              <input type="radio" name="AVPeriph"

                              onclick=

                              "doShow('Periphs'); doHide('AV');"

                              value="Periphs" />Peripherals

                            </div>

                          </td>

                        </tr>

                      </table>

                    </div>

                  </td>

                </tr>



                <tr>

                  <td>

                    <div class="c1">

                      <table id="AV" class="table_seen" cellspacing="0" cellpadding="6">

                        <tr>

                          <td>

                            <table border="0" cellspacing="2" cellpadding="1">

                              <tr>

                                <td>

                                  <table border="0" cellspacing="2" cellpadding="1">

                                    <tr>

                                      <td>

                                        <div class="c2">

                                          Type:

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c2">

                                          Manufacturer/Brand:

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c2">

                                          Serial Number (S/N):

                                        </div>

                                      </td>

                                    </tr>

                                  </table>

                                </td>



                                <td>

                                  <table border="0" cellspacing="2" cellpadding="1">

                                    <tr>

                                      <td>

                                        <div class="c1">

                                          <select size="1" name="AVType">

                                            <option selected=

                                            "selected" value=

                                            "- Select One -">

                                              - Select One -

                                            </option>



                                            <option value=

                                            "VCR Player">

                                              VCR Player

                                            </option>



                                            <option value=

                                            "DVD Player">

                                              DVD Player

                                            </option>



                                            <option value="TV">

                                              TV

                                            </option>



                                            <option value=

                                            "VCR Camera">

                                              VCR Camera

                                            </option>



                                            <option value=

                                            "Speakers">

                                              Speakers

                                            </option>



                                            <option value=

                                            "Slide Projector">

                                              Slide Projector

                                            </option>

                                          </select>

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c1">

                                          <input type="text" name="AVManufacturer" size="20" />

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c1">

                                          <input type="text" name="AVSN" size="20" />

                                        </div>

                                      </td>

                                    </tr>

                                  </table>

                                </td>

                              </tr>

                            </table>



                            <table border="0" cellspacing="2" cellpadding="1">

                              <tr>

                                <td>

                                  <div class="c2">

                                    Description of problem:

                                  </div>

                                </td>

                              </tr>



                              <tr>

                                <td>

                                  <div class="c1">

                                    <textarea rows="4" name="AVDesc" cols="34"></textarea>

                                  </div>

                                </td>

                              </tr>

                            </table>

                          </td>

                        </tr>

                      </table>

                    </div>



                    <div class="c1">

                      <table id="Periphs" class="table_seen" border="0" cellspacing="2" cellpadding="1">

                        <tr>

                          <td>

                            <table border="0" cellspacing="2" cellpadding="1">

                              <tr>

                                <td>

                                  <table border="0" cellspacing="2" cellpadding="1">

                                    <tr>

                                      <td>

                                        <div class="c2">

                                          Type:

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c2">

                                          Manufacturer/Brand:

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c2">

                                          Model:

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c2">

                                          Serial Number (S/N):

                                        </div>

                                      </td>

                                    </tr>

                                  </table>

                                </td>



                                <td>

                                  <table border="0" cellspacing="2" cellpadding="1">

                                    <tr>

                                      <td>

                                        <div class="c1">

                                          <select name="Type" size=

                                          "1" id="PeriphType">

                                            <option selected=

                                            "selected" value=

                                            "- Select One -">

                                              - Select One -

                                            </option>



                                            <option value=

                                            "Projector">

                                              Projector

                                            </option>



                                            <option value=

                                            "Scanner">

                                              Scanner

                                            </option>



                                            <option value=

                                            "Digital Camera">

                                              Digital Camera

                                            </option>



                                            <option value="Elmo">

                                              Elmo

                                            </option>

                                          </select>

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c1">

                                          <input type="text" name="PeriphManufacturer" size="20" />

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c1">

                                          <input type="text" name="PeriphModel" size="20" />

                                        </div>

                                      </td>

                                    </tr>



                                    <tr>

                                      <td>

                                        <div class="c1">

                                          <input type="text" name="PeriphSN" size="20" />

                                        </div>

                                      </td>

                                    </tr>

                                  </table>

                                </td>

                              </tr>

                            </table>



                            <table border="0" cellspacing="2" cellpadding="1">

                              <tr>

                                <td>

                                  <div class="c2">

                                    Description of problem:

                                  </div>

                                </td>

                              </tr>



                              <tr>

                                <td>

                                  <div class="c1">

                                    <textarea rows="4" name="PeriphDesc" cols="34"></textarea>

                                  </div>

                                </td>

                              </tr>

                            </table>

                          </td>

                        </tr>

                      </table>

                    </div>

                  </td>

                </tr>

              </table>

            </div>

          </td>

        </tr>

      </table>

    </div>



    <div class="c1">

      <input type="submit" name="Submit" value=

      "Submit" />&nbsp;&nbsp;&nbsp;

      <input type="reset" name="Reset" onclick=

      "doHide('AV'); doHide('Periphs'); hideAllProblem(); hideAllRequest(); doHide('ShowProblem'); doHide('ShowRequest');"

      value="Reset" />

    </div>

  </form>

</body>

</html>

**kram 2.0** · 06-16-2005, 01:03 PM

I just might be my not being able to find it but where do you define the width of the outer table - the table that surrounds the AV and Perhipherals box?

kram

Floppyman · 06-16-2005, 03:46 PM

For me Opera 8 has been somewhat buggy, so maybe that has something do while it is not displaying the table correctly. It also seems to have trouble parsing "~" in links. For some reason it takes out the next character after the "~". Sorry I couldn't help more.

**Force Flow** · 06-16-2005, 06:19 PM

I doubt it's *just* opera, since both browsers are having difficulty with the code.

table id="AVPeriphsOptions" is the outermost table

Statica · 06-16-2005, 08:11 PM

I tried looking at your code .. talk about nesting in divs and tables and divs and ....

why not just create a class for your tables that you wish to use with a particular style. Sorry couldn't be much more helpful, I'm feeling kinda dizzy now

**Force Flow** · 06-16-2005, 10:40 PM

hmm...now that you mention it...I probably should strip down the tables since I'm using CSS and not HTML for alignment and positioning.

Guess I'll do that tomorrow since I've gone bleery eyed looking at this and other code I'm working on.

Thanks for the assist so far

**Force Flow** · 06-17-2005, 10:19 AM

ok, I rebuilt the page, but am still having similar problems.

Here's a screenshot of firefox with the web tools extension, which is outlining all the cells so you can see what's going on.

http://computerslayer1.spymac.com/fo...firefox--3.gif

Everything in the table id="ComputerOptions" is aligned to the left, and the nested tables are not expanding to 100%. Any ideas?

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>title</title>

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

<style type='text/css'>

<!--

table {

        width: 100%;

}

.td_seen { 

        border: 1px solid black; 

}

.table_seen { 

        border: 2px solid black; 

}

div.c2 { 

        text-align: left;

        margin: auto;

 }

div.c1 { 

    text-align: center; 

    margin: auto;

}

.c1 table {

    margin-left: auto; 

    margin-right: auto;

}

#ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions, #AV, #Periphs, #ShowProblem, #ShowRequest {

    display: none;

}

#ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions {

    width: 350px;

}

#AV, #Periphs {

    width: 100%;

}

-->

</style>

<script type="text/javascript">

<!--

                function doHide(elementId){

                        document.getElementById(elementId).style.display = 'none';

                }

                function doShow(elementId){

                        document.getElementById(elementId).style.display = 'block';

                }

                function resetDropDown(elementID){

                        document.getElementById(elementID).value = '- Select One -';

                }

                function resetText(elementID){

                        document.getElementById(elementID).value = '';

                }

                function hideAllProblem(){                      

                        resetDropDown('ShowProblem');

                        //resetDropDown('Type');

                        //resetText('Manufacturer');

                        //resetText('Model');

                        //resetText('SN');

                        //resetText('Desc');

                        doHide('ComputerOptions');

                        doHide('PrinterOptions');

                        doHide('MonitorOptions');

                        doHide('AVPeriphsOptions');

                }

                function hideAllRequest(){

                        resetDropDown('ShowRequest');

                }

                function ProblemSelect(){ 

                        var ProblemSelect = document.getElementById('ShowProblem');

                        var cSelectVal = ProblemSelect.options[ProblemSelect.selectedIndex].value;

                        

                        switch (cSelectVal){ 

                                case '- Select One -':

                                doHide('ComputerOptions');

                                doHide('PrinterOptions');

                                doHide('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                case 'Computer':

                                doShow('ComputerOptions');

                                doHide('PrinterOptions');

                                doHide('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                

                                case 'Monitor':

                                doHide('ComputerOptions');

                                doHide('PrinterOptions');

                                doShow('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                

                                case 'Printer': 

                                doHide('ComputerOptions');

                                doShow('PrinterOptions');

                                doHide('MonitorOptions');

                                doHide('AVPeriphsOptions');

                                break; 

                                

                                case 'AVPeriph': 

                                doHide('ComputerOptions');

                                doHide('PrinterOptions');

                                doHide('MonitorOptions');

                                doShow('AVPeriphsOptions');

                                break; 

                                

                        } 

                } 

                function RequestSelect(){ 

                        var RequestSelect = document.getElementById('ShowRequest');

                        var cSelectVal = Request.options[Request.selectedIndex].value;

                        

                        switch (cSelectVal){ 

                        

                                case 'Software Installation':

                                break;

                        

                        }

                        

                }

//-->

</script>

</head>



<body>

  <form action="" method="post">

    <div class="c1">

      <table class="td_seen" style="width: 520px;" cellpadding="1" cellspacing="0">

        <tr>

          <td class="td_seen">

            <div class="c1">

              

            <table style="width: 0px;" border="0" cellspacing="2" cellpadding="1">

              <tr> 

                <td>Building: </td>

                <td><select size="1" name="Building">

                    <option selected="selected" value=

                    "- Select One -"> - Select One - </option>

                    <option value="High School"> High School </option>

                    <option value="Elementary School"> Elementary School </option>

                    <option value="Bus Garage"> Bus Garage </option>

                  </select></td>

                <td>&nbsp;&nbsp;&nbsp;</td>

                <td>Room/Cluster: </td>

                <td><input name="Room" type="text" size="20" /></td>

              </tr>

            </table>

            </div>

          </td>

        </tr>



        <tr>

          <td class="td_seen">

            <div class="c1">

              

            <table style="width: 0px;" border="0" cellspacing="2" cellpadding="1">

              <tr> 

                <td>First</td>

                <td>Name:</td>

                <td><input type="text" name="FirstName" size="12" /></td>

                <td>&nbsp;&nbsp;&nbsp;</td>

                <td>Last</td>

                <td>Name:</td>

                <td><input type="text" name="LastName" size="20" /></td>

              </tr>

            </table>

            </div>

          </td>

        </tr>

      </table>

    </div>

    <div>&nbsp;</div>

    <div class="c1">

      <table class="td_seen" style="width: 200px;" cellpadding="1"cellspacing="0">

        <tr>

          <td class="td_seen">

            <div class="c1">

              <input type="radio" name="ProblemRequest" onclick=

              "doShow('ShowProblem'); doHide('ShowRequest'); hideAllRequest();"

              value="Problem" />Problem

            </div>

          </td>



          <td class="td_seen">

            <div class="c1">

              <input type="radio" name="ProblemRequest" onclick=

              "doShow('ShowRequest'); doHide('ShowProblem'); hideAllProblem();"

              value="Request" />Request

            </div>

          </td>

        </tr>

      </table>

    </div>



    <div class="c1">

      



      <table style="width: 0px;" border="0" cellpadding="1" cellspacing="2">

        <tr>

          <td>

            <div class="c1">

              <select id="ShowProblem" size="1" name="Problem"

              onchange="ProblemSelect()">

                <option selected="selected" value="- Select One -">

                  - Select One -

                </option>



                <option value="Computer">

                  Computer

                </option>



                <option value="Monitor">

                  Monitor

                </option>



                <option value="Printer">

                  Printer

                </option>



                <option value="AVPeriph">

                  A/V & Peripherals

                </option>



                <option value="Combination">

                  Combination

                </option>



                <option value="Other">

                  Other

                </option>

              </select> <select id="ShowRequest" size="1" name=

              "Request">

                <option selected="selected" value="- Select One -">

                  - Select One -

                </option>



                <option value="Software Installation">

                  Software Installation

                </option>

              </select>

            </div>

          </td>

        </tr>

      </table>

    </div>



    

  

    

    <div class="c1">

    <table id="ComputerOptions" class="table_seen" border="0" cellspacing="6" cellpadding="1">

  <tr>

    <td><table border="0" cellspacing="2" cellpadding="1">

            <tr>

              <td><div class="c2">Manufacturer / Brand:</div></td>

              <td><div class="c1"><input type="text" name="textfield" /></div></td>

            </tr>

            <tr>

              <td><div class="c2">Model:</div></td>

              <td><div class="c1"><input type="text" name="textfield2" /></div></td>

            </tr>

            <tr>

              <td><div class="c2">Serial Number (S/N):</div></td>

              <td><div class="c1"><input type="text" name="textfield3" /></div></td>

            </tr>

          </table>

          

          

            <table border="0" cellspacing="2" cellpadding="1">

              <tr>

                <td><div class="c2">Description of Problem:</div></td>

              </tr>

              <tr>

                <td><div class="c1"><textarea name="textarea" cols="36" rows="4"></textarea></div></td>

              </tr>

            </table>

          

 </td>

  </tr>

</table>



    </div>

    

    

    <div class="c1">

    

      <input type="submit" name="Submit" value=

      "Submit" />&nbsp;&nbsp;&nbsp;

      <input type="reset" name="Reset" onclick=

      "doHide('AV'); doHide('Periphs'); hideAllProblem(); hideAllRequest(); doHide('ShowProblem'); doHide('ShowRequest');"

      value="Reset" />

    </div>

  </form>

</body>

</html>

Stryker · 06-17-2005, 10:44 AM

I removed my first suggestion... it was a little incorrect.

I believe my edit is the solution:

EDIT:
I just noticed... in the function "function doShow(elementId)" you are setting the display property to "block", which displays it at a set width to the contents. Try leaving it as ".style.display = '';" as shown below and take a look.

HTML Code:

 function doShow(elementId){
        document.getElementById(elementId).style.display = '';

**Force Flow** · 06-17-2005, 01:34 PM

Nothing shows up when I change it to what you suggested.

[edit]: Yahoooo! Got it working!

I had to enclose the CompuerOptions table in a div tag, and hide/show the div tag instead of the table. After that, it worked perfectly

Thanks guys

06-16-2005, 09:31 AM	#1
Force Flow Barefoot on the Moon! Staff Premium Member Join Date: Aug 2002 Location: Northeastern USA Posts: 13,385	strange table problem This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and, of course, it displays at it should in IE6: http://computerslayer1.spymac.com/formpics/IE---1.gif http://computerslayer1.spymac.com/formpics/IE---2.gif In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing. http://computerslayer1.spymac.com/fo.../opera---1.gif http://computerslayer1.spymac.com/fo.../opera---2.gif Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8. http://computerslayer1.spymac.com/fo...firefox--1.gif http://computerslayer1.spymac.com/fo...firefox--2.gif Any ideas, guys? I'm stuck. here's the code: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta name="generator" content= "HTML Tidy for Windows (vers 1st August 2004), see www.w3.org" /> <title>page</title> <meta http-equiv="Content-Type" content= "text/html; charset=us-ascii" /> <style type='text/css'> <!-- table { margin-left: auto; margin-right: auto; width: 100%; } .td_seen { border: 1px solid black; } .table_seen { border: 2px solid black; } div.c2 { text-align: left; margin: auto; } div.c1 { text-align: center; margin: auto; } #ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions, #AV, #Periphs, #ShowProblem, #ShowRequest { display: none; } #ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions { width: 350px; } #AV, #Periphs { width: 100%; } --> </style> <script type="text/javascript"> <!-- function doHide(elementId){ document.getElementById(elementId).style.display = 'none'; } function doShow(elementId){ document.getElementById(elementId).style.display = 'block'; } function resetDropDown(elementID){ document.getElementById(elementID).value = '- Select One -'; } function resetText(elementID){ document.getElementById(elementID).value = ''; } function hideAllProblem(){ resetDropDown('ShowProblem'); //resetDropDown('Type'); //resetText('Manufacturer'); //resetText('Model'); //resetText('SN'); //resetText('Desc'); doHide('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); } function hideAllRequest(){ resetDropDown('ShowRequest'); } function ProblemSelect(){ var ProblemSelect = document.getElementById('ShowProblem'); var cSelectVal = ProblemSelect.options[ProblemSelect.selectedIndex].value; switch (cSelectVal){ case '- Select One -': doHide('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'Computer': doShow('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'Monitor': doHide('ComputerOptions'); doHide('PrinterOptions'); doShow('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'Printer': doHide('ComputerOptions'); doShow('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'AVPeriph': doHide('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doShow('AVPeriphsOptions'); break; } } function RequestSelect(){ var RequestSelect = document.getElementById('ShowRequest'); var cSelectVal = Request.options[Request.selectedIndex].value; switch (cSelectVal){ case 'Software Installation': break; } } //--> </script> </head> <body> <form action="" method="post"> <div class="c1"> <table class="td_seen" style="width: 520px;" cellpadding="1" cellspacing="0"> <tr> <td class="td_seen"> <div class="c1"> <table style="width: 468px;" border="0" cellspacing="2" cellpadding="1"> <tr> <td style="width: 213px;">Building: <select size="1" name="Building"> <option selected="selected" value= "- Select One -"> - Select One - </option> <option value="High School"> High School </option> <option value="Elementary School"> Elementary School </option> <option value="Bus Garage"> Bus Garage </option> </select></td> <td style="width: 241px;">Room/Cluster: <input name="Room" type="text" size="20" /></td> </tr> </table> </div> </td> </tr> <tr> <td class="td_seen"> <div class="c1"> <table style="width: 432px;" border="0" cellspacing="2" cellpadding="1"> <tr> <td style="width: 189px;">First Name: <input type="text" name="FirstName" size="12" /></td> <td style="width: 241px;">Last Name: <input type="text" name="LastName" size="20" /></td> </tr> </table> </div> </td> </tr> </table> </div> <div> </div> <div class="c1"> <table class="td_seen" style="width: 200px;" cellpadding="1"cellspacing="0"> <tr> <td class="td_seen"> <div class="c1"> <input type="radio" name="ProblemRequest" onclick= "doShow('ShowProblem'); doHide('ShowRequest'); hideAllRequest();" value="Problem" />Problem </div> </td> <td class="td_seen"> <div class="c1"> <input type="radio" name="ProblemRequest" onclick= "doShow('ShowRequest'); doHide('ShowProblem'); hideAllProblem();" value="Request" />Request </div> </td> </tr> </table> </div> <div class="c1"> <table style="width: 0px;" border="0" cellpadding="1" cellspacing="2"> <tr> <td> <div class="c1"> <select id="ShowProblem" size="1" name="Problem" onchange="ProblemSelect()"> <option selected="selected" value="- Select One -"> - Select One - </option> <option value="Computer"> Computer </option> <option value="Monitor"> Monitor </option> <option value="Printer"> Printer </option> <option value="AVPeriph"> A/V & Peripherals </option> <option value="Combination"> Combination </option> <option value="Other"> Other </option> </select> <select id="ShowRequest" size="1" name= "Request"> <option selected="selected" value="- Select One -"> - Select One - </option> <option value="Software Installation"> Software Installation </option> </select> </div> </td> </tr> </table> </div> <div class="c1"> <table id="ComputerOptions" class="table_seen" cellspacing="0" cellpadding="6"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Manufacturer/Brand: </div> </td> </tr> <tr> <td> <div class="c2"> Model: </div> </td> </tr> <tr> <td> <div class="c2"> Serial Number (S/N): </div> </td> </tr> </table> </td> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c1"> <input type="text" name="ComputerManufacturer" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="ComputerModel" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="ComputerSN" size="20" /> </div> </td> </tr> </table> </td> </tr> </table> <div class="c2"> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Description of problem: </div> </td> </tr> <tr> <td> <div class="c1"> <textarea rows="4" name="ComputerDesc" cols="36"></textarea> </div> </td> </tr> </table> </div> </td> </tr> </table> </div> <div class="c1"> <table id="PrinterOptions" class="table_seen" cellpadding="6" cellspacing="0"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Manufacturer/Brand: </div> </td> </tr> <tr> <td> <div class="c2"> Model: </div> </td> </tr> <tr> <td> <div class="c2"> Serial Number (S/N): </div> </td> </tr> </table> </td> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c1"> <input type="text" name="PrinterManufacturer" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="PrinterModel" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="PrinterSN" size= "20" /> </div> </td> </tr> </table> </td> </tr> </table> <div class="c2"> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Description of problem: </div> </td> </tr> <tr> <td> <div class="c1"> <textarea rows="4" name="PrinterDesc" cols="36"></textarea> </div> </td> </tr> </table> </div> </td> </tr> </table> </div> <div class="c1"> <table id="MonitorOptions" class="table_seen" cellpadding="6" cellspacing="0"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <table border="0" cellspacing="2" cellpadding= "1"> <tr> <td> <div class="c2"> Manufacturer/Brand: </div> </td> </tr> <tr> <td> <div class="c2"> Serial Number (S/N): </div> </td> </tr> </table> </td> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c1"> <input type="text" name="MonitorManufacturer" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="MonitorSN" size="20" /> </div> </td> </tr> </table> </td> </tr> </table> <div class="c2"> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Description of problem: </div> </td> </tr> <tr> <td> <div class="c1"> <textarea rows="4" name="MonitorDesc" cols="36"></textarea> </div> </td> </tr> </table> </div> </td> </tr> </table> </div> <div class="c1"> <table id="AVPeriphsOptions" class="table_seen" cellpadding="6" cellspacing="0"> <tr> <td> <div class="c1"> <table border="0" cellspacing="0" cellpadding="1"> <tr> <td> <div class="c1"> <table class="td_seen" border="0" cellpadding="1" cellspacing="0"> <tr> <td class="td_seen" style="width: 50%;"> <div class="c1"> <input type="radio" name="AVPeriph" onclick= "doShow('AV'); doHide('Periphs');" value="AV" />A/V </div> </td> <td class="td_seen" style="width: 50%;"> <div class="c1"> <input type="radio" name="AVPeriph" onclick= "doShow('Periphs'); doHide('AV');" value="Periphs" />Peripherals </div> </td> </tr> </table> </div> </td> </tr> <tr> <td> <div class="c1"> <table id="AV" class="table_seen" cellspacing="0" cellpadding="6"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Type: </div> </td> </tr> <tr> <td> <div class="c2"> Manufacturer/Brand: </div> </td> </tr> <tr> <td> <div class="c2"> Serial Number (S/N): </div> </td> </tr> </table> </td> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c1"> <select size="1" name="AVType"> <option selected= "selected" value= "- Select One -"> - Select One - </option> <option value= "VCR Player"> VCR Player </option> <option value= "DVD Player"> DVD Player </option> <option value="TV"> TV </option> <option value= "VCR Camera"> VCR Camera </option> <option value= "Speakers"> Speakers </option> <option value= "Slide Projector"> Slide Projector </option> </select> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="AVManufacturer" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="AVSN" size="20" /> </div> </td> </tr> </table> </td> </tr> </table> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Description of problem: </div> </td> </tr> <tr> <td> <div class="c1"> <textarea rows="4" name="AVDesc" cols="34"></textarea> </div> </td> </tr> </table> </td> </tr> </table> </div> <div class="c1"> <table id="Periphs" class="table_seen" border="0" cellspacing="2" cellpadding="1"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Type: </div> </td> </tr> <tr> <td> <div class="c2"> Manufacturer/Brand: </div> </td> </tr> <tr> <td> <div class="c2"> Model: </div> </td> </tr> <tr> <td> <div class="c2"> Serial Number (S/N): </div> </td> </tr> </table> </td> <td> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c1"> <select name="Type" size= "1" id="PeriphType"> <option selected= "selected" value= "- Select One -"> - Select One - </option> <option value= "Projector"> Projector </option> <option value= "Scanner"> Scanner </option> <option value= "Digital Camera"> Digital Camera </option> <option value="Elmo"> Elmo </option> </select> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="PeriphManufacturer" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="PeriphModel" size="20" /> </div> </td> </tr> <tr> <td> <div class="c1"> <input type="text" name="PeriphSN" size="20" /> </div> </td> </tr> </table> </td> </tr> </table> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td> <div class="c2"> Description of problem: </div> </td> </tr> <tr> <td> <div class="c1"> <textarea rows="4" name="PeriphDesc" cols="34"></textarea> </div> </td> </tr> </table> </td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </div> <div class="c1"> <input type="submit" name="Submit" value= "Submit" />    <input type="reset" name="Reset" onclick= "doHide('AV'); doHide('Periphs'); hideAllProblem(); hideAllRequest(); doHide('ShowProblem'); doHide('ShowRequest');" value="Reset" /> </div> </form> </body> </html> Share Share this post on Digg Del.icio.us Technorati Twitter __________________ There are two secrets to staying young, being happy, and achieving success. You have to laugh and find humor every day, and you have to have a dream.

06-16-2005, 01:03 PM	#2
kram 2.0 Moderator Staff Premium Member Join Date: Aug 2003 Location: Richmond, VA Posts: 7,835	I just might be my not being able to find it but where do you define the width of the outer table - the table that surrounds the AV and Perhipherals box? kram Share Share this post on Digg Del.icio.us Technorati Twitter __________________ "For today, goodbye. For tomorrow, good luck. And forever, Go Blue!" University of Michigan President Mary Sue Coleman

06-16-2005, 03:46 PM	#3
Floppyman Member (13 bit) Join Date: Mar 1999 Posts: 6,791	For me Opera 8 has been somewhat buggy, so maybe that has something do while it is not displaying the table correctly. It also seems to have trouble parsing "~" in links. For some reason it takes out the next character after the "~". Sorry I couldn't help more. Share Share this post on Digg Del.icio.us Technorati Twitter

06-16-2005, 06:19 PM	#4
Force Flow Barefoot on the Moon! Staff Premium Member Join Date: Aug 2002 Location: Northeastern USA Posts: 13,385	I doubt it's just opera, since both browsers are having difficulty with the code. table id="AVPeriphsOptions" is the outermost table Share Share this post on Digg Del.icio.us Technorati Twitter

06-16-2005, 08:11 PM	#5
Statica Premium Member Join Date: Jun 1999 Posts: 9,231	I tried looking at your code .. talk about nesting in divs and tables and divs and .... why not just create a class for your tables that you wish to use with a particular style. Sorry couldn't be much more helpful, I'm feeling kinda dizzy now Share Share this post on Digg Del.icio.us Technorati Twitter

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter

06-16-2005, 10:40 PM	#6
Force Flow Barefoot on the Moon! Staff Premium Member Join Date: Aug 2002 Location: Northeastern USA Posts: 13,385	hmm...now that you mention it...I probably should strip down the tables since I'm using CSS and not HTML for alignment and positioning. Guess I'll do that tomorrow since I've gone bleery eyed looking at this and other code I'm working on. Thanks for the assist so far Share Share this post on Digg Del.icio.us Technorati Twitter

06-17-2005, 10:19 AM	#7
Force Flow Barefoot on the Moon! Staff Premium Member Join Date: Aug 2002 Location: Northeastern USA Posts: 13,385	ok, I rebuilt the page, but am still having similar problems. Here's a screenshot of firefox with the web tools extension, which is outlining all the cells so you can see what's going on. http://computerslayer1.spymac.com/fo...firefox--3.gif Everything in the table id="ComputerOptions" is aligned to the left, and the nested tables are not expanding to 100%. Any ideas? PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>title</title> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <style type='text/css'> <!-- table { width: 100%; } .td_seen { border: 1px solid black; } .table_seen { border: 2px solid black; } div.c2 { text-align: left; margin: auto; } div.c1 { text-align: center; margin: auto; } .c1 table { margin-left: auto; margin-right: auto; } #ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions, #AV, #Periphs, #ShowProblem, #ShowRequest { display: none; } #ComputerOptions, #PrinterOptions, #MonitorOptions, #AVPeriphsOptions { width: 350px; } #AV, #Periphs { width: 100%; } --> </style> <script type="text/javascript"> <!-- function doHide(elementId){ document.getElementById(elementId).style.display = 'none'; } function doShow(elementId){ document.getElementById(elementId).style.display = 'block'; } function resetDropDown(elementID){ document.getElementById(elementID).value = '- Select One -'; } function resetText(elementID){ document.getElementById(elementID).value = ''; } function hideAllProblem(){ resetDropDown('ShowProblem'); //resetDropDown('Type'); //resetText('Manufacturer'); //resetText('Model'); //resetText('SN'); //resetText('Desc'); doHide('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); } function hideAllRequest(){ resetDropDown('ShowRequest'); } function ProblemSelect(){ var ProblemSelect = document.getElementById('ShowProblem'); var cSelectVal = ProblemSelect.options[ProblemSelect.selectedIndex].value; switch (cSelectVal){ case '- Select One -': doHide('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'Computer': doShow('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'Monitor': doHide('ComputerOptions'); doHide('PrinterOptions'); doShow('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'Printer': doHide('ComputerOptions'); doShow('PrinterOptions'); doHide('MonitorOptions'); doHide('AVPeriphsOptions'); break; case 'AVPeriph': doHide('ComputerOptions'); doHide('PrinterOptions'); doHide('MonitorOptions'); doShow('AVPeriphsOptions'); break; } } function RequestSelect(){ var RequestSelect = document.getElementById('ShowRequest'); var cSelectVal = Request.options[Request.selectedIndex].value; switch (cSelectVal){ case 'Software Installation': break; } } //--> </script> </head> <body> <form action="" method="post"> <div class="c1"> <table class="td_seen" style="width: 520px;" cellpadding="1" cellspacing="0"> <tr> <td class="td_seen"> <div class="c1"> <table style="width: 0px;" border="0" cellspacing="2" cellpadding="1"> <tr> <td>Building: </td> <td><select size="1" name="Building"> <option selected="selected" value= "- Select One -"> - Select One - </option> <option value="High School"> High School </option> <option value="Elementary School"> Elementary School </option> <option value="Bus Garage"> Bus Garage </option> </select></td> <td>   </td> <td>Room/Cluster: </td> <td><input name="Room" type="text" size="20" /></td> </tr> </table> </div> </td> </tr> <tr> <td class="td_seen"> <div class="c1"> <table style="width: 0px;" border="0" cellspacing="2" cellpadding="1"> <tr> <td>First</td> <td>Name:</td> <td><input type="text" name="FirstName" size="12" /></td> <td>   </td> <td>Last</td> <td>Name:</td> <td><input type="text" name="LastName" size="20" /></td> </tr> </table> </div> </td> </tr> </table> </div> <div> </div> <div class="c1"> <table class="td_seen" style="width: 200px;" cellpadding="1"cellspacing="0"> <tr> <td class="td_seen"> <div class="c1"> <input type="radio" name="ProblemRequest" onclick= "doShow('ShowProblem'); doHide('ShowRequest'); hideAllRequest();" value="Problem" />Problem </div> </td> <td class="td_seen"> <div class="c1"> <input type="radio" name="ProblemRequest" onclick= "doShow('ShowRequest'); doHide('ShowProblem'); hideAllProblem();" value="Request" />Request </div> </td> </tr> </table> </div> <div class="c1"> <table style="width: 0px;" border="0" cellpadding="1" cellspacing="2"> <tr> <td> <div class="c1"> <select id="ShowProblem" size="1" name="Problem" onchange="ProblemSelect()"> <option selected="selected" value="- Select One -"> - Select One - </option> <option value="Computer"> Computer </option> <option value="Monitor"> Monitor </option> <option value="Printer"> Printer </option> <option value="AVPeriph"> A/V & Peripherals </option> <option value="Combination"> Combination </option> <option value="Other"> Other </option> </select> <select id="ShowRequest" size="1" name= "Request"> <option selected="selected" value="- Select One -"> - Select One - </option> <option value="Software Installation"> Software Installation </option> </select> </div> </td> </tr> </table> </div> <div class="c1"> <table id="ComputerOptions" class="table_seen" border="0" cellspacing="6" cellpadding="1"> <tr> <td><table border="0" cellspacing="2" cellpadding="1"> <tr> <td><div class="c2">Manufacturer / Brand:</div></td> <td><div class="c1"><input type="text" name="textfield" /></div></td> </tr> <tr> <td><div class="c2">Model:</div></td> <td><div class="c1"><input type="text" name="textfield2" /></div></td> </tr> <tr> <td><div class="c2">Serial Number (S/N):</div></td> <td><div class="c1"><input type="text" name="textfield3" /></div></td> </tr> </table> <table border="0" cellspacing="2" cellpadding="1"> <tr> <td><div class="c2">Description of Problem:</div></td> </tr> <tr> <td><div class="c1"><textarea name="textarea" cols="36" rows="4"></textarea></div></td> </tr> </table> </td> </tr> </table> </div> <div class="c1"> <input type="submit" name="Submit" value= "Submit" />    <input type="reset" name="Reset" onclick= "doHide('AV'); doHide('Periphs'); hideAllProblem(); hideAllRequest(); doHide('ShowProblem'); doHide('ShowRequest');" value="Reset" /> </div> </form> </body> </html> Share Share this post on Digg Del.icio.us Technorati Twitter Last edited by Force Flow; 06-17-2005 at 10:22 AM.

06-17-2005, 10:44 AM	#8
Stryker It can never be too quiet Join Date: May 2004 Location: Burlington, Ontario Posts: 1,090	I removed my first suggestion... it was a little incorrect. I believe my edit is the solution: EDIT: I just noticed... in the function "function doShow(elementId)" you are setting the display property to "block", which displays it at a set width to the contents. Try leaving it as ".style.display = '';" as shown below and take a look. HTML Code: function doShow(elementId){ document.getElementById(elementId).style.display = ''; Share Share this post on Digg Del.icio.us Technorati Twitter __________________ Athlon XP 2800+ • Asus A7N8X (nVidia Nforce2) • Radeon 9600 Pro 256MB • 2x512MB KVR DDR PC3200 Dual Channel • 120GB Seagate 7200RPM 8MB • 160GB WD 7200RPM 8MB • Liteon DVD±RW DL • AOpen DVD±RW DL • Vantec Ion2 350W PSUSend me your picture for the Member Photo Gallery Last edited by Stryker; 06-17-2005 at 11:07 AM.

06-17-2005, 01:34 PM	#9
Force Flow Barefoot on the Moon! Staff Premium Member Join Date: Aug 2002 Location: Northeastern USA Posts: 13,385	Nothing shows up when I change it to what you suggested. [edit]: Yahoooo! Got it working! I had to enclose the CompuerOptions table in a div tag, and hide/show the div tag instead of the table. After that, it worked perfectly Thanks guys Share Share this post on Digg Del.icio.us Technorati Twitter Last edited by Force Flow; 06-17-2005 at 02:23 PM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Subscribe to THE INSIDER

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter