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

Author

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

Randell_D

2007-09-17, 6:17 pm

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!

Jonathan N. Little

2007-09-17, 10:17 pm

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

Joshua Cranmer

2007-09-17, 10:17 pm

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

Jonathan N. Little

2007-09-17, 10:17 pm

Joshua Cranmer wrote:
> Jonathan N. Little wrote:
>
> 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

Ben C

2007-09-18, 6:16 am

On 2007-09-18, Jonathan N. Little <lws4art@centralva.net> wrote:
> Joshua Cranmer wrote:
>
> 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.

Johannes Koch

2007-09-18, 6:16 am

Jonathan N. Little schrieb:
> Randell_D wrote:
> ^^^ ^^^^^^^^
> (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.)

Thomas 'PointedEars' Lahn

2007-09-18, 6:16 am

Jonathan N. Little wrote:
> Randell_D wrote:

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/20...e_wont_help_you
[color=darkred]

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>
[color=darkred]
> ^^^ ^^^^^^^^
> (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@news.demon.co.uk>

Jonathan N. Little

2007-09-18, 6:17 pm

Johannes Koch wrote:
> Jonathan N. Little schrieb:
> [...]
>
> 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

2007-09-18, 6:18 pm

Randell_D wrote:
>
> [snip]
>
> I have a the following table and javascript functions:
>
> <table id="box1" width="90%" border="1" cellspacing="1"
> cellpadding="1" summary="summary" class="box1">
> [snip]

You have a lot of comments already, but I have to say I am curious why
you have not put the "width=..." and "border=..." stuff into the
"box1" CSS class.

reck@lineone.net

2007-10-17, 6:16 pm

On Sep 17, 10:37 pm, Randell_D <fiprojects....@XXXXXXXXXX> 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

Harlan Messinger

2007-10-17, 6:17 pm

Joshua Cranmer wrote:
> Jonathan N. Little wrote:
>
> 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.

I'm looking at the following page in Firefox 2,

http://www.wordreference.com/ptes/dar

which I happened to have open at the moment I read this. The source code
shows an element with id="see_also". But

java script:alert(document.all.see_also);

causes nothing to happen, and the error console reads "document.all has
no properties".

Bergamot

2007-10-17, 6:17 pm

Harlan Messinger wrote:
>
> I'm looking at the following page in Firefox 2,
>
> http://www.wordreference.com/ptes/dar
> java script:alert(document.all.see_also);
> causes nothing to happen, and the error console reads "document.all has
> no properties".

Support of document.all may be a quirks vs standards mode thing. The
DOCTYPE on that page triggers standards mode.

--
Berg