<table height=100%> breaks with html4 strict & loose doctype

Forums: Html, Css, Web Development, Doctype, Tables
Email this Topic • Print this Page

I've good an odd problem.... I'm designing a page where I want the design to fill a full screen, so I'm placing my content within a table with the attribute 'height=100%'. However, that was acheiving absolutely nothing while I was using the following document type declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I also tried using...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

...but that didn't help anything.

However, if I remove the doctype line entirely, my table then strectes to fill screen height.

That's all well & good, and perhaps the official HTML 4.01 Strict and Loose doctypes work that way by design, but due to a bug in IE 6 SP2 which I'm using (& this is probably also the case in older versions), when I remove the doctype line my CSS 'padding' styles no longer get applied (though the rest of my CSS seems to continue to work fine).

In Firefox 1.0, the same issue exists where if I declare a strict or loose doctype the table doesn't fill full height while if I don't declare it the table works right, but at least in Firefox removing the doctype declaration doesn't break my CSS.

I suppose I could work around the issue by simply using some hacked up HTML & resize some images to create the image padding I want, but what I'm more interested in is if there's any way to make a table use 100% page height while keeping my doctype declarations intact... any help in this regard would be appreciated. Thanx...

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 0 • Views: 33,038 • Replies: 14

No top replies

I was surfing through a site the other day that mentioned the 100% table height here:

http://www.beanstalk-inc.com/articles/se-friendly-design/table-structure.htm

They link to this as a sample site: http://www.far-sited.ca/

It's got a doctype line without a link to w3.org like this:

Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

And it works on both my IE6 and Firefox 1.0.

I don't know what would be making the difference, but thought you might be able to figure it out!?

0 Replies

That makes <table height=100%> work as if no doctype was declared, but it still breaks CSS padding in IE.

Oh well, I might have to suck this one up & use a less than elegant, non-CSS solution.

By the way, your link talks about designing a table layout with search engine spiders in mind.

0 Replies

RE: Search-Engine...

Yeah, I remember the content of the link, they were saying that you should have a !00% x 100% table as a way to make it look to the view like a splash page, while allowing the author to have a bunch of relevant terms on the front page, making it search engine friendly too.

I knew that stuff wasn't relevant to you - but that the 100% table height might be.

I just included to original page because that's how I found the 100% table page.

0 Replies

Monger the "height" table tag was depreciated in HTML 4.01, so using any doctype with that or beyond shouldn't let it work.

Use CSS and you should be fine.

0 Replies

Example code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style>

<!--

body {

/* I set the next line because otherwise the table won't have a full container to max out to */

height:100%;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px; 

} 

table {

/* this next line centers tables BTW, I just added it because the center attribute is also depreciated */

margin: auto;

height: 100%;

width: 100%;

border: 2px solid #000000;

}

-->

</style>

</head>

<body>

<table>

<tr>

<td>

stuff

</td>

</tr>

</table>

</body>

</html>

0 Replies

Jer wrote:

It's got a doctype line without a link to w3.org like this:

Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

And it works on both my IE6 and Firefox 1.0.

I don't know what would be making the difference, but thought you might be able to figure it out!?

Basically, what happens is they simply use an invalid doctype (which is pointless) and IE goes back into quirks mode. It's the same as having no doctype.

0 Replies

I'm sure there are valid reasons for it, but depreciating the HTML table height attribute while not doing the same for the width attribute seems a bit funny to me.

Thanks much for the info & CSS sample, Craven!

0 Replies

For the record, even using CSS to set table height to 100% while using a HTML 4.01 strict or loose doctype didn't work in Firefox 1.0! But it worked in IE & I'm happy. I'll just add a bottom border & it'll be good enough for me.

Check it out...something as basic as the following doesn't work in Firefox 1.0 or Opera 7.54 (though it works fine in IE):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head></head>

<body style="height:100%; margin:0px 0px 0px 0px;">

<table style="height:100%; width:100%; border:5px solid #000000;">

<tr><td>Lorem ipsum.</td></tr>

</table>

</body>

</html>

Is there anything wrong with that code?

0 Replies

Arg, I should have tested it. I forgot one element.

The problem is the html element. html needs to be set to 100% too, otherwise it is set to "auto" and doesn't fill the viewport.

In my example code, just add "html," before the "body" class and it will work in Firefox.

so in yoru example code this is the fix:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html style="height:100%;"> 

<head></head> 

<body style="height:100%; margin:0px 0px 0px 0px;"> 

<table style="height:100%; width:100%; border:5px solid #000000;"> 

<tr><td>Lorem ipsum.</td></tr> 

</table> 

</body> 

</html>

0 Replies

Thanks!

0 Replies

Getting rid of every last pixel of margins, cellpadding & cellspacing using CSS took a little more work... Here's what I figured out & ended up writing in my page. Every one of the CSS elements used here were necessary to get a 100% height & width table with no margins in the latest versions of IE (6 sp2), Firefox (1.0) & Opera (7.54).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<style type="text/css">

<!--

html,body,table#pagelayout {

height: 100%;

}

body {

margin: 0px; /* Used here for IE & Mozilla */

padding: 0px; /* Used here for Opera */

}

table#pagelayout {

width: 100%;

border-collapse: collapse; /* Accomplishes table cellspacing=0 for IE */

border-spacing: 0px; /* Accomplishes table cellspacing=0 for Mozilla & Opera */

}

td {

padding: 0px; /* Accomplishes table cellpadding=0 */

}

-->

</style>



</head>

<body>



<table id="pagelayout">

<tr>

<td> </td>

</tr>

</table>



</body>

</html>

0 Replies

I edited the code above to better show which styles are being applied to particular html tags.

0 Replies

I have a html file. That show correctly in mozilla 3 but not correct in IE6.
how can I solve it?
Please check the following :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html,body,form{
margin:0;
padding:0;
height:100%;
border:none
}

#fullheight{height:100%}
#mheader{height:25px}
#msitemap{height:100px}
#mfooter{height:25px}
</style>
</head>
<body>
<form id="Form1" runat="server">
<table id="fullheight" width="100%" border="1" bgcolor="blue">
<tr id="mheader" bgcolor="fuchsia">
<td>
This is header
</td>
</tr>
<tr id="msitemap" bgcolor="gray">
<td>
This is site map.
</td>
</tr>
<tr bgcolor="red">
<td>
bodybodybodybodybodybody
<br />
bodybodybodybodybodybody
</td>
</tr>
<tr id="mfooter" bgcolor="brown">
<td>
This is footer
</td>
</tr>
</table>
</form>
</body>
</html>

0 Replies

This still does not work with strict doctype! I have multiple tables in a document, all of which need to be at 100%. With transitional, it works fine, but with strict it does not - even after using each of these examples!?

0 Replies

<table height=100%> breaks with html4 strict & loose doctype

Related Topics

Quick Links

My Account

able2know