473,486 Members | 2,131 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Firefox changes table width...

[ 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">&nbsp;</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">&nbsp;</td>
</tr>
</table>
<br><br>
<table bgcolor="#EEEEEE" border="0" width="100%">
<tr valign="top">
<td bgcolor="#FFFF7D" width="175">&nbsp;</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">&nbsp;</td>
</tr>
</table>
</body>
W3C says that "This Page Is Valid HTML 4.01 Transitional!".

Jan 25 '07 #1
3 2906
VK
On Jan 25, 10:25 am, "McKirahan" <N...@McKirahan.comwrote:
[ 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.

Jan 25 '07 #2
followup-to set: comp.lang.javascript

McKirahan wrote :
[ 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.

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.
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.
<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.
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.
}
</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.
<table bgcolor="#EEEEEE" border="0" width="100%">
<tr valign="top">
<td bgcolor="#FFFF7D" width="175">&nbsp;</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

<tr>
<th bgcolor="#FF08A8" width="100%">Hello World</th>
</tr>
</table>
<hr>
Hello World
</th>
<td bgcolor="#FFFF7D" width="175">&nbsp;</td>
</tr>
</table>
<br><br>
<table bgcolor="#EEEEEE" border="0" width="100%">
<tr valign="top">
<td bgcolor="#FFFF7D" width="175">&nbsp;</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.
<tr>
<th bgcolor="#FF08A8" width="100%">Hello World</th>
</tr>
</table>
<hr>
Hello World
</th>
<td bgcolor="#FFFF7D" width="175">&nbsp;</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
Jan 27 '07 #3
Gérard Talbot a écrit :
>
<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';">
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
Jan 27 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1450
by: Stewart | last post by:
Originally posted in comp.lang.javascript: Newsgroups: comp.lang.javascript From: "Stewart" Date: 23 Aug 2005 02:50:04 -0700 Local: Tues, Aug 23 2005 10:50 am Subject: FireFox, RemoveChild,...
87
9493
by: expertware | last post by:
Dear friends, My name is Pamela, I know little about CSS, but I would like to ask a question I have an image on a web page within a css layer: <DIV ID=MyLayer STYLE = "position:...
14
2295
by: expertware | last post by:
Ok! to avoid confusion I will start a new argument. Thanks!! FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT ===============================================================...
3
2272
by: robert.oschler | last post by:
I have an AJAX driven page where I dynamically add rows to a known table on the page, based on the return document from the AJAX call, using DOM node methods (except for a small snippet of code,...
7
8909
by: Papelotte | last post by:
Hi all, I'm new to this forum and I am hoping that there is someone here who can help me. I have an ASP page that has javascript that works perfectly in IE, but not in Firefox. Can anybody tell...
2
17067
by: cbjewelz | last post by:
Hey all. So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical...
7
4627
by: Xah Lee | last post by:
Look at this page http://xahlee.org/emacs/wrap-url.html Look at it in Firebox, look at it in Safari, in Opera, and look at it in Microsoft Internet Explorer. The only fucked up case, is...
1
4182
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
3
2407
by: SAL | last post by:
Hello, I did google this issue and found some stuff related to BrowserCaps section of either web.config or machine.config but it didn't work. It seems that most pages in my webapp are okay but a...
0
7126
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7175
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
4865
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4559
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3070
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3070
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1378
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
598
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
262
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.