followup-to set: comp.lang.javascript
McKirahan wrote :
Quote:
[ I posted this a few days ago in alt.html.css but received
no response -- it only gets one or two postings a month.
If there's a more approriate ng then please let me know. ]
>
>
I have a Web page that uses some JavaScript and CSS.
>
I have specified a three column table with a fixed-width
left and right side; the center colum expands to fill the page.
>
Within this portion of the table I have another table that
specifies "display:none" to hide it. When the page loads,
if JavaScript is enabled then it will change to "display:block".
|
Nope. Asynchronuous loading of 2 distinct, different objects.
Quote:
However, the problem under Firefox is that the width of
the inner table column is not 100% as is expected;
though, the width of the inner table is 100%....
|
You also over-constrained your tables. The 100% comes from what is the
available space from the parent element in normal flow.
Quote:
It fails under FF 1.5 and Opera 9.10;
it works under IE 5.5 and 6.0.
>
Below is the source for a Web page that shows the problem.
The top table is good; the bottom table shows the problem
The only difference is: id="divi" style="display:none";
that is, the code up which the JavaScript acts on.
>
Can anyone identify the problem/issue? Thanks in advance.
>
>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
As mentioned by VK, this doctype is clearly not the best doctype to use.
Quote:
<html>
<head>
<title>ff_error.htm</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload = function() {
// If JS is enabled then make available items that use it.
|
Misleading comment. If the window (frames, borders, toolbars, etc) has
been loaded, it does not mean that the body element and all its content
have been loaded so far.
Quote:
if (document.getElementById("divi")) {
document.getElementById("divi").style.display = "block";
}
|
This will create an unwanted effect because window and document are
asynchronuously loaded. In fact, the code of this window.onload function
will most likely never be executed by browsers.
Quote:
}
</script>
</head>
<body>
|
<body onload="if (document.getElementById('divi'))
document.getElementById("divi").style.display = 'block';">
will avoid the problem I described. Once and only once all objects
within the body are loaded, only then can you execute the code.
Quote:
<table bgcolor="#EEEEEE" border="0" width="100%">
<tr valign="top">
<td bgcolor="#FFFF7D" width="175"> </td>
<th>
Hello World
<hr>
<table bgcolor="#FFFFFF" border="1" width="100%">
|
IMO, nested tables are *_always_* wrong.
Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/Nv...CSSDesign.html Quote:
<tr>
<th bgcolor="#FF08A8" width="100%">Hello World</th>
</tr>
</table>
<hr>
Hello World
</th>
<td bgcolor="#FFFF7D" width="175"> </td>
</tr>
</table>
<br><br>
<table bgcolor="#EEEEEE" border="0" width="100%">
<tr valign="top">
<td bgcolor="#FFFF7D" width="175"> </td>
<th>
Hello World
<hr>
<table bgcolor="#FFFFFF" border="1" width="100%" id="divi"
style="display:none">
|
Poor choice of an identifier for that table: divi suggests it is a <div>
while it is a table. Often, little things like that make a code more
difficult to debug, to understand, to fix.
Quote:
<tr>
<th bgcolor="#FF08A8" width="100%">Hello World</th>
</tr>
</table>
<hr>
Hello World
</th>
<td bgcolor="#FFFF7D" width="175"> </td>
</tr>
</table>
</body>
>
>
W3C says that "This Page Is Valid HTML 4.01 Transitional!".
|
Nested tables, deprecated attributes, table-based design, absence of
separation of content from presentation, etc... is what I recommend that
you start correcting.
Why use CSS to separate content from presentation? from MaxDesign
http://www.maxdesign.com.au/presenta...ts/index07.htm
What is the separation of content and presentation? Why is it important?
http://www.maccaws.org/kit/primer/
followup-to set: comp.lang.javascript
Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages