SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    Table formatting

    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:
    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>DoH - Desk of Help</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">
          <br />
    
          <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 &amp; 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><br />
        </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">
                  <br />
    
                  <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">
                  <br />
    
                  <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">
                  <br />
    
                  <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><br />
    
                                <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><br />
    
                                <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><br />
        </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>

    [edit]: I'm not sure if this is a CSS issue or an HTML issue, so if it needs to be moved whichever forum it is best suited for, that's fine.
    Last edited by Force Flow; Jun 16, 2005 at 07:23. Reason: code update

  2. #2
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Fairfax, Virginia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE is a pain in the *** to design for; it doesn't even adhere to all of the standards. What you're seeing in Firefox and Opera is more realistic of what your page should, theoretically, look like.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    I realize this, however, it still doesn't help figure out what's causing the problem.

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Yahoooo! Got it working!

    I had to enclose the ComputerOptions (and all other *Options) tables in a div tag, and hide/show the div tag instead of the table. After that, it worked perfectly


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •