JS Stops working in IE6

VK wrote:

No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.

I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.

In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:

#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
..exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}

sheldonlg wrote:

VK wrote:

No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.

I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.

In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:

#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}

In fact, I was able to trim it even a little further and put the css
into the single file www.sheldonlg.com/JSstops.htm. I moved the top:
350px; into the css area as well.

So, with this straightforward-looking file can anyone see why it doesn't
expand further than one nested table? Essentially ANY change to the
file, even text, causes it to expand all the way to the third nested table.

On May 19, 5:48 pm, sheldonlg <sheldonlg> wrote:

sheldonlg wrote:
VK wrote:

No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.

I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.

In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:

#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}

In fact, I was able to trim it even a little further and put the css
into the single file www.sheldonlg.com/JSstops.htm. I moved the top:
350px; into the css area as well.

So, with this straightforward-looking file can anyone see why it doesn't
expand further than one nested table?

The last sample you posted expands just fine three levels down - both
Firefox and IE6, so this time you passed the "minimum case point" :-)

Essentially ANY change to the
file, even text, causes it to expand all the way to the third nested table.

That normally means that the source contains several errors and UA's
dirt tolerance exploits at once - so it is like a pack of springs,
touch one side and it starts the avalanche.
Maybe IE6 is sensitive to display changes inside of table cells, maybe
it chocks on position:absolute for nested tables - I don't know. I
never made layouts like that so I cannot tell at a glance. Did you try
to use the regular way with table under table under table with margin-
left changing so to keep the indentation growing?

sheldonlg <sheldonlg> wrote in news:ZI2dncLHiYZJ5azVnZ2dnUVZ_g-
dnZ2d (AT) giganews (DOT) com:

VK wrote:

No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.

I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.

In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:

#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}

This is not a javascript issue, it is a style issue.

The issue is the visibility:hidden; it dose not remove exclude_from_class,
it just hides it. It is above the other content.

Remove the visibility:hidden; give it a background-color and you will see
what is taking place. Adding back visibility:hidden just hides the issue.

Any one of the following may work.

1. For IE you may give exclude_form_class a z-index:-1;
2. Give images position:relative: z-index:100;
3. Use display:none; rather then visibility:hidden;

Some of your other examples also has a similar issue in IE7 depending on
the width of the window.

--
BootNic Monday May 19, 2008 10:29 AM
When I was young, I was put in a school for retarded kids for two
years before they realized I actually had a hearing loss...and they
called ME slow!
*Kathy Buckley*

BootNic wrote:

sheldonlg <sheldonlg> wrote in news:ZI2dncLHiYZJ5azVnZ2dnUVZ_g-
dnZ2d (AT) giganews (DOT) com:

VK wrote:

No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.
I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.

In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:

#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}

This is not a javascript issue, it is a style issue.

The issue is the visibility:hidden; it dose not remove exclude_from_class,
it just hides it. It is above the other content.

Remove the visibility:hidden; give it a background-color and you will see
what is taking place. Adding back visibility:hidden just hides the issue.

Any one of the following may work.

1. For IE you may give exclude_form_class a z-index:-1;
2. Give images position:relative: z-index:100;
3. Use display:none; rather then visibility:hidden;

Some of your other examples also has a similar issue in IE7 depending on
the width of the window.

No, z-index won't do. I want to have that block NOT be visible at all
until the user clicks a button (not shown in this sample app) to change
it style to visible. At that point it should appear at a fixed position
on the screen -- regardless of scrolling the rest of the document -- and
appear above the rest of the document. Using display: hide will cause
it to fit itself into wherever it was clicked. Also, it is not an
inline block. There are multiple places in the (real) document that
invoke it to appear. So, the proper setting is "visibility".

The only reason that the block is even here in this sample code is that
removing it causes the "+" to expand to all four levels of nesting. Of
course, other things in this sample app do that as well, such as
removing the 'caption" stuff or even changing some text.

VK wrote:

On May 19, 5:48 pm, sheldonlg <sheldonlg> wrote:
sheldonlg wrote:
VK wrote:
No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.
I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.
In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:
#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}
In fact, I was able to trim it even a little further and put the css
into the single file www.sheldonlg.com/JSstops.htm. I moved the top:
350px; into the css area as well.

So, with this straightforward-looking file can anyone see why it doesn't
expand further than one nested table?

The last sample you posted expands just fine three levels down - both
Firefox and IE6, so this time you passed the "minimum case point" :-)

Hmmm. It doesn't for me. In fact, after going to about:blank, deleting
cookies and temp files, exiting IE and coming back in it still did not
expand past the first level.

Could it simply be a browser setting?

Previously, did it stop for you at some level?

Essentially ANY change to the
file, even text, causes it to expand all the way to the third nested table.

That normally means that the source contains several errors and UA's
dirt tolerance exploits at once - so it is like a pack of springs,
touch one side and it starts the avalanche.
Maybe IE6 is sensitive to display changes inside of table cells, maybe
it chocks on position:absolute for nested tables - I don't know. I
never made layouts like that so I cannot tell at a glance. Did you try
to use the regular way with table under table under table with margin-
left changing so to keep the indentation growing?

That is not what the customer wants and it would make the page grow
excessively long. Remember that the top line is just one of many such
lines and each one expands to the next level. Same goes at the next
level and so on. We could wind up with a page that is horrendously
long. He wants an expansion of detail by drilling down one at a time.

sheldonlg wrote:

sheldonlg wrote:
VK wrote:

No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.

I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.

In this one even changing some text causes it to expand all the
way???? The css is as basic as I could pare it down do and still have
the strange behavior in IE6:

#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}

VK, could you see if JSstops8.htm works for you? Psrhaps JSstops1.htm?

On May 19, 7:06 pm, sheldonlg <sheldonlg> wrote:

VK wrote:
On May 19, 5:48 pm, sheldonlg <sheldonlg> wrote:
sheldonlg wrote:
VK wrote:
No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.
I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.
In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:
#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}
In fact, I was able to trim it even a little further and put the css
into the single file www.sheldonlg.com/JSstops.htm. I moved the top:
350px; into the css area as well.

So, with this straightforward-looking file can anyone see why it doesn't
expand further than one nested table?

The last sample you posted expands just fine three levels down - both
Firefox and IE6, so this time you passed the "minimum case point" :-)

Hmmm. It doesn't for me. In fact, after going to about:blank, deleting
cookies and temp files, exiting IE and coming back in it still did not
expand past the first level.

Could it simply be a browser setting?

Previously, did it stop for you at some level?

IE 6.0.2900.2180 / JScript 5.6.8834 / Windows XP SP2

http://www.sheldonlg.com/JSstops.htm
Expands up to "Purchase Supplier" and back w/o any problems.

http://www.sheldonlg.com/JSstops8.htm
Doesn't go further than the second level

I still think you have to redesign the thole approach - it is too much
dirt tolerance dependent. I don't mean you have to make all tables
being visible at once. Keep the top one visible but others
display:none, just set margin-left values:

[table 1]
[table 2]
[table 3]
[table 4]

sheldonlg <sheldonlg> wrote in
news:C92dnYGdeef5CKzVnZ2dnUVZ_obinZ2d (AT) giganews (DOT) com:

BootNic wrote:
sheldonlg <sheldonlg> wrote in news:ZI2dncLHiYZJ5azVnZ2dnUVZ_g-
dnZ2d (AT) giganews (DOT) com:
[snip]
#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;} * html .exclude_form_class
{position:absolute;}

This is not a javascript issue, it is a style issue.

The issue is the visibility:hidden; it dose not remove
exclude_from_class, it just hides it. It is above the other content.

Remove the visibility:hidden; give it a background-color and you will
see what is taking place. Adding back visibility:hidden just hides
the issue.

Any one of the following may work.

1. For IE you may give exclude_form_class a z-index:-1;
2. Give images position:relative: z-index:100;
3. Use display:none; rather then visibility:hidden;

Some of your other examples also has a similar issue in IE7 depending
on the width of the window.

No, z-index won't do. I want to have that block NOT be visible at all
until the user clicks a button (not shown in this sample app) to
change it style to visible. At that point it should appear at a fixed
position on the screen -- regardless of scrolling the rest of the
document -- and appear above the rest of the document. Using display:
hide will cause it to fit itself into wherever it was clicked. Also,
it is not an inline block. There are multiple places in the (real)
document that invoke it to appear. So, the proper setting is
"visibility".

visibility:hidden; the element still takes up space, holds the position,
it's just hidden. The issue is that it is on top of the image you wish to
be clicked, and you can't click through exclude_form_class to the image.

The only reason that the block is even here in this sample code is
that removing it causes the "+" to expand to all four levels of
nesting. Of course, other things in this sample app do that as well,
such as removing the 'caption" stuff or even changing some text.

So you change the content, all that does is change where you clickable
image is. The issue remains, when exclude_form_class is over a clickable
image, the image is not clickable.

For the purpose of this issue remove visibility:hidden from
exclude_form_class class, assign a background-color, now keep in mind that
visibility:hidden; does not remove the element from the flow of the
document, it still takes up space. The only thing this will do is allow you
to see the issue. The issue is the same regardless of visibility
hidden/visible.

Until you can comprehend the issue, there is no hope for a resolution.

--
BootNic Monday May 19, 2008 12:28 PM
All things come to him who waits - provided he knows what he is
waiting for.
*Woodrow T. Wilson*

VK wrote:

On May 19, 7:06 pm, sheldonlg <sheldonlg> wrote:
VK wrote:
On May 19, 5:48 pm, sheldonlg <sheldonlg> wrote:
sheldonlg wrote:
VK wrote:
No, it is not a minimum case: there is still plenty of extra stuff
floating around. For example do not use the current CSS file, just
load the page w/o styling: and the problem goes away. So either
something sneaky in your CSS rules, or some particular CSS rule acting
strange for IE6 with malformed tables. Keep cleaning up. For the
starter make a page loading an empty CSS file and then start adding
ruleset by ruleset from the current CSS checking the behavior after
each modification.
I have reduced things significantly to the point where just about any
change I make causes the behavior to disappear. It is in
www.sheldonlg.com/JSstops.htm.
In this one even changing some text causes it to expand all the way????
The css is as basic as I could pare it down do and still have the
strange behavior in IE6:
#header { padding: 2%; }
#onebar padding: 2% 50px 2% 50px; }
.exclude_form_class {visibility: hidden;}
* html .exclude_form_class {position:absolute;}
In fact, I was able to trim it even a little further and put the css
into the single file www.sheldonlg.com/JSstops.htm. I moved the top:
350px; into the css area as well.
So, with this straightforward-looking file can anyone see why it doesn't
expand further than one nested table?
The last sample you posted expands just fine three levels down - both
Firefox and IE6, so this time you passed the "minimum case point" :-)
Hmmm. It doesn't for me. In fact, after going to about:blank, deleting
cookies and temp files, exiting IE and coming back in it still did not
expand past the first level.

Could it simply be a browser setting?

Previously, did it stop for you at some level?

IE 6.0.2900.2180 / JScript 5.6.8834 / Windows XP SP2

http://www.sheldonlg.com/JSstops.htm
Expands up to "Purchase Supplier" and back w/o any problems.

http://www.sheldonlg.com/JSstops8.htm
Doesn't go further than the second level

Thanks. Then I have point to go back to. Look at this one, then. I
would try to clean a little more, but I have no way of knowing what will
break for you.

I still think you have to redesign the thole approach - it is too much
dirt tolerance dependent. I don't mean you have to make all tables

What do you mean by "dirt tolerance dependent"? This app validates
perfectly in W3C. (Remember that I am a php/application/back-end
programmer and JS and CSS are relatively new to me).

being visible at once. Keep the top one visible but others
display:none, just set margin-left values:

[table 1]
[table 2]
[table 3]
[table 4]

Table 1 may have, say, 30 elements. Table 2 may have 30 elements.
Tables 3 and 4 may each have 20 or thirty elements. In another table
display choice (by reporting unit rather than by supplier) there are six
level deep. You can see where this is going. We need to drill down on
a single line, one at a time, into the nested tables. BTW, in the
actual app I do have indenting as you suggest. However, the visibility
is all hidden until made to appear.