SitePoint Sponsor

User Tag List

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

    w3c XHTML validation questions

    I tried validating this page with XHTML Strict, but I'm left with 3 problems I don't know what to do with:

    1. Line 96, column 41: there is no attribute "align"

    ...le class='td_seen' width="520" align="center" cellpadding="1" cellspacing="..

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

    2. Line 101, column 22: there is no attribute "width"

    <td width="213">Building:


    3. Line 126, column 37: there is no attribute "align"

    <td class='td_seen'><div align="center"><input type="radio" name="ProblemR
    and here's the source:
    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>DoH - Desk of Help</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type='text/css'>
    .td_seen {
    	border: 1px solid black;
    }
    .table_seen {
    	border: 2px solid black;
    }
    </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 Problem = document.getElementById('Problem');
    			var cSelectVal = Problem.options[Problem.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(){ 
    		}
    
    //-->
    </script>
    </head>
    
    <body>
    <form action="" method="post">
    <table class='td_seen' width="520" align="center" cellpadding="1" cellspacing="0">
      <tr>
        <td class='td_seen'>
    		<table width="468" border="0" align="center" cellspacing="2" cellpadding="1">
              <tr>
                <td width="213">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 width="241">Room/Cluster: 
                  <input name="Room" type="text" size="20" /></td>
              </tr>
            </table></td>
      </tr>
      <tr>
        <td class='td_seen'><table width="432" border="0" align="center" cellspacing="2" cellpadding="1">
              <tr>
                <td width="189">First Name: <input type="text" name="FirstName" size="12" /></td>
                <td width="241">Last Name: <input type="text" name="LastName" size="20" /></td>
              </tr>
            </table></td>
      </tr>
    </table>
    <div>&nbsp;</div>
      
      <table class='td_seen' width="200" align="center" cellpadding="1" cellspacing="0">
        <tr>
          <td class='td_seen'><div align="center"><input type="radio" name="ProblemRequest" onclick="doShow('ShowProblem'); doHide('ShowRequest'); hideAllRequest();" value="Problem" />Problem</div></td>
          <td class='td_seen'><div align="center"><input type="radio" name="ProblemRequest" onclick="doShow('ShowRequest'); doHide('ShowProblem'); hideAllProblem();" value="Request" />Request</div></td>
        </tr>
      </table>
      <div align="center"><br />
        <table width="0" border="0" align="center" cellpadding="1" cellspacing="2">
          <tr>
            <td><div align="center">
                <select id="ShowProblem" size="1" name="Problem" style='display:none' 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" style='display:none'>
                  <option selected="selected" value="- Select One -">- Select One -</option>
                  <option value="Software Installation">Software Installation</option>
                </select>
              </div></td>
          </tr>
        </table>
        <br />
        <table id="ComputerOptions" class="table_seen" width="350" cellspacing="0" cellpadding="6" style='display:none'>
          <tr> 
            <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                <tr> 
                  <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                      <tr> 
                        <td><div align="left">Manufacturer/Brand:</div></td>
                      </tr>
                      <tr> 
                        <td><div align="left">Model:</div></td>
                      </tr>
                      <tr> 
                        <td><div align="left">Serial Number (S/N):</div></td>
                      </tr>
                    </table></td>
                  <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="ComputerManufacturer" size="20" />
                          </div></td>
                      </tr>
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="ComputerModel" size="20" />
                          </div></td>
                      </tr>
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="ComputerSN" size="20" />
                          </div></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <div align="left"><br />
                <table width="100%" border="0" cellspacing="2" cellpadding="1">
                  <tr> 
                    <td><div align="left">Description of problem:</div></td>
                  </tr>
                  <tr> 
                    <td><div align="center"> 
                        <textarea rows="4" name="ComputerDesc" cols="39"></textarea>
                      </div></td>
                  </tr>
                </table>
              </div></td>
          </tr>
        </table>
        <table id="PrinterOptions" class="table_seen" width="350" cellpadding="6" cellspacing="0" style='display:none'>
          <tr> 
            <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                <tr> 
                  <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                      <tr> 
                        <td><div align="left">Manufacturer/Brand:</div></td>
                      </tr>
                      <tr> 
                        <td><div align="left">Model:</div></td>
                      </tr>
                      <tr> 
                        <td><div align="left">Serial Number (S/N):</div></td>
                      </tr>
                    </table></td>
                  <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="PrinterManufacturer" size="20" />
                          </div></td>
                      </tr>
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="PrinterModel" size="20" />
                          </div></td>
                      </tr>
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="PrinterSN" size="20" />
                          </div></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <div align="left"><br />
                <table width="100%" border="0" cellspacing="2" cellpadding="1">
                  <tr> 
                    <td><div align="left">Description of problem:</div></td>
                  </tr>
                  <tr> 
                    <td><div align="center"> 
                        <textarea rows="4" name="PrinterDesc" cols="39"></textarea>
                      </div></td>
                  </tr>
                </table>
              </div></td>
          </tr>
        </table>
        <table id="MonitorOptions" class="table_seen" width="350" cellpadding="6" cellspacing="0" style='display:none'>
          <tr> 
            <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                <tr> 
                  <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                      <tr> 
                        <td><div align="left">Manufacturer/Brand:</div></td>
                      </tr>
                      <tr> 
                        <td><div align="left">Serial Number (S/N):</div></td>
                      </tr>
                    </table></td>
                  <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="MonitorManufacturer" size="20" />
                          </div></td>
                      </tr>
                      <tr> 
                        <td><div align="center"> 
                            <input type="text" name="MonitorSN" size="20" />
                          </div></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <div align="left"><br />
                <table width="100%" border="0" cellspacing="2" cellpadding="1">
                  <tr> 
                    <td><div align="left">Description of problem:</div></td>
                  </tr>
                  <tr> 
                    <td><div align="center"> 
                        <textarea rows="4" name="MonitorDesc" cols="39"></textarea>
                      </div></td>
                  </tr>
                </table>
              </div></td>
          </tr>
        </table>
        <table id="AVPeriphsOptions" class="table_seen" width="350" cellspacing="0" cellpadding="6" style='display:none'>
          <tr>
            <td>
    <table width="100%" border="0" cellspacing="0" cellpadding="1">
                <tr>
                  <td><table class="td_seen" width="100%" border="0" cellpadding="1" cellspacing="0" >
                      <tr>
                        <td class="td_seen" width="50%"><div align="center">
                            <input type="radio" name="AVPeriph" onclick="doShow('AV'); doHide('Periphs');" value="AV" />A/V</div></td>
                        <td class="td_seen" width="50%"><div align="center">
                            <input type="radio" name="AVPeriph" onclick="doShow('Periphs'); doHide('AV');" value="Periphs" />Peripherals</div></td>
                      </tr>
                    </table></td>
                </tr>
                <tr>
                  <td><table id="AV" class="table_seen" width="100%" cellspacing="0" cellpadding="6" style='display:none'>
                      <tr>
                        <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                            <tr>
                              <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                                  <tr>
                                    <td><div align="left">Type:</div></td>
                                  </tr>
                                  <tr>
                                    <td><div align="left">Manufacturer/Brand:</div></td>
                                  </tr>
                                  <tr>
                                    <td><div align="left">Serial Number (S/N):</div></td>
                                  </tr>
                                </table></td>
                              <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                                  <tr> 
                                    <td><div align="center"> 
                                        <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 align="center"> 
                                        <input type="text" name="AVManufacturer" size="20" />
                                      </div></td>
                                  </tr>
                                  <tr> 
                                    <td><div align="center"> 
                                        <input type="text" name="AVSN" size="20" />
                                      </div></td>
                                  </tr>
                                </table></td>
                            </tr>
                          </table>
                          <br />
                          <table width="100%" border="0" cellspacing="2" cellpadding="1">
                            <tr> 
                              <td><div align="left">Description of problem:</div></td>
                            </tr>
                            <tr> 
                              <td><div align="center"> 
                                  <textarea rows="4" name="AVDesc" cols="35"></textarea>
                                </div></td>
                            </tr>
                          </table></td>
                      </tr>
                    </table>
                    <table id="Periphs" class="table_seen" width="100%" border="0" cellspacing="2" cellpadding="1" style='display:none'>
                      <tr>
                        <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                            <tr> 
                              <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                                  <tr>
                                    <td><div align="left">Type:</div></td>
                                  </tr>
                                  <tr>
                                    <td><div align="left">Manufacturer/Brand:</div></td>
                                  </tr>
                                  <tr>
                                    <td><div align="left">Model:</div></td>
                                  </tr>
                                  <tr>
                                    <td><div align="left">Serial Number (S/N):</div></td>
                                  </tr>
                                </table></td>
                              <td><table width="100%" border="0" cellspacing="2" cellpadding="1">
                                  <tr> 
                                    <td><div align="center"> 
                                        <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 align="center"> 
                                        <input type="text" name="PeriphManufacturer" size="20" />
                                      </div></td>
                                  </tr>
                                  <tr> 
                                    <td><div align="center"> 
                                        <input type="text" name="PeriphModel" size="20" />
                                      </div></td>
                                  </tr>
                                  <tr> 
                                    <td><div align="center"> 
                                        <input type="text" name="PeriphSN" size="20" />
                                      </div></td>
                                  </tr>
                                </table></td>
                            </tr>
                          </table>
                          <br />
                          <table width="100%" border="0" cellspacing="2" cellpadding="1">
                            <tr> 
                              <td><div align="left">Description of problem:</div></td>
                            </tr>
                            <tr> 
                              <td><div align="center"> 
                                  <textarea rows="4" name="PeriphDesc" cols="35"></textarea>
                                </div></td>
                            </tr>
                          </table></td>
                      </tr>
                    </table></td>
                </tr>
              </table></td>
          </tr>
        </table>  <br />
        <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>
    I would think "align" and "width" are allowed in XHTML...

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    Belfast, Ireland
    Posts
    155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can define the width and text alignment in CSS. Here is an example:

    .td_seen {
    border: 1px solid black;
    width: 300px;
    text-align: center;
    }

    Obviously change the width to an appropriate number.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    I'm trying to align tables, not text, or is the code for CSS the same?

    Can "align" and "width" be used in XHTML?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    'align' and 'width' can be used in XHTML 1.0 Transitional, but they are deprecated in XHTML 1.0 Strict and XHTML 1.1.

    If you want to centre something in a more modern way, use CSS. For instance, to centre an entire table:
    HTML Code:
    <table id="my-table" summary="...">
    ...
    </table>
    Code:
    #my-table {
      width:40em;
      margin:0 auto;
    }
    Birnam wood is come to Dunsinane

  5. #5
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    I still don't see how this is supposed to work

    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>none</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type='text/css'>
    .td_seen {
    	border: 1px solid black;
    }
    #info {
    	width: 520px;
    	margin-left: auto; 
    	margin-right: auto;
    }
    </style>
    </head>
    
    
    <body>
    <table id="info" class="td_seen" cellspacing="0" cellpadding="1">
      <tr>
        <td class="td_seen">blah blah blah1</td>
      </tr>
      <tr>
        <td class="td_seen">blah blah blah2</td>
      </tr>
    </table>
    </body>
    </html>
    When I change the CSS style of #info to this:

    Code:
    #info {
    	width: 520px;
    	margin-left: auto; 
    	margin-right: auto;
    	text-align: center;
    }
    All that does is center the text in the cells.

    I'm trying to center the table itself, not the inline elements.



    ----------
    [edit]:
    Would this be cross-browser compatable?
    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>none</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type='text/css'>
    .td_seen {
    	border: 1px solid black;
    }
    #info {
    	width: 520px;
    	margin-left: auto; 
    	margin-right: auto;
    	text-align: left;
    }
    #center_block{
    	text-align: center;
    }
    </style>
    </head>
    
    
    <body>
    <div id="center_block">
    <table id="info" class="td_seen" cellspacing="0" cellpadding="1">
      <tr>
        <td class="td_seen">blah blah blah1</td>
      </tr>
      <tr>
        <td class="td_seen">blah blah blah2</td>
      </tr>
    </table>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so how about actually using what he said?

    margin: 0 auto;

  7. #7
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    I did. It doesn't center anything.

  8. #8
    SitePoint Enthusiast Gridlight's Avatar
    Join Date
    Apr 2005
    Location
    Oxford, UK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try the other way:

    Code:
    #info 
    {
    	position: relative;
    	left: 50%;
    	width: 520px;
    	margin: 0 0 0 -260px;
    	text-align: center;
    }
    This is only useful if the width of the element will not change and any point, as you have to express the negative left margin as exactly half of the total width.
    Cheers,
    Gridlight

    BrowserCam for 30?! I'm in, are you?

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

    I would have tables that alter size.

    Guess I'll stick with the div tags.


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
  •