Can't get Media=Print to work quite right. Help!!?

[FancyPrairie]

I have a outer DIV tag with several DIV tags within it (something like this)

<Div id=divOuter style="height:598">
<Div id=divTabControl style="display:block;height:591; top:5"></Div>
<Div id=divProject style="display:none; height:451; top:600"></Div>
<Div id=divUtilities style="display:none; height: 451; top:1200"></Div>
</DIV>

I'm simulating a tab control. So, if the user selects the first tab, the display style of divProject is set to block and its Top value is set so that it falls inside divTabControl. Likewise, when the user select the 2nd tab, the display style of divProject is set to "none" and the display size of divUtilities is set to "block" and its Top value is set so that if falls inside divTabControl. This all works fine.

My problem is, when I select Print from the File menu I want it to print as it is initially layed out, not like it's shown on the screen. That is, one DIV below the other. Like this:

<DIV id=divOuter...
<DIV id=divTabControl style="display: none"></DIV>
<DIV id=divProject style="display: block"></DIV>
<DIV id=divUtilities style=display: block"></DIV>
</DIV>

I set my style sheet like this (note that the first line works, but the others don't)

<style type="text/css" media="print">
#divTabControl{display: none}
#divProject{display: block}
#divUtilities{display: block}
</style>

What am I doing wrong?

 

[manarth]

First, check your code is valid. This is vital. The code above does not appear to validate (for example, you should put quote marks around the IDs).

Here's the W3C validator.

Second, try putting !important after the print css declarations to raise their precedence. Although it may be print media, it won't over-ride the usual cascade.

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[FancyPrairie]

The syntax is correct (generated via Front Page and I checked it). And I tried your suggestion !important but that didn't work either. Note that part of the media=print css works. That is, the DIV divTabControl style="display:none" works (it's hidden). And, if divProject is shown in the divTabControl, then it is shown in the printed version and not divUtilities. However, if divUtilities is shown on the screen it is also shown on the printed version, but not divProject.

 

[manarth]

The syntax is correct (generated via Front Page and I checked it).

It has to be said, Front Page doesn't always produce valid code!

That said, unquoted attributes are permissible in HTML 4.01 Transitional doctype (you are using a DocType, right?), but it pays dividends to check the page against the validator - if it's not valid, it can cause all sorts of bizarre behaviour.

Can you post a link to the site?

My reference to !important should be implemented thus:

<style type="text/css" media="print">
    #divTabControl{display: none !important;}
    #divProject{display: block !important;}
    #divUtilities{display: block !important;}
</style>

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[kaht]

You might wanna get your money back for the copy of FrontPage that you purchased if it's producing code like this:

         <DIV id=divTabControl style="display: none"></DIV>
         <DIV id=divProject style="display: block"></DIV>
         <DIV id=divUtilities style=display: block"></DIV>
                                    ^
                                    |
                               Missing Quote(")

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[Vragabond]

Let me just add a little bit to the beating of the code. Sorry, but it has to be pointed out.

1. Values in CSS are required to have units. How else is the code supposed to know 598 of what your div is high.
2. Boxes in html/css behave much like boxes in real life. If you can stack a 591 + 451 + 451 high boxes on top of each other in one 598 high box, you should get a job as a magician.
3. Why exactly do you need to set the top values and heights for elements that are not displayed. What is not displayed is not there. Peroid. It is not even anywhere else you might be placing it.

 

[FancyPrairie]

manarth, the !important was needed. But the reason it didn't work for me was because of the values for my z-index. Once I defined my z-index correctly, everything worked like I expected.

Since this is only my 2nd web page I've put together, I was concerned that my css media=print statement was missing something since some of it worked and some of it didn't. (It appears the @media print is the preferred method.)

The DIV statement that kaht pointed out as containing a syntax error was only there to give one an idea as to how the page was laid out, not actual code (so I made a mistake typing into Tek-Tips an example of my layout, FrontPage had nothing to do with it. So why the jab?).

Vragabond, I guess I'm a magician because everything stacks up just fine. I can move each of the individual DIV tags into one DIV tag (that serves as my TabControl) and yet, when printed, everything prints as originally laid out (one section below the other (not stacked)). (But of course I recognize that I can change the layout via the print style sheet.) Also, the default unit for CSS is auto.

 

[jstreich]

Also, the default unit for CSS is auto.

'height'
    Value:  	<length> | <percentage> | auto | inherit
    Initial:  	auto
    Applies to:  	all elements but non-replaced inline elements, table columns, and column groups
    Inherited:  	no
    Percentages:  	see prose
    Media:  	visual
    Computed value:  	the percentage or 'auto' as specified or the absolute length; 'auto' if the property does not apply

<Div id=divOuter style="height:598">
   <Div id=divTabControl style="display:block;height:591; top:5"></Div>
   <Div id=divProject style="display:none; height:451; top:600"></Div>
   <Div id=divUtilities style="display:none; height: 451; top:1200"></Div>
</DIV>

451 whats? 451%? 451 inches, 451??? You propose that the unit is auto, so 451 autos???

The initial value is auto, meaning that since it doesn't know what 451 is, it goes back to auto fit, and it makes the div's whatever size it thinks "best fits" -- and different browsers will have different ideas about what "best fits."

Frontpage isn't the best tool to learn the language, neither is DreamWeaver or any other WYSIWYG editor -- use notepad or other text editor if you really want to learn. That, I think, is the reason he made the jab. That, and the fact that you should post real live code that you are working on, and be sure to use code tags.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[traingamer]

Fancy Prairie, welcome to the HTML forum. These guys drink even more caffeine than the Access fora people.
Glad you found a workaround.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill