Display problem

Fresh brain needed please

[joolsm]

I'm re-doing a tabled-based layout in css. I still have work to do on substituting tables with css styles. #ftr contains #copyright and #footblock. When viewing on the web I want #copyright hidden, when doing print preview/print I want #footblock hidden.

With the css as below things work OK for what I want with #footblock. BUT not with #copyright - it only shows on print preview/print if I have display blank.

Obviously I'm doing something wrong, but I can't see what (and I didn't think inheritance applied here). Please can anyone help? Thanks, Jools

#ftr {
height: 10%;
margin-bottom: 2%;
width: 100%;
clear: both;
}

#copyright {
display: none;
}

#footblock {
float: right;
width: 75%;
}

In the @media print rule

div#ftr {
}

div#copyright {
}

div#footblock {
display: none;
}

<!-- start of ftr div -->
<div id="ftr">
<!-- start of copyright div--><div id="copyright"><table width="90%" border="0" cellpadding="0">
<tr>
<td height="71"><h1>blahblah</h1>&nbsp;</td>
</tr>
</table>
</div><!-- end of copyright div-->
<!-- start of footblock div -->
<div id="footblock"> <table width="90%" border="0" align="center" cellpadding="0" id="valid">
<tr>
<td height="83" align="center"><div align="center"><img src="../images/valid-html401.gif" alt="Valid HTML" width="88" height="31" align="top"></div></td>
<td class="update">blahblah</td>
<td align="right"><div align="center"><img src="../images/validcss.gif" alt="Valid CSS" width="88" height="31" align="top"></div></td>
</tr>
</table>
</div><!-- end of footblock div -->
</div><!-- end of ftr div -->

[DrDoc]

Let's bring out the thinking hat. From your post, I will assume that your main style sheet is not limited to a non-print media.

So, if your print style sheet comes first in the document, this is the order in which the rules will be loaded:

div#copyright {
}
div#footblock {
display: none;
}
#copyright {
display: none;
}
#footblock {
float: right;
width: 75%;
}

As you can see, the #footblock is successfully hidden from view, whereas the #copyright div is still going to be hidden. In fact, even if your print style sheet comes last, the result will be the same:

#copyright {
display: none;
}
#footblock {
float: right;
width: 75%;
}
div#copyright {
}
div#footblock {
display: none;
}

There's nothing in the second #copyright rule that will reset/change the display value.

I'll leave it at that for now, and see what you come up with ;)

[joolsm]

DrDoc - thanks for your input. I haven't made a separate stylesheet for printing (perhaps I should have) - it's within the main one using an @media print rule. I've already got three stylesheets for this template (main, menu and images) loading in this order, so I could have done without another.

I realise I'm about to be seriously thick with my next question (sorry) but am I correct in understanding that if the styles are in the order

div#copyright {
} These are in the @media print rule
div#footblock {
display: none;
}
#copyright {
display: none;
} These are in the ordinary page css
#footblock {
float: right;
width: 75%;
}

they will cause the page to be rendered differently to styles in the order

#copyright {
display: none;
}
#footblock {
float: right;
width: 75%;
}
div#copyright {
}
div#footblock {
display: none;
}

I had not realised (in my ignorance) that the order of styles (a: excepted) was relevant.

Am I on the right lines here or just happily going off at a tangent? ;)

Jools

[DrDoc]

To give a very simple example...

Say that I have a style sheet with that looks exactly like this:

p {
color: red;
}
p {
color: blue;
}

Will my paragraphs be red or blue? Well, of course it's blue, since it comes last, and overrides the first rule.

What if I do this instead:

p {
color: red;
}
p {
}

Well, now they will be red, since the second rule is just empty, and doesn't in any way override the first one.

More examples:

p {
color: red;
font: 1.2em NiftyFont;
}
p {
color: blue;
}

Blue :)

p {
color: red;
}
p {
font: 1.2em NiftyFont;
}

Red :)

Back to your problem... What you have to make sure is that the @media print style either overrides the main style, or is applied instead of the main style.

[joolsm]

DrDoc - thank you for explaining this so simply. I see I need to brush up on my logical thinking ;)

Do you consider it would be wise to create a separate stylesheet just for the print side of things and put this first in the list of stylesheets?

Many thanks, Jools

[DrDoc]

If your print style sheet is very different from your main style sheet, then yes, it's probably a good idea to separate them. Otherwise, nah, as long as you can keep them apart and update them easily ;)

[joolsm]

Back to your problem... What you have to make sure is that the @media print style either overrides the main style, or is applied instead of the main style.

This is driving me potty - four hours later and I still can't get it to work. I understand the "what" but not the "how".

! important doesn't work. Setting up a media.print rule and a media.screen rule doesn't seem to do the trick. Right now I can't face setting up a stylesheet for print and one for screen. I know css is a steep learning curve, but right now it's got me beat. Please will you put me out of my misery and narrow the "how" down for me. Thanks, Jools

[DrDoc]

<style type="text/css">
@media print {
#footblock {
display: none;
}
}

@media screen {
#copyright {
display: none;
}
#footblock {
float: right;
width: 75%;
}
}

/*
Rules that apply to both print and screen go here
*/
</style>

:)

[joolsm]

DrDoc - while at work today I was pondering on solving this and came to the conclusion that I must have got something wrong in my @media.screen and @media.print rules as this had to be the way to get what I wanted.

Sure enough when I got home I looked and found I had left a statement in the stylesheet which was overiding the screen rule - took it out and bingo, it works OK.

I then finally get onto the web and see your message. Many thanks for pointing me in the right direction - your help and advice is greatly appreciated. Jools

[DrDoc]

You're welcome! :)
Glad you were able to get it figured out. That's half the joy - when you learn something new, or fix something that was broken