Weird problem with HTML Tables in ASP.NET 2.0

steve_barker333 · May 1, 2006

Hi guys,

I'm just in the process of converting a site I'm writing from ASP.NET
1.1 to ASP.NET 2.0. Of course, there are lots of new features that are
going to save me a lot of time, but at the moment I'm wasting a lot of
time trying to work out why a simple html table that worked fine in 1.1
doesn't work in 2.0.

Here is the html for the table as it appeared in my 1.1 page (it's very
simple):

====================

<TABLE id="tblMain" style="Z-INDEX: 101; LEFT: 0px; WIDTH: 100%;
POSITION: absolute; TOP: 0px; HEIGHT: 100%"
cellSpacing="1" cellPadding="1" width="300" border="0">
<TR height="40%">
<TD width="100%"></TD>
</TR>
<TR>
<TD width="100%">
<DIV style="DISPLAY: inline; FONT-WEIGHT: bold; VERTICAL-ALIGN:
baseline; WIDTH: 100%; COLOR: blue; FONT-STYLE: italic; HEIGHT: 100%;
TEXT-ALIGN: center">Some text</DIV>
</TD>
</TR>
<TR height="40%">
<TD width="100%"></TD>
</TR>
</TABLE>

====================

In 1.1, I had this table as part of an aspx page, and all was fine. The
text "Some text" appears right in the middle of the screen. It should
be noted that the page included the following body tag: <body
MS_POSITIONING="GridLayout">.

Now, when I put the same table into a version 2.0 page, in design view,
the text appears on the left of the screen, vertically centred. OK I
thought; let's make sure the text is horizontally centred by amending
the html thus:

====================

<TABLE id="tblMain" style="Z-INDEX: 101; LEFT: 0px; WIDTH: 100%;
POSITION: absolute; TOP: 0px; HEIGHT: 100%"
cellSpacing="1" cellPadding="1" width="300" border="0">
<TR height="40%">
<TD width="100%"></TD>
</TR>
<TR>
<TD width="100%" align="center">
<DIV style="DISPLAY: inline; FONT-WEIGHT: bold; WIDTH: 100%; COLOR:
blue; FONT-STYLE: italic; HEIGHT: 100%">Some text</DIV>
</TD>
</TR>
<TR height="40%">
<TD width="100%"></TD>
</TR>
</TABLE>

====================

Looks good in design mode.... but when I run the page, the text appears
at the top of the screen in the centre. How do I get the text to appear
slap band in the middle? Why is it doing this and what have I missed?!

Any help would be greatly appreciated. I'm still quite new to ASP.NET,
so please don't assume anything in your reply!

Thanks in advance!

Steve.

Guest · May 2, 2006

I'm not sure what your problem is, but I do know this: The design surface
for web pages is NOT wysiwyg! Don't ever change your layout so that it looks
correct in design mode. Check your page out in a browser to see if
everything is correct and ignore how it looks in VS. I'm not sure why MS
didn't get the design surface right in 2005, but maybe in 2008...

steve_barker333 · May 5, 2006

William,

Thanks for your reply! I am making a little progress with my problem
now. In my example above, I'm using depreciated attributes for table
elements, namely height and width. I've sorted this now, but the
problem still has not been completely resolved! Here's what I'm trying
to do:

I'd like to write a web page in ASP.NET that looks as follows:

Header at the top, set height of 60px.
Footer at the bottom, set height of 60px.

I want the header to be flush with the top of the browser, and the
footer to be flush with the bottom of the browser, no matter whether
the browser is maximised or minimised. Then, in the middle, the left
hand portion is for a menu bar, and the remaining portion is content.
I'm using a master page to achieve this.

It's nearly there now, although the centre part of the screen is not
taking up all of the available browser space, resulting in the footer
being left floating in the middle of the screen somewhere. Here is the
HTML for the master page:

<body>
<form id="form1" runat="server">
<div>
<table id="tblLayout" style="width: 100%; height: 100;">
<tr id="rowHeader" style="height: 60px">
<td id="cellHeader" colspan="2">

</td>
</tr>
<tr id="rowCentre" style="height:100%; width:100%">
<td id="cellMenuBar" runat="server" style="height:
100%; width: 150px">

</td>
<td id="cellContent" style="vertical-align:top;
height:100%; width:100%">

<asp:ContentPlaceHolder ID="cntClientArea"
runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr id="rowFooter" style="height: 60px">
<td id="cellFooter" colspan="2">

</td>
</tr>
</table>
</div>
</form>
</body>

If you try running it, you'll see what I mean! If you put a coloured
table as the footer user control, it doesn't anchor to the bottom of
the browser.

What am I doing wrong?!

Help gratefully received! Thanks in advance,

Steve.

Chineme Nnamdi · May 9, 2006

VS 2005 uses the XHTML 1.1 doctype by default for web pages which does not support the attribute 'height' for table elements thereby causing the browser to ingore it. You might want to try changing the doctype to HTML 4.0. That should solve your problem.

You can do this by replacing the line

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

Cheers

Chineme Nnamdi

Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
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
Help with Visual Lightbox: Scripts	2	May 3, 2023
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Having trouble centering contents of td ?	3	May 2, 2023
How to have two html audio players on one page?	0	May 3, 2022
Help with my responsive home page	2	Dec 14, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023

Weird problem with HTML Tables in ASP.NET 2.0

steve_barker333

Guest

steve_barker333

Chineme Nnamdi

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads