Weird problem with HTML Tables in ASP.NET 2.0

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.

May 1 '06 #1

Subscribe Post Reply

1353

William Sullivan

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

"st*************@hotmail.com" wrote:

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.

May 2 '06 #2

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">

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

May 5 '06 #3

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

May 10 '06 #4

Similar topics

Alter table weird bug?

by: Jon Combe | last post by:

I have created the following test SQL code to illustrate a real problem I have with some SQL code. CREATE TABLE JCTable ( CustomerName varchar(50) ) ALTER TABLE JCTable ADD CustomerNo int...

Microsoft SQL Server

weird problems with float and double : Why 262.4 - 313.83 = -51.4299927 ???

by: Matthieu Tudury | last post by:

Hi, i got a weird problem with decimal numbers, Here is a test sample : float a, b, c; double da, db, dc; da = 313.83; db = 262.4; dc = db -da;

.NET Framework

weird problem with filling comboboxes using DataSource/DisplayMemb

by: Kaneda | last post by:

Hello everyone! I have some weird(?) problems, and I am not quite sure if there are due to my errors or maybe a limitation in the .Net framework. I have a ComboBox I need to fill with the...

.NET Framework

weird but heavy problem with ComboBoxes and DataSource

by: Kaneda | last post by:

Hello everyone! I have some weird(?) problems, and I am not quite sure if there are due to my errors or maybe a limitation in the .Net framework. I have a ComboBox I need to fill with the...

.NET Framework

A <TEXTAREA> is a weird thing.

by: Les Paul | last post by:

I'm trying to design an HTML page that can edit itself. In essence, it's just like a Wiki page, but my own very simple version. It's a page full of plain old HTML content, and then at the bottom,...

HTML / CSS

Weird Report Problem - Access 2003

by: manning_news | last post by:

I've got a report that's not sorting correctly. I build a SQL statement and assign it to the recordsource in the Open event, sorting the data the way the user chooses. The user can choose up to 3...

Microsoft Access / VBA

Weird Behavior on Drop Down

by: Wayne Dyer | last post by:

I can duplicate this, so I know it's not something I'm imagining and wonder if anyone else has seen it. Take a page, put a drop down control on it, hook up the onChange event handler to go get...

ASP.NET

Weird Error

by: scorpion53061 | last post by:

This exception occured while running in the development environment. The debugger didnt catch it though it appeared as a message box prompt........does anyone have insight on this? ...

Visual Basic .NET

weird tables in the database

by: sparks | last post by:

Yesterday someone reported that their database was growing and wanted to know what is going on. I looked at it and in the tables were about 20 new ones named stuff like aa ba asetc bsetc ac ...

Microsoft Access / VBA

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General