Fix HTML for this aspx page

I have an aspx page with repeater. I have a table in that repeater and I bind rows to it. But it's creating an extra line between each row. I think it's because of how the repeater-table renders..it looks like each line is a table in itself...

i have the screenshot,  repeater in aspx and how a portion renders below
//repeater
 <asp:Repeater runat="server"    ID="rpQuestions">
       
        <ItemTemplate>
          <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          <tr>
          <td>
            <asp:Label runat="server" ID="lblId" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "QuestionId") %>'></asp:Label>
          </td>
           <td  align="left">
            
            <asp:Label runat="server"  ID="lblQuestion" Text='<%# DataBinder.Eval(Container.DataItem, "Question") %>'></asp:Label>
           </td>
           <td  align="right">
            <label >
           
             <asp:RadioButtonList  TabIndex="96" runat="server" ID="rbQuestions" CssClass="formFIELDsmall" TextAlign="Right" RepeatDirection="Horizontal">
               <asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
               <asp:ListItem Value="N" Text="No"></asp:ListItem>
             </asp:RadioButtonList>
            </label>
               
             <asp:RequiredFieldValidator Display="Dynamic" ControlToValidate="rbQuestions" ErrorMessage="Employment Questions" Text="*" runat="server"></asp:RequiredFieldValidator>      
            </td>
          </tr>
          </table>   
          
        </ItemTemplate>
      </asp:Repeater>

//how it renders

<table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          <tr>
          <td>
            
          </td>
           <td  align="left">
            
            <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_lblQuestion">Have you ever been terminated or asked to resign from any job?</span>
           </td>
           <td  align="right">
            <label >
           
             <table id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions" class="formFIELDsmall" border="0">
		<tr>
			<td><input id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_0" type="radio" name="ctl00$contentMAINplaceholder$rpQuestions$ctl00$rbQuestions" value="Y" tabindex="96" /><label for="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_0">Yes</label></td><td><input id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_1" type="radio" name="ctl00$contentMAINplaceholder$rpQuestions$ctl00$rbQuestions" value="N" tabindex="96" /><label for="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_1">No</label></td>
		</tr>
	</table>
            </label>
               
             <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_ctl00" style="color:Red;display:none;">*</span>      
            </td>
          </tr>
          </table>

Open in new window

Doc13.docx
LVL 7
CamilliaAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
NetExpert-WarszawaConnect With a Mentor Commented:
If a radiobutton fixes the problem, yes.
If you have any problems with firebug and are able to give a link to the page, I will look into it.

I have checked default style for tables in FF - td has a padding of 1px, a height of tr is 22px, but a height of table is 26px. If you do not style it differently, your td (and thus tr) will have a height of 26px because of the table inside.
0
 
NetExpert-WarszawaCommented:
You have got <table>...</table> _inside_ the repeater.

You should move line 2 later in your code and line 29 accordingly.
0
 
CamilliaAuthor Commented:
not sure what u mean? later in the code where to??
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
remorinaConnect With a Mentor Commented:
Also is there a reason you're using the <asp:RadioButtonList> inside a label? it renders a table inside a label element which is invalid.
0
 
NetExpert-WarszawaCommented:
You should enclose in a Repeater only what you want to be repeated. You do not want to repeat the whole table, do you?
0
 
CamilliaAuthor Commented:
>> remorina
 yes, i used to have a Radi0Button, then changed it to radiobuttonList because of validation. Having a requiredfieldvalidtor for RadioButtonList is easier than for RadioButton....

 I don't want to repeat the whole table, only rows in ONE table. Tried below and nothing changed..


     
          <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          
           <asp:Repeater runat="server"    ID="rpQuestions">
       
          <ItemTemplate>
          <tr>
          <td>
            <asp:Label runat="server" ID="lblId" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "QuestionId") %>'></asp:Label>
          </td>
           <td  align="left">
            
            <asp:Label runat="server"  ID="lblQuestion" Text='<%# DataBinder.Eval(Container.DataItem, "Question") %>'></asp:Label>
           </td>
           <td  align="right">
            <label >
           
             <asp:RadioButtonList  TabIndex="96" runat="server" ID="rbQuestions" CssClass="formFIELDsmall" TextAlign="Right" RepeatDirection="Horizontal">
               <asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
               <asp:ListItem Value="N" Text="No"></asp:ListItem>
             </asp:RadioButtonList>
            </label>
               
             <asp:RequiredFieldValidator Display="Dynamic" ControlToValidate="rbQuestions" ErrorMessage="Employment Questions" Text="*" runat="server"></asp:RequiredFieldValidator>      
            </td>
          </tr>
          <%--</table>   --%>
          
        </ItemTemplate>
      </asp:Repeater>
         
      </table>  

Open in new window

0
 
NetExpert-WarszawaCommented:
Could you show the rendered code with radio button temporarily removed?
0
 
CamilliaAuthor Commented:
seems like it is the radiobuttonList that's causing it. If I change it back to radiobutton, then how can I have validation for it?

rendered code below:
  <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          
           
          <tr>
          <td>
            
          </td>
           <td  align="left">
            
            <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_lblQuestion">Have you ever been terminated or asked to resign from any job?</span>
           </td>
           <td  align="right">
            <label >
           
             
            </label>
               
             <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_ctl00" style="color:Red;display:none;">*</span>      
            </td>
          </tr>
          
          
        
          <tr>
          <td>
            
          </td>
           <td  align="left">
            
            <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl01_lblQuestion">Have you ever been convicted of a felony?</span>
           </td>
           <td  align="right">
            <label >
           
             
            </label>
               
             <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl01_ctl00" style="color:Red;display:none;">*</span>      
            </td>
          </tr>
          
          
        
          <tr>
          <td>
            
          </td>
           <td  align="left">
            
            <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl02_lblQuestion">Are you a United States citizen or otherwise eligible to work in this country?</span>
           </td>
           <td  align="right">
            <label >
           
             
            </label>
               
             <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl02_ctl00" style="color:Red;display:none;">*</span>      
            </td>
          </tr>
          
          
        
          <tr>
          <td>
            
          </td>
           <td  align="left">
            
            <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl03_lblQuestion">Have you previously applied for employment or been employed by this company?</span>
           </td>
           <td  align="right">
            <label >
           
             
            </label>
               
             <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl03_ctl00" style="color:Red;display:none;">*</span>      
            </td>
          </tr>
          
          
        
         
      </table>   

Open in new window

0
 
CamilliaAuthor Commented:
This is what i used to have but changed it because i needed validation for the radiobuttons
  <asp:Repeater runat="server" ID="rpQuestions">
       
        <ItemTemplate>
          <table width="630" border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          <tr>
          <td>
            <asp:Label runat="server" ID="lblId" Visible="true" Text='<%# DataBinder.Eval(Container.DataItem, "QuestionId") %>'></asp:Label>
          </td>
           <td align="left">
            
            <asp:Label runat="server" ID="lblQuestion" Text='<%# DataBinder.Eval(Container.DataItem, "Question") %>'></asp:Label>
           </td>
           <td align="left">
            <label >
             <asp:RadioButton runat="server" ID="rbYes" CssClass="formFIELDsmall" TextAlign="Right" Text="Yes" GroupName="rbQuestionAnswer" />
            </label>
           
            <label >
              <asp:RadioButton runat="server" ID="rbNo" CssClass="formFIELDsmall" Text="No" TextAlign="Right" GroupName="rbQuestionAnswer" />
            </label>         
                   
            </td>
          </tr>
          </table>    
          
        </ItemTemplate>
      </asp:Repeater>

Open in new window

0
 
NetExpert-WarszawaCommented:
0
 
CamilliaAuthor Commented:
No other way to fix the radiobuttonList? I looked at your link, i have to have a server side code for validation??
0
 
NetExpert-WarszawaCommented:
What for do you put radio buttons inside <label></label>?
0
 
CamilliaAuthor Commented:
i didnt even notice the label for the radiobuttons. I just removed it, tried it and still the same..

maybe i have to radiobuttons , instead of radiobuttonlist and a custom validator...dang it...
0
 
NetExpert-WarszawaCommented:
You can go with RadioButtonList after removing labels. It is legal to have a table inside a cell.
0
 
CamilliaAuthor Commented:
i did remove the label , but still looks the same...renders like below
          
           
          <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          <tr>
          <td>
            
          </td>
           <td  align="left">
            
            <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_lblQuestion">Have you ever been terminated or asked to resign from any job?</span>
           </td>
           <td  align="right">
           
           
             <table id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions" class="formFIELDsmall" border="0">
		<tr>
			<td><input id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_0" type="radio" name="ctl00$contentMAINplaceholder$rpQuestions$ctl00$rbQuestions" value="Y" tabindex="96" /><label for="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_0">Yes</label></td><td><input id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_1" type="radio" name="ctl00$contentMAINplaceholder$rpQuestions$ctl00$rbQuestions" value="N" tabindex="96" /><label for="ctl00_contentMAINplaceholder_rpQuestions_ctl00_rbQuestions_1">No</label></td>
		</tr>
	</table>
           
               
             <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl00_ctl00" style="color:Red;display:none;">*</span>      
            </td>
          </tr>
          </table>  
          
        
          <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          <tr>
          <td>
            
          </td>
           <td  align="left">
            
            <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl01_lblQuestion">Have you ever been convicted of a felony?</span>
           </td>
           <td  align="right">
           
           
             <table id="ctl00_contentMAINplaceholder_rpQuestions_ctl01_rbQuestions" class="formFIELDsmall" border="0">
		<tr>
			<td><input id="ctl00_contentMAINplaceholder_rpQuestions_ctl01_rbQuestions_0" type="radio" name="ctl00$contentMAINplaceholder$rpQuestions$ctl01$rbQuestions" value="Y" tabindex="96" /><label for="ctl00_contentMAINplaceholder_rpQuestions_ctl01_rbQuestions_0">Yes</label></td><td><input id="ctl00_contentMAINplaceholder_rpQuestions_ctl01_rbQuestions_1" type="radio" name="ctl00$contentMAINplaceholder$rpQuestions$ctl01$rbQuestions" value="N" tabindex="96" /><label for="ctl00_contentMAINplaceholder_rpQuestions_ctl01_rbQuestions_1">No</label></td>
		</tr>
	</table>
           
               
             <span id="ctl00_contentMAINplaceholder_rpQuestions_ctl01_ctl00" style="color:Red;display:none;">*</span>      
            </td>
          </tr>
          </table>  

Open in new window

0
 
NetExpert-WarszawaCommented:
Repeater is back before <table>, isn't it?
0
 
CamilliaAuthor Commented:
it's like this :
 <asp:Repeater runat="server"    ID="rpQuestions">
           
          <ItemTemplate>
          <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          <tr>
          <td>
            <asp:Label runat="server" ID="lblId" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "QuestionId") %>'></asp:Label>
          </td>
           <td  align="left">
            
            <asp:Label runat="server"  ID="lblQuestion" Text='<%# DataBinder.Eval(Container.DataItem, "Question") %>'></asp:Label>
           </td>
           <td  align="right">
           
           
             <asp:RadioButtonList   TabIndex="96" runat="server" ID="rbQuestions" CssClass="formFIELDsmall" TextAlign="Right" RepeatDirection="Horizontal">
               <asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
               <asp:ListItem Value="N" Text="No"></asp:ListItem>
             </asp:RadioButtonList>
           
               
             <asp:RequiredFieldValidator Display="Dynamic" ControlToValidate="rbQuestions" ErrorMessage="Employment Questions" Text="*" runat="server"></asp:RequiredFieldValidator>      
            </td>
          </tr>
          </table>  
          
        </ItemTemplate>
      </asp:Repeater>
         
      <%--</table> --%>  
           

Open in new window

0
 
CamilliaAuthor Commented:
tried it this way too:
   <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">          
           <asp:Repeater runat="server"    ID="rpQuestions">
          <ItemTemplate>
          
          <tr>
          <td>
            <asp:Label runat="server" ID="lblId" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "QuestionId") %>'></asp:Label>
          </td>
           <td  align="left">
            
            <asp:Label runat="server"  ID="lblQuestion" Text='<%# DataBinder.Eval(Container.DataItem, "Question") %>'></asp:Label>
           </td>
           <td  align="right">
           
           
             <asp:RadioButtonList   TabIndex="96" runat="server" ID="rbQuestions" CssClass="formFIELDsmall" TextAlign="Right" RepeatDirection="Horizontal">
               <asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
               <asp:ListItem Value="N" Text="No"></asp:ListItem>
             </asp:RadioButtonList>
           
               
             <asp:RequiredFieldValidator Display="Dynamic" ControlToValidate="rbQuestions" ErrorMessage="Employment Questions" Text="*" runat="server"></asp:RequiredFieldValidator>      
            </td>
          </tr>
          <%--</table>  --%>
          
        </ItemTemplate>
      </asp:Repeater>
         
      </table> 

Open in new window

0
 
NetExpert-WarszawaCommented:
What about this?
          <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
          <tr>
          <td>
            <asp:Label runat="server" ID="lblId" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "QuestionId") %>'></asp:Label>
          </td>
 <asp:Repeater runat="server"    ID="rpQuestions">
          <ItemTemplate>
           <td  align="left">
            
            <asp:Label runat="server"  ID="lblQuestion" Text='<%# DataBinder.Eval(Container.DataItem, "Question") %>'></asp:Label>
           </td>
           <td  align="right">
           
           
             <asp:RadioButtonList   TabIndex="96" runat="server" ID="rbQuestions" CssClass="formFIELDsmall" TextAlign="Right" RepeatDirection="Horizontal">
               <asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
               <asp:ListItem Value="N" Text="No"></asp:ListItem>
             </asp:RadioButtonList>
           
               
             <asp:RequiredFieldValidator Display="Dynamic" ControlToValidate="rbQuestions" ErrorMessage="Employment Questions" Text="*" runat="server"></asp:RequiredFieldValidator>      
            </td>
          </tr>
        </ItemTemplate>
      </asp:Repeater>
          </table>  
      <%--</table> --%>  
           

Open in new window

0
 
CamilliaAuthor Commented:
no, that doesnt work.  The first label "questionId" is outside of the repeater and i'm getting an error for it. I put that entire questionId td tag inside the repeater but then I got an error that "tr" doesnt have a matching tag..so back to the same thing .. :(
0
 
NetExpert-WarszawaCommented:
now?
          <table width="630"  border="0" cellpadding="0" cellspacing="0" class="formTABLE">
 <asp:Repeater runat="server"    ID="rpQuestions">
          <ItemTemplate>
          <tr>
          <td>
            <asp:Label runat="server" ID="lblId" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "QuestionId") %>'></asp:Label>
          </td>
           <td  align="left">
            
            <asp:Label runat="server"  ID="lblQuestion" Text='<%# DataBinder.Eval(Container.DataItem, "Question") %>'></asp:Label>
           </td>
           <td  align="right">
           
           
             <asp:RadioButtonList   TabIndex="96" runat="server" ID="rbQuestions" CssClass="formFIELDsmall" TextAlign="Right" RepeatDirection="Horizontal">
               <asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
               <asp:ListItem Value="N" Text="No"></asp:ListItem>
             </asp:RadioButtonList>
           
               
             <asp:RequiredFieldValidator Display="Dynamic" ControlToValidate="rbQuestions" ErrorMessage="Employment Questions" Text="*" runat="server"></asp:RequiredFieldValidator>      
            </td>
          </tr>
        </ItemTemplate>
      </asp:Repeater>
          </table>  
      <%--</table> --%>  
           

Open in new window

0
 
CamilliaAuthor Commented:
dang it, same thing! not good, looking at radiobutton and validators but cant find a good example..
maybe i have to use radiobuttons, :(
0
 
CamilliaAuthor Commented:
i wonder if i can use CSS with that radiobuttonlist to remove the extra line??
0
 
CamilliaAuthor Commented:
or maybe have 2 repeaters and align the 2 repeaters together..one repeater to have the questions and the other to have the radiobuttonlist but i doubt it....
0
 
NetExpert-WarszawaCommented:
First identify where this line comes from. I cannot see anything extra in the rendered HTML. It is just:
<table>
<tr>
<td>
</td>
<td  align="left">
</td>
<td  align="right">
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>

Extra lines you see can come from margins or paddings. You will be able to change them with CSS.

0
 
CamilliaAuthor Commented:
What you posted is what the repeater table renders to...

the inside-table is the radiobuttonlist
The first "<td></td> is where the questionId is (it's invisible)
Second "<td></td> with align "left" is where the question is
Third td with "align = right" and the inside-tableis the radiobuttonlist...

Maybe the "tr" inside the radiobuttonlist (inside table) causes the extra line?
0
 
NetExpert-WarszawaCommented:
Use Firefox with Firebug add-in to inspect the page.

You will be able to see all effective styles. In a Layout tab you will see sizes of all margins, borders and paddings.
0
 
CamilliaAuthor Commented:
thanks, otherwise, i have to use radiobutton and customvalidtor, correct?
0
All Courses

From novice to tech pro — start learning today.