0
   

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

 
 
Monger
 
Reply Tue 16 Nov, 2004 03:00 pm
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: 28,772 • Replies: 14
No top replies

 
Jer
 
  1  
Reply Tue 16 Nov, 2004 03:17 pm
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
 
Monger
 
  1  
Reply Tue 16 Nov, 2004 03:26 pm
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
 
Jer
 
  1  
Reply Tue 16 Nov, 2004 03:59 pm
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
 
Craven de Kere
 
  1  
Reply Tue 16 Nov, 2004 05:36 pm
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
 
Craven de Kere
 
  1  
Reply Tue 16 Nov, 2004 06:03 pm
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
 
Craven de Kere
 
  1  
Reply Tue 16 Nov, 2004 06:24 pm
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
 
Monger
 
  2  
Reply Tue 16 Nov, 2004 10:11 pm
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
 
Monger
 
  1  
Reply Thu 18 Nov, 2004 10:13 pm
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
 
Craven de Kere
 
  1  
Reply Thu 18 Nov, 2004 10:41 pm
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
 
Monger
 
  1  
Reply Thu 18 Nov, 2004 10:59 pm
Thanks!
0 Replies
 
Monger
 
  1  
Reply Fri 19 Nov, 2004 09:13 am
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
 
Monger
 
  1  
Reply Fri 19 Nov, 2004 12:06 pm
I edited the code above to better show which styles are being applied to particular html tags.
0 Replies
 
zawmn83
 
  1  
Reply Thu 27 Nov, 2008 05:44 am
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
 
itmachines
 
  1  
Reply Wed 4 Feb, 2009 08:59 am
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
 
 

Related Topics

 
  1. Forums
  2. » <table height=100%> breaks with html4 strict & loose doctype
Copyright © 2014 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.06 seconds on 07/24/2014 at 01:15:47