CSS Issue With User Control in an HTML Table

Stephen Hatfield · Dec 13, 2005

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>

agapeton · Dec 14, 2005

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.

SendGrid email issue in responsive Gmail	1	Nov 4, 2021
I need help fixing my website	2	Oct 15, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?	4	Sep 29, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
Only one table shows up with the information	2	Mar 29, 2023

CSS Issue With User Control in an HTML Table

Stephen Hatfield

agapeton

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads