SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why this layout is breaking ?

    Why this layout is breaking ?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
    
     <BODY>
      <table style="width: 60%">
    					<tbody><tr>
    						<td align="center"><div id="SubTypeDataDiv">
    
    
    <table style="width: 100%" class="FormBorder">
    	<tbody><tr class="Caption">
    		<td align="center" style="width: 40%">Labour Sub-Type</td>
    		<td align="center" style="width: 50%">Labour Sub-Type Description</td>
    		<td align="center" style="width: 10%">Active</td>
    	</tr>
    	
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_0__labourSubTypeAutoId" value="1" name="labourSubTypeList[0].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_0__labourTypeAutoId" value="1" name="labourSubTypeList[0].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubType" value="Bhutanese National Labour-13-feb-2013" name="labourSubTypeList[0].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubTypeDesc" value="Bhutanese National Labour1" name="labourSubTypeList[0].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_0__labourTypeStatus" value="true" name="labourSubTypeList[0].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[0].labourTypeStatus" id="__checkbox_labourSubTypeList_0__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_1__labourSubTypeAutoId" value="2" name="labourSubTypeList[1].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_1__labourTypeAutoId" value="1" name="labourSubTypeList[1].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubType" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubTypeDesc" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_1__labourTypeStatus" value="true" name="labourSubTypeList[1].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[1].labourTypeStatus" id="__checkbox_labourSubTypeList_1__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_2__labourSubTypeAutoId" value="3" name="labourSubTypeList[2].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_2__labourTypeAutoId" value="1" name="labourSubTypeList[2].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_2__labourSubType" value="Built-up Trade Rates - Category1" name="labourSubTypeList[2].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_2__labourSubTypeDesc" value="Built-up Trade Rates - Category1" name="labourSubTypeList[2].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_2__labourTypeStatus" value="true" name="labourSubTypeList[2].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[2].labourTypeStatus" id="__checkbox_labourSubTypeList_2__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_3__labourSubTypeAutoId" value="4" name="labourSubTypeList[3].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_3__labourTypeAutoId" value="1" name="labourSubTypeList[3].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_3__labourSubType" value="Built-up Trade Rates - Category2" name="labourSubTypeList[3].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_3__labourSubTypeDesc" value="Built-up Trade Rates - Category2" name="labourSubTypeList[3].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_3__labourTypeStatus" value="true" name="labourSubTypeList[3].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[3].labourTypeStatus" id="__checkbox_labourSubTypeList_3__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_4__labourSubTypeAutoId" value="5" name="labourSubTypeList[4].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_4__labourTypeAutoId" value="1" name="labourSubTypeList[4].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_4__labourSubType" value="Built-up Trade Rates - Category3" name="labourSubTypeList[4].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_4__labourSubTypeDesc" value="Built-up Trade Rates - Category3" name="labourSubTypeList[4].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_4__labourTypeStatus" value="true" name="labourSubTypeList[4].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[4].labourTypeStatus" id="__checkbox_labourSubTypeList_4__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_5__labourSubTypeAutoId" value="6" name="labourSubTypeList[5].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_5__labourTypeAutoId" value="1" name="labourSubTypeList[5].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_5__labourSubType" value="Built-up Trade Rates - Category4" name="labourSubTypeList[5].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_5__labourSubTypeDesc" value="Built-up Trade Rates - Category4" name="labourSubTypeList[5].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_5__labourTypeStatus" value="true" name="labourSubTypeList[5].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[5].labourTypeStatus" id="__checkbox_labourSubTypeList_5__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_6__labourSubTypeAutoId" value="7" name="labourSubTypeList[6].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_6__labourTypeAutoId" value="1" name="labourSubTypeList[6].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_6__labourSubType" value="Built-up Trade Rates - Category5" name="labourSubTypeList[6].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_6__labourSubTypeDesc" value="Built-up Trade Rates - Category5" name="labourSubTypeList[6].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_6__labourTypeStatus" value="true" name="labourSubTypeList[6].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[6].labourTypeStatus" id="__checkbox_labourSubTypeList_6__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    			<tr>
    				<input type="hidden" id="labourSubTypeList_7__labourSubTypeAutoId" value="8" name="labourSubTypeList[7].labourSubTypeAutoId">
    				<input type="hidden" id="labourSubTypeList_7__labourTypeAutoId" value="1" name="labourSubTypeList[7].labourTypeAutoId">
    				<td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_7__labourSubType" value="Labour (Market Rate)" name="labourSubTypeList[7].labourSubType"></td>
    </tr>
    
    				<tr><td align="center"></td></tr><tr>
        <td class="tdLabel"></td>
        <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_7__labourSubTypeDesc" value="Labour (Market Rate)" name="labourSubTypeList[7].labourSubTypeDesc"></td>
    </tr>
    
    				<tr><td align="center" style="width: 10%">N 
    					</td></tr><tr>
    	<td valign="top" align="right">
        </td>
        <td valign="top" align="left">
    
    <input type="checkbox" id="labourSubTypeList_7__labourTypeStatus" value="true" name="labourSubTypeList[7].labourTypeStatus">
    <input type="hidden" value="true" name="__checkbox_labourSubTypeList[7].labourTypeStatus" id="__checkbox_labourSubTypeList_7__labourTypeStatus">  </td>
    </tr>
    
    
    				
    			
    		
    	
    	
    
    </tbody></table>
    </div></td>
    					</tr>
    				</tbody></table>
     </BODY>
    </HTML>
    Can you please tell how do I correct it ? what is the solution ?

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Explain broken. It does not look in a browser the way you expect? Or something else?

    It certainly is very ugly code. Where did it come from? Can you replace it with new code?

    You are in Quirks mode with that kind of !DOCTYPE at the top. However, with tables I thought the differences between standards and quirks were small and did not matter, but it's possible your doctype is making browsers show this table differently than you expect.

    As a test, you can try replacing it with <!doctype html> and just see if the page looks any different.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post

    As a test, you can try replacing it with <!doctype html> and just see if the page looks any different.
    it does not work.


    >>>Explain Broken

    N values should come under Active column.

    text fields are to be under Labour Sub-Type and Labour Sub-Type Description column.


    What I am missing in my HTML code.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    What I am missing in my HTML code.
    You are missing HTML. This isn't HTML, this is tag soup.

    N values should come under Active column.
    The row with N does not have the correct number of td's.

    Your first row shows three table data cells (td). This means your table consists of rows with three cells each.
    Code:
    <tr class="Caption">
      1<td align="center" style="width: 40%">Labour Sub-Type</td>
      2<td align="center" style="width: 50%">Labour Sub-Type Description</td>
      3<td align="center" style="width: 10%">Active</td>
    </tr>
    However your row with "N" consists of only one cell.

    Code:
    <tr>
      1<td align="center" style="width: 10%">N</td>
    </tr>

    If you want to use a table, you must use it correctly. If you use table tags but do not follow the rules of tables, it will not work.


    You will see this yourself if you make the table neat.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
    
     <BODY>
      <table style="width: 60%">
        <tbody>
          <tr>
            <td align="center">
              <div id="SubTypeDataDiv">
                <table style="width: 100%" class="FormBorder">
                  <tbody>
                    <tr class="Caption">
    		  <td align="center" style="width: 40%">Labour Sub-Type</td>
    		  <td align="center" style="width: 50%">Labour Sub-Type Description</td>
    		  <td align="center" style="width: 10%">Active</td>
    	        </tr>
    
    	        <tr>
    you are missing <td>s here
    		  <input type="hidden" id="labourSubTypeList_0__labourSubTypeAutoId" value="1" name="labourSubTypeList[0].labourSubTypeAutoId">
    		  <input type="hidden" id="labourSubTypeList_0__labourTypeAutoId" value="1" name="labourSubTypeList[0].labourTypeAutoId">
    		  <td align="center"></td>
                    </tr>
    
                    <tr>
    this row only has 2 td's. Where is your last one?
                      <td class="tdLabel"></td>
                      <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubType" value="Bhutanese National Labour-13-feb-2013" name="labourSubTypeList[0].labourSubType"></td>
                    </tr>
    
                    <tr>
    this row only has one td in it. Where are the other two?
                      <td align="center"></td>
                    </tr>
    
                    <tr>
    this row only has 2 td's. Where is your last one?
                      <td class="tdLabel"></td>
                      <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubTypeDesc" value="Bhutanese National Labour1" name="labourSubTypeList[0].labourSubTypeDesc"></td>
                    </tr>
    
                    <tr>
    this row only has 1 td. Where are the other two?
                      <td align="center" style="width: 10%">N</td>
                    </tr>
    
                    <tr>
    there are only 2 td's in this row. Where is the last one?
                      <td valign="top" align="right"></td>
                      <td valign="top" align="left"><input type="checkbox" id="labourSubTypeList_0__labourTypeStatus" value="true" name="labourSubTypeList[0].labourTypeStatus"><input type="hidden" value="true" name="__checkbox_labourSubTypeList[0].labourTypeStatus" id="__checkbox_labourSubTypeList_0__labourTypeStatus"></td>
                    </tr>
    
                    <tr>
    this row only has 1 td. Where are the other two?
                      <input type="hidden" id="labourSubTypeList_1__labourSubTypeAutoId" value="2" name="labourSubTypeList[1].labourSubTypeAutoId">
    		  <input type="hidden" id="labourSubTypeList_1__labourTypeAutoId" value="1" name="labourSubTypeList[1].labourTypeAutoId">
    		  <td align="center"></td>
                    </tr>
    
                    <tr>
    only 2 td's here
                      <td class="tdLabel"></td>
                      <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubType" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubType"></td>
                    </tr>
    
                    <tr>
    only one here
                      <td align="center"></td>
                    </tr>
    
                    <tr>
    care to guess what's wrong with this one?
                      <td class="tdLabel"></td>
                      <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubTypeDesc" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubTypeDesc"></td>
                    </tr>
    
                    <tr>
                      <td align="center" style="width: 10%">N</td>
                    </tr>
    
                    <tr>
    	          <td valign="top" align="right"></td>
                      <td valign="top" align="left"><input type="checkbox" id="labourSubTypeList_1__labourTypeStatus" value="true" name="labourSubTypeList[1].labourTypeStatus"><input type="hidden" value="true" name="__checkbox_labourSubTypeList[1].labourTypeStatus" id="__checkbox_labourSubTypeList_1__labourTypeStatus"></td>
                    </tr>
    etc...
                  </tbody>
                </table>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </BODY>
    </HTML>

    My advice: next time, instead of spewing a huge jumble of table mess and wondering why it doesn't work, try properly indenting the code. This makes it much more readable and you will find errors much more easily. In your code posted above, it was difficult to see that the number of td's did not match per row, but once I indented everything, it became obvious.

    Now, you can have fewer td's in a row, but then you must use the colspan attribute to set a td to take up more than the space of one normal td. For example, the rows with nothing in them:

    Code:
                    <tr>
                      <td colspan=3></td>
                    </tr>
    Since you've set at the first, top row that a row consists of 3 td's, this now is code with a single td who spans across three "normal" td's.


    As a final note, this code is bad and should never go online. The doctype is ancient, the table is nested in another table (why?), this is not tabular data, and this is not how forms should be constructed. Since there are inputs in here, this is a form. It should have form tags.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    In your code posted above, it was difficult to see that the number of td's did not match per row, but once I indented everything, it became obvious.
    how did you indented everything ? which tool you are using ?

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Here in the forums, I did it by hand.

    But, I think (not sure) that there are text editors who can indent for you-- however I believe you would have to set that up yourself.

    I know Paul O'B uses dreamweaver as his editor specifically so that if he copies someone's code from here on the forums, it gets the indentation *he* personally likes.

    Maybe someone else here knows of a program who automatically indents HTML correctly?

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how to indent in Dreamweaver ? I have access to DreamWeaver . Is there any shortcut or menu to indent HTML properly ?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by windowsxp View Post
    how to indent in Dreamweaver ? I have access to DreamWeaver . Is there any shortcut or menu to indent HTML properly ?
    In DW you can mark a block of code and press either tab to indent it, or shift and tab to remove one layer of indentation.
    It's not perfect, but you can achieve the same effect as poes did relatively quickly.

  9. #9
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    In DW you can mark a block of code and press either tab to indent it, or shift and tab to remove one layer of indentation.
    It's not perfect, but you can achieve the same effect as poes did relatively quickly.
    good .... but I'm worried as a page could consists many such blocks ...and this approach will kill time.

    Is there any other tool which is capable of indenting whole page with one click of a button ?

    Thanks for the post anyway.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Try js-beautify.

    It's a JS beautifier but works for HTML too.


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
  •