Fitting a table inside an ASP Panel

30 Mar 2006 9:11 PM

Robert W.

I'm trying to put a simple table tightly inside an ASP Panel. Here's the
HTML code:

<asp:panel id="PanelHeader" runat="server" BackColor="RoyalBlue"
Height="80px">
<TABLE style="WIDTH: 1141px; HEIGHT: 80px" height="80" cellSpacing="0"
cellPadding="0"
    width="1141" border="0">
    <TR>
      <TD>
        <asp:Image id="Image1" Height="74px" runat="server"
ImageUrl="header_image.jpg"></asp:Image></TD>
      <TD style="COLOR: white; FONT-FAMILY: Arial" vAlign="baseline"
align="right">
        <asp:Label id="Label1" runat="server">User: madams</asp:Label><BR>
        <asp:LinkButton id="LinkButton1" runat="server" ForeColor="#ffffff"
Font-Names="Arial">Logout</asp:LinkButton></TD>
    </TR>
</TABLE>
</asp:panel>

The problem is that it's putting a blank line after the table and thus the
bottom edge of the table is not flush up against the bottom of the panel.
It's almost as if there's a trailing space that I can't get rid of.

How do I fix this?

--
Robert W.
Vancouver, BC
www.mwtech.com

30 Mar 2006 9:53 PM

CaffieneRush@gmail.com

I believe it's because your image is 74px high whiles the panel and
table is 80px high.
If everything is 74px (or 80px) then it should line up correctly.

Regards.

31 Mar 2006 5:31 AM

Robert W.

I'm not so sure.   Look at this code:

<asp:Panel id="Panel1" runat="server" BackColor="#C0C0FF">
<TABLE width="100%">
    <TR>
      <TD>Sample Text
      </TD>
      <TD align="right" width="15%">
        <asp:LinkButton id="LinkButton1"
runat="server">LinkButton</asp:LinkButton></TD>
    </TR>
</TABLE>
</asp:Panel>

Exactly the same problem occurs - a blank row gets added after the table. I
really do wonder how to prevent this?

--
Robert W.
Vancouver, BC
www.mwtech.com

Show quoteHide quote

"CaffieneR***@gmail.com" wrote:

> I believe it's because your image is 74px high whiles the panel and
> table is 80px high.
> If everything is 74px (or 80px) then it should line up correctly.
>
> Regards.
>
>

31 Mar 2006 6:01 AM

CaffieneRush@gmail.com

It might look like there is a blank row when viewed in Visual Studio
during design-time. But the real test is whether the page would be
rendered properly on browsers.

So I'd say that we are only provided with an approximation during
design-time.

Your page looks fine on the browser after setting all the heights to
74px (also cleaned up some duplicate attributes but I don't think those
mattered)

<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="Default5.aspx.vb" Inherits="Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:panel id="PanelHeader" runat="server" BackColor="RoyalBlue"
Height="74px">
      <table style="WIDTH: 1141px; HEIGHT: 74px" cellspacing="0"
cellpadding="0" border="0" width="1141">
        <tr>
          <td>
            <asp:Image id="Image1" Height="74px" runat="server"
ImageUrl="header_image.jpg"></asp:Image></td>
          <td style="COLOR: white; FONT-FAMILY: Arial"
valign="baseline" align="right">
            <asp:Label id="Label1" runat="server">User:
madams</asp:Label><br />
            <asp:LinkButton id="LinkButton1" runat="server"
ForeColor="#ffffff" Font-Names="Arial">Logout</asp:LinkButton></td>
        </tr>
      </table>
    </asp:panel>
    </div>
    </form>
</body>
</html>

Regards.