help with visibility for projection media (OperaShow)

Hello!

I want to create a document to be used in a presentation, but will full notes
included for review later. I thought this would be as simple as setting up a
few rules in an @media projection block. My basic idea is to make an outline
from the H# tags and suppress everything else.

* { display:none; } /* Turn off everything! Then turn on only elements
we want to see. */
h1,h2 { display:block; }
h2 { page-break-before:always; }
h3,h4,h5,h6 { display:list-item; }

Unfortunately, in projection mode nothing shows up. I thought the specificity
of any explicit tag would be more than *, and even if not, they should take
precedence since they come later. I've reviewed the spec and am pretty sure I
am right. What am I doing wrong? Or is Opera 9.5 wrong?

Thanks,
Tim

On 2009-02-12, Timothy Larson <thelarsons3 (AT) cox (DOT) net> wrote:

Hello!

I want to create a document to be used in a presentation, but will full notes
included for review later. I thought this would be as simple as setting up a
few rules in an @media projection block. My basic idea is to make an outline
from the H# tags and suppress everything else.

* { display:none; } /* Turn off everything! Then turn on only elements
we want to see. */
h1,h2 { display:block; }
h2 { page-break-before:always; }
h3,h4,h5,h6 { display:list-item; }

Unfortunately, in projection mode nothing shows up. I thought the specificity
of any explicit tag would be more than *, and even if not, they should take
precedence since they come later. I've reviewed the spec and am pretty sure I
am right. What am I doing wrong? Or is Opera 9.5 wrong?

The problem is the BODY element and the HTML element, and anything else
that may be outside your headings, are still display: none.

If something's display: none it takes all its children with it,
regardless of what value they have for display. This is usually what you
want-- otherwise to make something disappear you'd have to recursively
change display on all its children.

You can use visibility here though. Set BODY or HTML to visibility:
hidden. All its descendents will inherit that in the CSS sense, but it
can be overridden.

So h1 { visibility: visible } will make the headings re-appear out of
the ether.

Ben C wrote:

On 2009-02-12, Timothy Larson <thelarsons3 (AT) cox (DOT) net> wrote:
Hello!

I want to create a document to be used in a presentation, but will full notes
included for review later. I thought this would be as simple as setting up a
few rules in an @media projection block. My basic idea is to make an outline
from the H# tags and suppress everything else.

* { display:none; } /* Turn off everything! Then turn on only elements
we want to see. */
h1,h2 { display:block; }
h2 { page-break-before:always; }
h3,h4,h5,h6 { display:list-item; }

Unfortunately, in projection mode nothing shows up. I thought the specificity
of any explicit tag would be more than *, and even if not, they should take
precedence since they come later. I've reviewed the spec and am pretty sure I
am right. What am I doing wrong? Or is Opera 9.5 wrong?

The problem is the BODY element and the HTML element, and anything else
that may be outside your headings, are still display: none.

If something's display: none it takes all its children with it,
regardless of what value they have for display. This is usually what you
want-- otherwise to make something disappear you'd have to recursively
change display on all its children.

You can use visibility here though. Set BODY or HTML to visibility:
hidden. All its descendents will inherit that in the CSS sense, but it
can be overridden.

So h1 { visibility: visible } will make the headings re-appear out of
the ether.

The problem with visibility: hidden is that the invisible elements
continue to occupy the same space they would have occupied if they were
visible.

Ben C wrote:

The problem is the BODY element and the HTML element, and anything else
that may be outside your headings, are still display: none.

Doh! You are absolutely correct. I set HTML and BODY to display:block, and
now things are beginning to work as I thought they should. Thanks!


Tim