CSS Issue With User Control in an HTML Table

13 Dec 2005 5:45 PM

Stephen Hatfield

I have a user control that is an HTML table with two rows and three columns.
I am using a control instead of a straight APSX page as in the future I will
need to use this control within SharePoint. In VS 2005 design mode the user
control table takes the full height as expected. When I use this control in
an ASPX page, I would like it to fill the entire page but it does not. Any
suggestions!

Thanks!
Stephen

Control markup:

<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="SubscriberUserControl.ascx.cs" Inherits="SubscriberUserControl" %>
<table width="100%" cellpadding="3" border="1"
style="margin:0;padding:0;height:100%">
    <tr valign="top">
        <td>Info on process goes here</td>
        <td>
            <a href="mailto:?">Process Owner</a><br />
            <a href="mailto:?">Expert</a><br />
        </td>
        <td>Other info goes here</td>
    </tr>
    <tr style="height:40px">
        <td align="center" colspan="3">
            <asp:Button ID="subscribe" Text="Add This Process"
runat="server" />
            <asp:Button ID="cancel" Text="Cancel" runat="server" />
        </td>
    </tr>
</table>

ASPX markup:

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ProcessSubscribe.aspx.cs" Inherits="ControlsTest" %>

<%@ Register Src="SubscriberUserControl.ascx"
TagName="SubscriberUserControl" TagPrefix="uc1" %>

<!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>Subscribe To Process</title>
</head>
<body style="margin:0;padding:0">
    <form id="form1" runat="server">
    <table border="0" width="100%" style="height:100%">
        <tr>
            <td valign="top">
                <uc1:SubscriberUserControl ID="SubscriberUserControl1"
runat="server" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

14 Dec 2005 1:46 AM

agapeton

First, you should never use the style="" thing on XHTML blocks. It's a
severe design flaw in XHTML...I wish they didn't do that. It defeats
the entire purpose of the XHTML/CSS separate: low coupling.

Also, using width, border, and cellpadding on a table is rather old
school. (well using a table for layout is as well--your code would be
about 20% that side if you did it using XHTML/CSS)

Now, IE has a bug (yes, ANOTHER bug) that says: you can't specify
height like that.

So, you're stuck there... but if you want width, you can definately
wrap that guy in a div and give that div 100% width.

stuff.css
body {
margin:0;
padding:0
}

div#myContainer {
width: 100%;
}

Also, as a bonus try replacing all your tr blocks with div and your td
blocks with span. You'll get a ton more flexibility and simplicity.
None of that 1998 colspan stuff.