Many developers are accustomed to using ASP.NET’s Panel control to show or hide parts of a page. I see this often:

<table>
 <asp:Panel runat=”server” id=”pnlWrong” visible=”false”>
  <tr>
   <td>stuff to hide</td>
  </tr>
 </asp:Panel>
 <tr>
  <td>stuff to show</td>
 </tr>
</table>

If you view source in the browser when the Panel is hidden, everything looks as you would expect…

<table>
 <tr>
  <td>stuff to show</td>
 </tr>
</table>

However, if you make the Panel visible, you will get something like this:

<table>
 <div id=”ct100_ pnlWrong”>
  <tr>
   <td>stuff to hide</td>
  </tr>
 </div>
 <tr>
  <td>stuff to show</td>
 </tr>
</table>

Notice the div tags that make this markup invalid. Adaptive browser rendering can make this worse if the Panel renders as a table.

The solution is simple. The best bet is to use PlaceHolder control instead, which is similar to Panel but without all of the display properties. You could also add the runat=”server” and id attributes to your table rows (or the table itself) and control the visibility that way.