Firefox changes table width...

07-01-2007, 1:17 PM

I have a Web page that uses some 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!".

07-01-2007, 1:17 PM

McKirahan wrote:
<snip>
> Below is the source for a Web page that shows the problem.
> The top table is good; the bottom table shows the problem

change 100% to 10%, works in my:
Opera 9.01
IE 6
FF 1.5

<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="10%">Hello World</th>
</tr>
</table>
<hr>
Hello World
</th>
<td bgcolor="#FFFF7D" width="175"> </td>
</tr>
</table>

07-01-2007, 1:17 PM

"Mike Scirocco" <mscir@yahoo.com> wrote in message
news:LeKdnYVJ3M-jyV_YnZ2dnUVZ_oytnZ2d@pghconnect.com...
> McKirahan wrote:
> <snip>
> > Below is the source for a Web page that shows the problem.
> > The top table is good; the bottom table shows the problem
>
> change 100% to 10%, works in my:
> Opera 9.01
> IE 6
> FF 1.5

Which 100%? Why 10%?

I want the center the entire remaining width...

> <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="10%">Hello World</th>
> </tr>
> </table>
> <hr>
> Hello World
> </th>
> <td bgcolor="#FFFF7D" width="175"> </td>
> </tr>
> </table>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
width of select tag	huzefa	HTML	1	07-01-2007 12:57 PM
Is it possible to sort by width Adobe Bridge ?	Guy	Graphics in general	0	06-11-2007 11:23 PM
Delete from a table using entries in temp table	n00bie	Database	2	06-09-2007 11:25 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)