CSS display not working (or more likely Im doing something wrong)

[bissatch]

I am trying to use DIV tags and a class to hide the DIV and the HTML
within. I will use JavScript to change it from hidden to visible but
that will come later.

Below is the code I am using

<div class="hide">
<tr>
<td nowrap>Name:</td>
<td nowrap>Monty</td>
</tr>
<tr>
<td nowrap>Name:</td>
<td nowrap>Homer</td>
</tr>
</div>

The CSS code required to hide it is:

..hide {
display: none;
}

Unfortunetely, it isnt hidden. It seems to work when I do something
like:

<div class="hide"><p>I am some hidden text</p></div>

Why wont it work for when I try to hide table rows?

Burnsy

[Barbara de Zoete]

On 10 Aug 2005 08:31:31 -0700, <bi******@yahoo.co.uk> wrote:

I am trying to use DIV tags and a class to hide the DIV and the HTML
within. I will use JavScript to change it from hidden to visible but
that will come later.

Below is the code I am using

<div class="hide">
<tr>
<td nowrap>Name:</td>
<td nowrap>Monty</td>
</tr>
<tr>
<td nowrap>Name:</td>
<td nowrap>Homer</td>
</tr>
</div>

You are aware that table rows are part of tables?

<table class="hide">
<tr>
<td></td>
<tr>
</table>

Secondly, 'nowrap' is a depricated attribute with html 4.01 (and only available
with old transitional style html):
<http://www.w3.org/TR/html401/struct/tables.html#adef-nowrap>
Use a style like table.hide td { white-space:nowrap; } or something.

Thirdly, rather than using a class name that describes the wanted visual
behaviour, one should use a class name that makes sense even if the behaviour
gets ignored or has to change in the future. So no 'hide' but rather the why it
has to be hidden.
The CSS code required to hide it is:
.hide {
display: none;
}

Unfortunetely, it isnt hidden. It seems to work when I do something
like:
<div class="hide"><p>I am some hidden text</p></div>

Why wont it work for when I try to hide table rows?

The last code example is valid html. The first (with the table rows in the div)
isn't. You don't know what happens if you write invalid code.

Create valid code and see if the behaviour still is not what you want. Then come
back here and ask again.

Also: providing an URL is almost always the best option, because rendering of
elements can be influenced by things you don't think of now, but others might
spot had they had the whole picture.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[bissatch]

> You are aware that table rows are part of tables?

Yes but I would like to hide a selection of table rows within a table.
Sorry, I really should have supplied more code

Secondly, 'nowrap' is a depricated attribute with html 4.01 (and only available
with old transitional style html):
<http://www.w3.org/TR/html401/struct/tables.html#adef-nowrap>
Use a style like table.hide td { white-space:nowrap; } or something.
Unfortunetely, I have taken a job position that was filled by another
person before me. This is the code I have to work with in the mean
time. Its present throughout the entire page.
Thirdly, rather than using a class name that describes the wanted visual
behaviour, one should use a class name that makes sense even if the behaviour
gets ignored or has to change in the future. So no 'hide' but rather the why it
has to be hidden.

I'd rather stick with the name 'hide'. I can then apply it to other
elements and know that it simply hides that element (well, usually
does, lol). Anyway, thats not really too much of an issue in this case
but I appreciate the tip.

My idea:

What the final outcome will be is where you will click on a link and it
will show / hide a number of table rows within a <div> tag. The idea in
real, will be applied to a 'whats new' page where under every month
heading is a list and links of whats new on the Intranet I work on. As
mentioned previously, I am working with someones old code and it is
quite a large page (hopefully you get the idea why I am wanting to use
some space saving techniques, see working example below) so I would
like to apply this idea without having to retype the page another way
as this would be a lot of fiddly work.

Anyway, here is a simple example of a page that kinda does what I want:

http://www.martynbissett.co.uk/test/test_showhidetr.htm

As you can see, when you click the links it will show / hide the table
row below. This is the exact concept of what I am trying to achieve but
I need it to show / hide a number of rows so my solution was to nest
them within <div> tags. See below for this code:

http://www.martynbissett.co.uk/test/...howhidediv.htm

As you will be able to see, although I have done as intended with the
<div> tags (view source), it doesnt show / hide them. I would like to
know why and how to overcome this (if possible)

Anyway, sorry about the large reply but hopefully this is enough
information. If you have made it this far in the text then your doin
well, lol.

Burnsy

[Berna Bleeker]

bi******@yahoo.co.uk schreef:

Anyway, here is a simple example of a page that kinda does what I want:

http://www.martynbissett.co.uk/test/test_showhidetr.htm

As you can see, when you click the links it will show / hide the table
row below.

Hmm, this works OK in Explorer, but in Firefox clicking on the links
keeps adding space; the space under the revealed text isn't removed when
you click the link again, and every time you show/hide the text, the
whitespace increases. But if everyone on your intranet uses only IE,
that isn't a problem, of course.

Berna

--
( )_( ) Berna M. Bleeker-Slikker
/ . . \ be***********@gmail.com
\ \@/ / http://www.volksliedjes.nl

[RobG]

Berna Bleeker wrote:

bi******@yahoo.co.uk schreef:

Anyway, here is a simple example of a page that kinda does what I want:

http://www.martynbissett.co.uk/test/test_showhidetr.htm

As you can see, when you click the links it will show / hide the table
row below.

Hmm, this works OK in Explorer, but in Firefox clicking on the links
keeps adding space; the space under the revealed text isn't removed when
you click the link again, and every time you show/hide the text, the
whitespace increases. But if everyone on your intranet uses only IE,
that isn't a problem, of course.

That is because the OP is using display: block for a table row which
should be display: table-row. IE does not understand table-row and is
happy with the non-standards compliant 'block'.

The simple, cross-browser solution is to toggle the display between
'none' and '' so that the row is returned ot its default (table-row for
CSS 2 compliant browsers and whatever for those that aren't).

Here's a modified version that will work correctly in most browsers -
standards compliant or otherwise:
<style type="css/text">

..hide { display: none; }
..show { display: ; }

</style>
<script type="text/javascript">

function showhide(el) {
var elem;
if (document.getElementById && (elem = document.getElementById(el))){
if ( elem.className ) {
elem.className = ('hide' == elem.className)? 'show':'hide';
}
}
}

</script>

--
Rob