Firefox changes table width...

#1 January 25th, 2007, 06:35 AM

[ 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".

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%....

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">
<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.
if (document.getElementById("divi")) {
document.getElementById("divi").style.display = "block";
}
}
</script>
</head>
<body>
<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%">
<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">
<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!".

#2 January 25th, 2007, 10:25 AM

On Jan 25, 10:25 am, "McKirahan" <N...@McKirahan.comwrote:

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.

<snip>

This is clearly for <comp.infosystems.www.authoring.stylesheets>
(follow-up set)

Overall in the Big-8 segment of the Usenet:

Cross-browser HTML development:
<comp.infosystems.www.authoring.html>

Cross-browser CSS development:
<comp.infosystems.www.authoring.stylesheets>

Cross-browser client-side scripting:
<comp.language.javascript>

P.S. Your DOCTYPE is not one from the "magic DOCTYPEs" list. As the
result it leaves IE in IE's box model while other UAs staying in W3C's
box model.

#3 January 27th, 2007, 03:05 AM

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

#4 January 27th, 2007, 03:15 AM

Gérard Talbot a écrit :

Quote:

>
<body onload="if (document.getElementById('divi'))
document.getElementById("divi").style.display = 'block';">
>

Correction:

<body onload="if (document.getElementById('divi'))
document.getElementById('divi').style.display = 'block';">

Quote:

will avoid the problem I described. Once and only once all objects

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

Firefox changes table width...

Popular Articles

What is Bytes?