CSS2: Show and hideing - works in Firefox, but not IE

Folks,
I am cross posting this into both stylesheets and javascript groups
because its valid to both.

I have a page that works just beautifully in Firefox without any
errors yet not in IE7. Since there is no error console screen in IE I
don't know where its going wrong and my entire userbase is based
unfortunately IE based.

I have a the following table and javascript functions:

<table id="box1" width="90%" border="1" cellspacing="1"
cellpadding="1" summary="summary" class="box1">
<tr><td>here</td></tr>
<table>
<br><a href="#" onClick="show();">Show</a>
<br><a href="#" onClick="hide();">Hide</a>
<script language="JavaScript">
function hide()
{ document.all.box1.style.visibility="collapse";
return true;
}

function show()
{ document.all.box1.style.visibility="visible";
return true;
}
</script>

In firefox, no warnings - errors or anything - everything is displayed
or hidden.
In IE7 I get the message "Could not get the visibility property.
Invalid argument."

I have used a previously suggested method of style:display as follows:
function hide()
{ document.all.box1.style.display="none";
return true;
}

function show()
{ document.all.box1.style.display="table";
return true;
}

This works perfectly again in Firefox but will HIDE the table but not
re-display the table when show is called (same "Could not get the
visibility property. Invalid argument." message in IE7.

Can someoe tell me where I am going wrong? I am wondering if its my
javascript code and my usage of DOM and would appreciate any direction
you can offer....

Cheers!

Randell_D wrote:

Folks,
I am cross posting this into both stylesheets and javascript groups
because its valid to both.

I have a page that works just beautifully in Firefox without any
errors yet not in IE7. Since there is no error console screen in IE I
don't know where its going wrong and my entire userbase is based
unfortunately IE based.

I have a the following table and javascript functions:

table id="box1" width="90%" border="1" cellspacing="1"
cellpadding="1" summary="summary" class="box1"

ID box1 and CLASS box1, hmmm not that you cannot do it but not a smart
thing to do since you can confuse your ID's and CLASSes in your stylesheet.

tr><td>here</td></tr
table
br><a href="#" onClick="show();">Show</a
br><a href="#" onClick="hide();">Hide</a
script language="JavaScript"
^^^^^^^^^^^^^^^^^^^^^

language deprecated, try: type="text/javascript"

function hide()
{ document.all.box1.style.visibility="collapse";
^^^ ^^^^^^^^

(a) (b)
(a) I highly doubt that this script "works" in Firefox. the "all"
collection is MS proprietary DOM thingy. The DOM1+ method of getting an
element on the page via its ID is:

document.getElementById("box1")

(b) The CSS property "visibility" collapse can be used on tables but
what I think your want here is to toggle the "display" property between
visible and hidden


<snip more code>

This works perfectly again in Firefox but will HIDE the table but not
re-display the table when show is called (same "Could not get the
visibility property. Invalid argument." message in IE7.

Still double it, also your markup is vintage 90's so throwing IE in
quirks mode dashing an hope of consistency in cross-browser rendering.

Can someoe tell me where I am going wrong? I am wondering if its my
javascript code and my usage of DOM and would appreciate any direction
you can offer....

Crack a book on the more modern DOM scripting?

http://www.w3.org/DOM/
W3C Document Object Model

maybe some tutorials at www.htmldog.com might help.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little wrote:

(a) I highly doubt that this script "works" in Firefox. the "all"
collection is MS proprietary DOM thingy. The DOM1+ method of getting an
element on the page via its ID is:

document.getElementById("box1")

Firefox transparently puts access for document.all in so that any site
designed by people who that that IE = the Internet wouldn't horribly
break in Firefox (chances are, though, lots of other stuff will break).

if (document.all) will not execute in FF, but
document.all.box1 will at least work.
--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

Joshua Cranmer wrote:

Jonathan N. Little wrote:
(a) I highly doubt that this script "works" in Firefox. the "all"
collection is MS proprietary DOM thingy. The DOM1+ method of getting
an element on the page via its ID is:

document.getElementById("box1")

Firefox transparently puts access for document.all in so that any site
designed by people who that that IE = the Internet wouldn't horribly
break in Firefox (chances are, though, lots of other stuff will break).

if (document.all) will not execute in FF, but
document.all.box1 will at least work.

Not with my Firefox! v2.0.0.6

Error: document.all has no properties
Source File:
file:///D:/Documents%20and%20Settings/Jonathan/Desktop/New%20HTML%20Document.html
Line: 20

And never has. Nor with my SeaMonkey v1.1.4. Do you have some sort of
extension installed?


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 2007-09-18, Jonathan N. Little <lws4art (AT) centralva (DOT) net> wrote:

Joshua Cranmer wrote:
Jonathan N. Little wrote:
(a) I highly doubt that this script "works" in Firefox. the "all"
collection is MS proprietary DOM thingy. The DOM1+ method of getting
an element on the page via its ID is:

document.getElementById("box1")

Firefox transparently puts access for document.all in so that any site
designed by people who that that IE = the Internet wouldn't horribly
break in Firefox (chances are, though, lots of other stuff will break).

if (document.all) will not execute in FF, but
document.all.box1 will at least work.

Not with my Firefox! v2.0.0.6

Error: document.all has no properties
Source File:
file:///D:/Documents%20and%20Settings/Jonathan/Desktop/New%20HTML%20Document.html
Line: 20

And never has. Nor with my SeaMonkey v1.1.4. Do you have some sort of
extension installed?

It's quite important that document.all does not "work" since it's
sometimes used as a browser sniffer. The last thing a
standards-conforming browser wants is a whole load of IE style hacks
thrown at it.

Jonathan N. Little schrieb:

Randell_D wrote:
function hide()
{ document.all.box1.style.visibility="collapse";
^^^ ^^^^^^^^
(a) (b)
[...]
(b) The CSS property "visibility" collapse can be used on tables but
what I think your want here is to toggle the "display" property between
visible and hidden

Just for the records: Neither CSS 2 nor CSS 2.1 defines the values
visible and hidden for the display property. However they are defined
values for the visibility property.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jonathan N. Little wrote:

Randell_D wrote:
tr><td>here</td></tr
table

Not Valid; this should be `</table>'. Validation with
http://validator.w3.org/ would have revealed this problem
which will most certainly cause another problem with the
DOM scripting here:

http://diveintomark.org/archives/200..._wont_help_you

br><a href="#" onClick="show();">Show</a
br><a href="#" onClick="hide();">Hide</a

The `br' element should be placed at the end of the line, if that, and the
pseudo-links should be written with script, if that (as there are no links,
formatted buttons should be used instead). The if pseudo-links are used,
the `click' event must be canceled in order to prevent navigation:

<script type="text/javascript">
document.write(new Array(
'<ul class="nobullets">',
'<li><a href="#" onclick="show(); return false;">Show<\/a><\/li>',
'<li><a href="#" onclick="hide(); return false;">Hide<\/a><\/li>',
'<\/ul>'
).join("\n"));
</script>

function hide()
{ document.all.box1.style.visibility="collapse";
^^^ ^^^^^^^^
(a) (b)
(a) I highly doubt that this script "works" in Firefox. the "all"
collection is MS proprietary DOM thingy.

Not anymore. It's now Gecko-proprietary, too, and works in Quirks Mode
to a certain extent (which includes the above referencing). Yuck! :-(

[...]
(b) The CSS property "visibility" collapse can be used on tables but
what I think your want here is to toggle the "display" property between
visible and hidden

Wrong. Valid values for the CSS `display' property include `inline',
`block', aso. For hiding/showing tables, useful values are `none',
and `block' for IE, and `none' and `table' for standards-compliant
browsers.

http://www.w3.org/TR/CSS21/visuren.html#propdef-display

Only the proprietary `display' element object property in NN4 allows
`visible' and `hidden' as values.

Crack a book on the more modern DOM scripting?

Pot, kettle, black.

http://www.w3.org/DOM/
W3C Document Object Model

maybe some tutorials at www.htmldog.com might help.

If the latter is what your "information" comes from, then it would not.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7 (AT) news (DOT) demon.co.uk>

Johannes Koch wrote:

Jonathan N. Little schrieb:
Randell_D wrote:
function hide()
{ document.all.box1.style.visibility="collapse";
^^^ ^^^^^^^^
(a) (b)
[...]
(b) The CSS property "visibility" collapse can be used on tables but
what I think your want here is to toggle the "display" property
between visible and hidden

Just for the records: Neither CSS 2 nor CSS 2.1 defines the values
visible and hidden for the display property. However they are defined
values for the visibility property.

You are right I jumbled what I wanted to say was visibility:

visible|hidden would not change the layout and what the OP probably
wanted was display: table:none. But as a following post explains IE has
trouble with display: table and using display: block makes changes that
are not what one usually wants. Personally I find making the target
element position: absolute and putting it in a position: relative
containing block then adjusting its left property in and out of the view
port is more dependable...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

The Magpie wrote:

Randell_D wrote:
table id="box1" width="90%" border="1" cellspacing="1"
cellpadding="1" summary="summary" class="box1"
[snip]

[...] I am curious why you have not put the "width=..." and
"border=..." stuff into the "box1" CSS class.

Probably because the meaning of that would be different. However, I
recommend not to mix CSS and format attributes, too.


F'up2 comp.infosystems.www.authoring.stylesheets

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7 (AT) news (DOT) demon.co.uk>

On Sep 17, 10:37 pm, Randell_D <fiprojects.... (AT) gmail (DOT) com> wrote:

Folks,
I am cross posting this into both stylesheets and javascript groups
because its valid to both.

I have a page that works just beautifully in Firefox without any
errors yet not in IE7. Since there is no error console screen in IE I
don't know where its going wrong and my entire userbase is based
unfortunately IE based.

I have a the following table and javascript functions:

table id="box1" width="90%" border="1" cellspacing="1"
cellpadding="1" summary="summary" class="box1"
tr><td>here</td></tr
table
br><a href="#" onClick="show();">Show</a
br><a href="#" onClick="hide();">Hide</a
script language="JavaScript"
function hide()
{ document.all.box1.style.visibility="collapse";
return true;

}

function show()
{ document.all.box1.style.visibility="visible";
return true;}

/script

In firefox, no warnings - errors or anything - everything is displayed
or hidden.
In IE7 I get the message "Could not get the visibility property.
Invalid argument."

I have used a previously suggested method of style:display as follows:
function hide()
{ document.all.box1.style.display="none";
return true;

}

function show()
{ document.all.box1.style.display="table";
return true;

}

This works perfectly again in Firefox but will HIDE the table but not
re-display the table when show is called (same "Could not get the
visibility property. Invalid argument." message in IE7.

Can someoe tell me where I am going wrong? I am wondering if its my
javascript code and my usage of DOM and would appreciate any direction
you can offer....

Cheers!

Internet explorer doesn't support visibility= 'collapse'; you've got
to use 'hidden' or 'visible'
It isn't as tidy because the element still takes up the space on
screen.
To get what you want you might use:
style.display= 'block' and style.display= 'none' works the same way,
only problem is on firefox, a table cell with a display = block
gives some very unusual results, so you have to remember for table
elements to say something like:
display= 'table-cell' to show the element instead of block. For this
reason, I am having to cater for both ie and firefox!!
Hope this helps