Please help on IE problem

[sheldonlg]

Here is my situation. I am coding in an AJAX framework for an intranet
application behind a vpn. Therefore, I can't give you a URL for the
actual app. I made a sample app for viewing and am looking for ideas.
The sample app is at www.sheldonlg.com/currentPeriod.htm. This sample
app does NOT exhibit the problem. I put it there so that I can talk to
the you about the problem.

In the actual app, initially a bunch of empty divs are written and the
attribute display:none is set for all of them. When the user selects a
fiscal period, and other options, and hits the "go" button, a large set
of data are written inside one of the hidden divs and its attribute is
set to display: inline. I have copied the html code for one of those
complete sets and pasted it into the sample app. (1-Nov-2006). At the
beginning of the first data line there is a "+". Hitting this "+"
causes it to change to a "-" and a subtable appears. That, too, has a
"+". Inside that one is another table with another "+" and, finally,
inside that one is another table that does not expand. All of this
works in the sample app.

In the actual app, this works for Firefox. In IE6, coded as it is in
the sample app, the first "+" expands, but the second "+" is ignored.
If, however, I remove the class="centerTable" surrounding <div>, then it
works in IE6 as well, but the entire table display is left adjusted
rather than center adjusted. If I remove that surrounding div, and put
the class="centerTable" into the actual div that surrounds the date (the
one that has id="div_01-Nov-2006") then I get the same behavior as with
a surrounding <div>. When I include the class attribute, it centers the
block of data.

So, right now I am left with either having it work and not being able to
center the block or centering the block and not having it work.

As I said, the sample app works and it was scarfed directly from the
html display tab in Firebug for the actual app.

Any ideas would be greatly appreciated.

[SAM]

sheldonlg a écrit :

Here is my situation. I am coding in an AJAX framework for an intranet
application behind a vpn. Therefore, I can't give you a URL for the
actual app. I made a sample app for viewing and am looking for ideas.
The sample app is at www.sheldonlg.com/currentPeriod.htm. This sample
app does NOT exhibit the problem. I put it there so that I can talk to
the you about the problem.

Your class is placed in the wrong tag
you must use it in the TDs containing a table

the div with trouble is of no use

Your function is not correct

Use that one :

<script type="text/javascript">
function toggleSet(obj, elementId)
{
var block = document.getElementById(elementId);
if (block.style.display == '')
{
block.style.display = "none";
obj.src = 'plus.gif';

}
else
{
block.style.display = "";
obj.src = 'minus.gif';
}
}
</script>

File working too with IE :
<http://cjoint.com/data/fotFf654dr_table_plus.htm>
(but doesn't work here without its images)

--
sm

[sheldonlg]

SAM wrote:

sheldonlg a écrit :

>Here is my situation. I am coding in an AJAX framework for an
intranet application behind a vpn. Therefore, I can't give you a URL
for the actual app. I made a sample app for viewing and am looking
for ideas. The sample app is at www.sheldonlg.com/currentPeriod.htm.
This sample app does NOT exhibit the problem. I put it there so that
I can talk to the you about the problem.

Your class is placed in the wrong tag
you must use it in the TDs containing a table

I got this class from the URL
http://www.web-wise-wizard.com/css-s...fieldsets.html

In there is says:
then wrap your table in a DIV in the following manner ...

<div class="centerTable">
<table>
</table>
</div>

--- I just followed those directions. How am I to put that in a td when
the table has not yet been defined? Are you suggesting creating a dummy
table just so that I can get to set it in the td? In that case I
wouldn't even need the class. I could just use align="center" since
that is valid for "strict" while align is not valid for "strict". Also,
if I were to do that how do I ensure that the div will occupy the
complete page so that the centering of the div will center on the page?
Would a width of 100% do that?

>
the div with trouble is of no use

Your function is not correct

Use that one :

<script type="text/javascript">
function toggleSet(obj, elementId)
{
var block = document.getElementById(elementId);
if (block.style.display == '')
{
block.style.display = "none";
obj.src = 'plus.gif';

}
else
{
block.style.display = "";
obj.src = 'minus.gif';
}
}
</script>

The function worked for other screens and for the first one on this
screen. I changed it, though, and that also works.

>
File working too with IE :
<http://cjoint.com/data/fotFf654dr_table_plus.htm>
(but doesn't work here without its images)

Yes, I know. I can't reproduce it outside of the AJAX framework.

[sheldonlg]

sheldonlg wrote:

Putting in a dummy table around the code and using the class or an
align="center" did nothing.

[sheldonlg]

sheldonlg wrote:

sheldonlg wrote:

Putting in a dummy table around the code and using the class or an
align="center" did nothing.

I tried separating the pieces. I put the style="text-align: center" on
the div and style="margin-left:auto; margin-right:auto;" on the table.
That centered it, but it only expanded the first level. When I removed
the style="margin-left:auto; margin-right:auto;" then it expanded all
three levels but didn't center (all in the actual application).

[SAM]

sheldonlg a écrit :

SAM wrote:

>>
Your class is placed in the wrong tag
you must use it in the TDs containing a table

I got this class from the URL
http://www.web-wise-wizard.com/css-s...fieldsets.html
In there is says:
then wrap your table in a DIV in the following manner ...

Yes that right
But I think you did :

<div class="centerTable">
<div>
<table>

(and that also could work)
^^^^^

--- I just followed those directions. How am I to put that in a td when
the table has not yet been defined?

Do not understand what you say :
I see a table in a td at least 3 times.

Anyway, what importante if there is not yet a table in this TD which
will receive one table itself too ?

if I were to do that how do I ensure that the div will occupy the
complete page so that the centering of the div will center on the page?

I thought your problem was to center sub-tables in their containers ?
(the TD of mother table)

of which div are you telling ?

I see :

<div>
<div>
<div>
<div>
<table>

>Your function is not correct

because a table is not a block (display='block')

The function worked for other screens and for the first one on this
screen.

??? don't know what you call "screen"
but ... no, your function didn't work fine.

><http://cjoint.com/data/fotFf654dr_table_plus.htm>
(but doesn't work here without its images)

Yes, I know. I can't reproduce it outside of the AJAX framework.

I'd show you the html code with centered tables, to you to put this file
in correct environment to see the [+] and [-] and how it works.
--
sm

[SAM]

sheldonlg a écrit :

sheldonlg wrote:

Putting in a dummy table around the code and using the class or an
align="center" did nothing.

have a look to the file I'd upload on cjoint.

to see the TDs with class that do what you want.
(tested Fx on Mac and IE6 on Win XP)

--
sm

[sheldonlg]

SAM wrote:

sheldonlg a écrit :

>SAM wrote:

>>>
Your class is placed in the wrong tag
you must use it in the TDs containing a table

I got this class from the URL
http://www.web-wise-wizard.com/css-s...fieldsets.html
In there is says:
then wrap your table in a DIV in the following manner ...

Yes that right
But I think you did :

<div class="centerTable">
<div>
<table>

(and that also could work)
^^^^^

>--- I just followed those directions. How am I to put that in a td
when the table has not yet been defined?

Do not understand what you say :
I see a table in a td at least 3 times.

Anyway, what importante if there is not yet a table in this TD which
will receive one table itself too ?

>if I were to do that how do I ensure that the div will occupy the
complete page so that the centering of the div will center on the page?

I thought your problem was to center sub-tables in their containers ?
(the TD of mother table)

of which div are you telling ?

I see :

<div>
<div>
<div>
<div>
<table>

>>Your function is not correct

because a table is not a block (display='block')

>The function worked for other screens and for the first one on this
screen.

??? don't know what you call "screen"
but ... no, your function didn't work fine.

>><http://cjoint.com/data/fotFf654dr_table_plus.htm>
(but doesn't work here without its images)

Yes, I know. I can't reproduce it outside of the AJAX framework.

I'd show you the html code with centered tables, to you to put this file
in correct environment to see the [+] and [-] and how it works.

I want to center the mother table. If you look at the page you will see
that there is a mother table, a child table, a grand-child table and a
great-grandchild table. That means there are +/- appearing at three
levels. For the mother table there is one <divand then there is
<table>.

I put the class in the <divand then there is a table (with
sub-tables). It centered, but I lost the ability to click on the plus
after the first level opened the first subtable. In other words, the +
on the child table does nothing. Only when I removed the class (or,
more accurately, the margin-left:auto; margin-right: auto) did the
ability to go down to grandchild and great-grandchild tabls reappear.
However, removing those attributes meant that the mother table was no
longer centered on the page.

By screens I mean pages from other menu items in the app that show other
data, also with nested tables opened and closed by the +/-. Those all
worked for many levels with this javascript (with display: block).

I changed the javascript in the actual app to what you had ('' instead
of block), and it made no difference.

[sheldonlg]

SAM wrote:

sheldonlg a écrit :

>sheldonlg wrote:

Putting in a dummy table around the code and using the class or an
align="center" did nothing.

have a look to the file I'd upload on cjoint.

to see the TDs with class that do what you want.
(tested Fx on Mac and IE6 on Win XP)

Let me restate something that perhaps you missed in my original post.
These sample apps WORK. They work in IE6 and in FF. The problem I have
is that they are not workin in IE6 for my actual app -- which is behind
a firewall and accessible only over a VPN. That actual app is built on
an AJAX framework and the code for all of this is written dynamically at
at runtime and is fed back from php via AJAX which then modifies the
innerHTML of the div (which is, itself, written at runtime from a
exercising a menu item).

Summary:
1 - Bare app comes up with essentially empty screen and a menu.
2 - Clicking on a menu sends a request via AJAX to the server. The
server produces a string of html which, among other things, has all the
hidden <div>s -- one for each time period. This string is sent back via
AJAX and is written to the screen in the content area.
3 - Selecting a time period, and other things, and clicking the action
button sends another message to the server via AJAX. The server returns
another html string which is return to the content area and written in
the particular <divfor that period of time (01-Nov-2006). The
javascript that sent off the AJAX request to the server also changes the
visibility of the <divto inline. INSIDE of that <divis the mother
table that I want centered. It has three levels of nesting in that table.

The problem I have is that if I use mechanisms to center the <div>
according to "strict", then I can only reach the first level of nesting.
Omitting that centering allows me to traverse all the way to the
innermost table.

The problem is ONLY in the actual app. The sample app works just fine.

[SAM]

sheldonlg a écrit :

sheldonlg wrote:

>sheldonlg wrote:

Putting in a dummy table around the code and using the class or an
align="center" did nothing.

I tried separating the pieces. I put the style="text-align: center" on
the div and style="margin-left:auto; margin-right:auto;" on the table.
That centered it, but it only expanded the first level. When I removed
the style="margin-left:auto; margin-right:auto;" then it expanded all
three levels but didn't center (all in the actual application).

You can only expand one level after the other.
(all levels have not to expand in one time with the code I've seen)

Well ...

..centerTable { text-align: center }

will center all what it is in the element (tag) that has this class
.... except tables with Firefox probably (didn't try)

..centerTable table { margin: auto; }

the table *in* the element that has the class would have to be centered
*in this* element (for all other browser than IE)
<div class="centerTable">
<table>

It is like :

<div style="text-align:center">
<table style="margin:auto">

and further in your code you will also need :

<td style="text-align:center">
<table style="margin:auto">

or :

<td class="centerTable">
<table>
All that tested in IE6 !
(each level being expandable and all tables being centered)

--
sm

[sheldonlg]

SAM wrote:

>
All that tested in IE6 !
(each level being expandable and all tables being centered)

Tested in the sample app that works with none of the modifications. Not
in the actual app. It won't work there.

[SAM]

sheldonlg a écrit :

>
Let me restate something that perhaps you missed in my original post.
These sample apps WORK. They work in IE6 and in FF.

I thought it was not working because sub-tables were not centered.

The problem I have
is that they are not workin in IE6 for my actual app -- which is behind
a firewall and accessible only over a VPN. That actual app is built on
an AJAX framework and the code for all of this is written dynamically at
at runtime and is fed back from php via AJAX which then modifies the
innerHTML of the div (which is, itself, written at runtime from a
exercising a menu item).

So there is something wrong with your Ajax.
What does FireBug shows to you once Ajax has downloaded all the necessary ?
The html code looks like your sample ?

Once all is on the page try to save it with Firefox
in "Complet web page" mode (or by that, my Fx is in French)
to get a new "sample" more realist.

The problem I have is that if I use mechanisms to center the <div>
according to "strict",

You mean : according to xhtml, no ?

The problem is ONLY in the actual app. The sample app works just fine.

so it's a problem of this actual app ...
Without getting final code read by the browser we can't investigate further.

--
sm

[sheldonlg]

SAM wrote:

sheldonlg a écrit :

>>
Let me restate something that perhaps you missed in my original post.
These sample apps WORK. They work in IE6 and in FF.

I thought it was not working because sub-tables were not centered.

> The problem I have is that they are not workin in IE6 for my actual
app -- which is behind a firewall and accessible only over a VPN.
That actual app is built on an AJAX framework and the code for all of
this is written dynamically at at runtime and is fed back from php via
AJAX which then modifies the innerHTML of the div (which is, itself,
written at runtime from a exercising a menu item).

So there is something wrong with your Ajax.
What does FireBug shows to you once Ajax has downloaded all the necessary ?
The html code looks like your sample ?

Once all is on the page try to save it with Firefox
in "Complet web page" mode (or by that, my Fx is in French)
to get a new "sample" more realist.

>The problem I have is that if I use mechanisms to center the <div>
according to "strict",

You mean : according to xhtml, no ?

>The problem is ONLY in the actual app. The sample app works just fine.

so it's a problem of this actual app ...
Without getting final code read by the browser we can't investigate
further.

I learned how to generate the html code from IE. It is a
javascript:document.write of the body. I did that and the html code
that was generated also showed the behavior. (Fantastic :-) ). I am in
the process of paring down that code to where it has a minimum of
extraneous features and still breaks. When I finish that, I will post
the new sample app code that breaks so that we can talk about actual
code. I'll probably start a new topic once I get that done.