HTML Treatment 2003 vs 2005

rodmcleay · March 9th, 2005, 04:02 AM

I am having trouble getting the table structure i want to use to work in VS2005 beta1.
Using the following style

Code:

    <style type="text/css">
        body{color:#000; background-color: #fff;}
        table{
            border-width: 0;
        }
        html, body{
            height:100%;
            margin: 0;
            padding: 0;
        }
        .FullHeight{
            height:100%;
            margin: 0;
        }
    </style>

The following HTML code behaves differently in VS2005 as apposed to VS2003.

Code:

<table class="FullHeight" width="100%" border="1">
        <tr valign="top">
            <td height="100px">Header</td>
        </tr>       
        <tr valign="top">
            <td>Body</td>
        </tr>       
        <tr valign="top">
            <td height="50px">Footer</td>
        </tr>       
    </table>

Basically I want a straight forward three row table with one cell in each, spanning the entire page.
The header should be 100px, footer 50px and the body to use the rest.
In VS2005 the height attribute seems to share what ever is not specified.
(Mentioned 150 below is 100 of header + 50 of footer)
So the header is approx 100 + ((the page height -150) / 3)
The body is approx (the page height -150) / 3
And the footer is approx 50 + ((the page height -150) / 3)
If I specify the body as absolute px then it works for that size but will not fill the page.
If I specify 100%, the entire table fills the (100% pageheight + 150)
It ignores the remainder wildcard(*) and behaves as if nothing there.

I gues this relates somehow to w3c doc types but this is beyond me.

Any help would be much appreciated.

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Imar · March 9th, 2005, 02:38 PM

I think that in HTML attributes, you shouldn't use px. Either use a CSS style, or use this:

<td height="150">

In VS.NET 2005, documents are XHTML compliant by default, so it may be tripping over that. How does the page look in the browser?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

rodmcleay · March 9th, 2005, 08:28 PM

Thanks Imar,
I have tried with/without px , the result is the same.
I'll try CSS for the height of all rows when i get home from work tonight.
The stucture above without the px shows in the browser as a table three row one cell/row table as prescribed.
But the cells are not defined by their height correctly.
The best way I can explain it is that it seems to treat the height attribute in the header and footer cells as a "minimum" height.
If I drag the page to be smaller all cells shrink until the header is 150, footer is 50 and the body is just big enough for the text.
As I expand the page the "Extra" above 150 px is split evenly among the three cells.
So I cant stop the header and footer expanding.

Thanks again

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

rodmcleay · March 10th, 2005, 06:36 AM

Also the table appears correctly in design view within vs.net2005, just not when the application is run

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Imar · March 10th, 2005, 05:06 PM

What browser are you testing this in? And what kind of doc type do you have?

Can you post the complete source for the page, or better yet, link to an on-line sample page?

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

rodmcleay · March 11th, 2005, 07:04 AM

Thanks again Imar,

It is very frustrating having so much trouble with the simplest of HTML.

The page can be seen at www.logicwest.com.au/asw

The full HTML code is below and there is no codebehind code at all.
I changed the css reference for inline for clarity

Code:

<%@ Page Language="C#" CompileWith="Default.aspx.cs" ClassName="Default_aspx" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ASW Home</title>

    <style type="text/css">
    body{color:#000; background-color: #fff;}
    table{
        border-width: 0;
    }
    html, body{
        height:100%;
        margin: 0;
        padding: 0;
    }
    .FullHeight{
        height:100%;
        margin: 0;
    }    
    </style>    
</head>
<body>
    <form id="form1" runat="server">
            <table class="FullHeight" width="100%" border="1">
                <tr height="100">
                    <td>Header</td>
                </tr>
                <tr>
                    <td>Body</td>
                </tr>
                <tr height="50">
                    <td>Footer</td>
                </tr>
            </table>
    </form>
</body>
</html>

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Imar · March 12th, 2005, 09:12 AM

You're using invalid markup for a strict XHTML 1.1 doc type. Take a look at what the validator has to say:

http://validator.w3.org/check?uri=ht...t.com.au%2Fasw

I am not sure how to fix this though; you can add style="height:50px" to the header and footer table cells. This works well in Internet Explorer, because it seems to stretch the <body> to 100%. However, in Firefox the body ends up exactly as high as its contents.... I think you can add a min-height to the body to force at least a default height.

This might turn out as a difficult layout for a strict XHTML doc type that works cross browser. You'd want something like this:

#MainContent
{
height: 100% - height(Footer) - height(Header);
}

which obviously isn't supported :-(

This may come close to what you need: http://www.able2know.com/forums/about39500.html

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

rodmcleay · March 22nd, 2005, 06:08 AM

Thanks very much Imar,

Sorry I didn't get back to you sooner.
Busy Busy Busy.

I investigated your last post breifly with no real success.
Im under pressure at the moment with real dev in 2003.
I'll get back to this asap and post any success.

Thanks again

======================================
They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================