table height and doctype :( [Archive]

Click to See Complete Forum and Search --> : table height and doctype :(

khaki

05-04-2003, 12:43 PM

hello again everyone :) ...

so... i'm trying to improve my code writing abilities by trying to comply by the standards...
however it's not proving to be a smooth process.

frinstance:

the page below opens as i would expect (completely filling the page top-to-bottom) when the doctype is NOT included.

however, when the doctype IS included...
it results in 3 short rows at the top of the page (and lots of white space below it).

now why in the world would THAT happen?
... and more importantly:
how do i get it to recognize the height attribute when the doctype is present? (or whats the alternatives).

if i wasn't seeing this for myself... i'd think that i was going nuts!

please help! (because it is driving me nuts!)

:confused: k

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
body {margin: 0px; overflow: hidden
</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor=red> </td>
<td bgcolor=green> </td>
<td bgcolor=blue> </td>
</tr>
<tr>
<td bgcolor=green> </td>
<td bgcolor=blue> </td>
<td bgcolor=red> </td>
</tr>
<tr>
<td bgcolor=blue> </td>
<td bgcolor=red> </td>
<td bgcolor=green> </td>
</tr>
</table>
</body>
</html>

jeffmott

05-04-2003, 01:39 PM

It's probably because there is no height attribute for the TABLE tag.<!ATTLIST TABLE -- table element --
%attrs; -- %coreattrs, %i18n, %events --
summary %Text; #IMPLIED -- purpose/structure for speech output--
width %Length; #IMPLIED -- table width --
border %Pixels; #IMPLIED -- controls frame width around table --
frame %TFrame; #IMPLIED -- which parts of frame to render --
rules %TRules; #IMPLIED -- rulings between rows and cols --
cellspacing %Length; #IMPLIED -- spacing between cells --
cellpadding %Length; #IMPLIED -- spacing within cells --
>

khaki

05-04-2003, 02:07 PM

HEY!!!

you edited-out your Netscape default statement ...
which did not apply to N7 by the way - since it displays it un-collapsed (100%) using a table-height of 100%.

so anyway...
with the doctype on the page, i cannot add HEIGHT to <table>,<tr>, or <td>.

so how do i control the height?
seems sorta stupid... doesn't it?

still confused...
:confused: k

AdamGundry

05-04-2003, 02:16 PM

I don't think you can control table height - as it is not part of the specification jeffmott pointed out. (Not when the browser is in standards mode, anyway).

You could try using divs for layout - you shouldn't really use tables for layout.

Adam

khaki

05-04-2003, 02:35 PM

You could try using divs for layout - you shouldn't really use tables for layout. yeah... i have been doing so...
but IE6 has done some strange things to some of my divs (anybody else noticing anything odd about IE6?) and I was just trying to use the table for background color only (an easy hack... or so i thought!).

still though.... i have many(!) tables that are dynamically generated from a database...
and now i cannot put a doctype on those pages or else i will lose the ability to control row heights?

that's just ridiculous!

so it's either use doctypes and lose control over table design*...
or forget about doctypes and retain control of table design*.

well that's just a stupid option, isn't it?!

(* note that i said TABLE design and not PAGE design. Tables still need to be designed y'know)

so frustrated I could SCREAM :eek:

:( k

khaki

05-04-2003, 03:18 PM

okay...
so i am now at the library (they have IE6... i don't have it at home) and here is what i am talking about with IE6, <div>s, and doctype:

the below page works on IE5.0 and IE5.5 and Netscape7.
HOWEVER... it does NOT work in EI6 (only) when the doctype is present.
(and if specifying doctypes eliminates HEIGHT attributes like this... then where is the incentive towards doing so?)

well anyway... if i did this wrong... please tell me what i am doing wrong.
I have been converting pages that were designed using table-layout and replacing them with stuff like this (although you must parden the hack of overlapping the divs in this particular example. I kept getting white-space in IE browsers only, and this seemed to solve that... at least visually).
I'm self-teaching myself CSS.. so please tell me where i am going wrong (if in fact i am... since until IE6 showed-up, i never suspected anything was wrong at all).

so does anybody else with IE6 get a collapsed set of colored divs too ('cause that what i see)?

thanks.
;) k

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#red {
position:absolute;
left:0px;
top:0px;
width:33%;
height:100%;
background-color:red;
}
#green {
position:absolute;
left:32%;
top:0px;width:36%;
height:100%;
background-color:green;
}
#blue {
position:absolute;
top:0px;
left:67%;
width:33%;
height:100%;
background-color:blue;
}
</style>
</head>
<body>
<div id="red">1</div>
<div id="green">2</div>
<div id="blue">3</div>
</body>
</html>

AdamGundry

05-04-2003, 03:31 PM

From CSS specs (referring the setting the height with a percentage):The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'.This means the blocks are collapsed because (in IE6) the <body> element is not automatically height 100%. If you set the body height to 100% explicitly IE 6 will not collapse the divs.

Specifying a doctype does not elimiate the height attribute, because the height attribute should not be there according to standards. Browsers running in quirks mode cause errors like that, and should be avoided.

Adam

khaki

05-04-2003, 03:38 PM

hmmm....

well if i wanted to be a rocket-scientist....
lol

okay...
so... set the body height to 100%

i guess that i'll drive back home and make the change and hopefully get back to the library to check it again before it closes :eek:

thanks...
(as always)
;) k

jeffmott

05-04-2003, 03:52 PM

HEY!!! you edited-out your Netscape default statement ...
which did not apply to N7 by the way - since it displays it un-collapsed (100%) using a table-height of 100%I realized that, which is why I edited it out. My bad. :o

But the height of the table should be controlled with styles. I don't think I need to say more than that since Adam has already taken care of it.

And for your other IE6 only problem... it's actually the same soution as from the other problem. Set the body height to 100% and all is well. :)

khalidali63

05-04-2003, 04:00 PM

Hello K,
Height and Width are / or should be controled using CSS width and height properties,

I have written this tiny bit of code for you,it essentially tries to mimic the effect you get without using DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
body {margin: 0px; overflow: hidden}
</style>

<script type="text/javascript">
function Process(){
var table = document.getElementById("tbl");
var tds = table.getElementsByTagName("td");
var x = table.getElementsByTagName("tr")[0].getElementsByTagName("td").length;
var y = table.getElementsByTagName("tr").length;
var winX = (document.all)?document.documentElement.offsetWidth:window.innerWidth;
var winY = (document.all)?document.documentElement.offsetHeight:window.innerHeight;
var w = new String(parseInt(winX/x)+"px");
var h = new String(parseInt(winY/y)+"px");
for(var x=0;x<tds.length;x++){
var tdee = tds[x];
tdee.style.width =w;
tdee.style.height =h;
}
}
</script>

</head>
<body onload="Process()">
<table id="tbl" style="width:100%;height:100%;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor=red> </td>
<td bgcolor=green> </td>
<td bgcolor=blue> </td>
</tr>
<tr>
<td bgcolor=green> </td>
<td bgcolor=blue> </td>
<td bgcolor=red> </td>
</tr>
<tr>
<td bgcolor=blue> </td>
<td bgcolor=red> </td>
<td bgcolor=green> </td>
</tr>
</table>
</body>
</html>

khaki

05-04-2003, 04:24 PM

oh-boy....

well one thing is for certain...
i'll never again advise anyone to stop using tables for page-layout :rolleyes:

I mean... it's hard enough just to use tables to begin with now anyway!
(so what's-up with IE6 suddenly being different than it's previous versions? did MS decide
that the default of every element - including the <body> - should be 0 or none? I mean...
it makes sense I guess... but how are we all supposed to keep-up with that kind of a change.
YIKES!!!).

needless to say... the library is closed now :( .... so i'll have to try all of these suggestions
on Monday (Khalid... thanks... looks complicated. You know i have a love/hate relationship
with javascript... right? ;) I'll try it though. A girl can never have enough weapons at her
disposal :) ).

Anyway... as long as the <div> thing works when using <body height="100%"> I'll be good
to go (and i'll save the <table> hacks for those moments when i really need them).

Sorry for all of the Sunday drama...
but thanks for all of the great help!!!!!!!!!

you guys are the best!!!
;) k

jeffmott

05-04-2003, 04:31 PM

Anyway... as long as the <div> thing works when using <body height="100%"> I'll be good
to goYou mean...<body style="height: 100%">;)

khaki

05-04-2003, 05:04 PM

oh.... yeah.... right
(gotcha... thanks Jeff :) )