Weird problem with HTML Tables in ASP.NET 2.0

  • Thread starter steve_barker333
  • Start date
S

steve_barker333

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.
 
G

Guest

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...
 
S

steve_barker333

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">
<!-- User control here -->
</td>
</tr>
<tr id="rowCentre" style="height:100%; width:100%">
<td id="cellMenuBar" runat="server" style="height:
100%; width: 150px">
<!-- User control here -->
</td>
<td id="cellContent" style="vertical-align:top;
height:100%; width:100%">
<!-- This is where the child page will go -->
<asp:ContentPlaceHolder ID="cntClientArea"
runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr id="rowFooter" style="height: 60px">
<td id="cellFooter" colspan="2">
<!-- User control here -->
</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.
 
C

Chineme Nnamdi

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top