CSS Issue With User Control in an HTML Table

Discussion in 'ASP .Net Web Controls' started by Stephen Hatfield, Dec 13, 2005.

  1. 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>
    Stephen Hatfield, Dec 13, 2005
    #1
    1. Advertising

  2. Stephen Hatfield

    Guest

    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.
    , Dec 14, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Leeor Chernov
    Replies:
    2
    Views:
    790
    Leeor Chernov
    Oct 16, 2005
  2. Mad Scientist Jr
    Replies:
    0
    Views:
    635
    Mad Scientist Jr
    Mar 22, 2006
  3. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    651
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
  4. vitay
    Replies:
    8
    Views:
    544
    Stan McCann
    Nov 9, 2006
  5. Geary
    Replies:
    2
    Views:
    720
    =?ISO-8859-1?Q?G=F6ran_Andersson?=
    Jul 12, 2007
Loading...

Share This Page