Re: [IUG] Problems with the Print View link and Internet Explorer

[Tyson Tate <tysontate at gmail dot com>]

On Jun 26, 2007, at 8:55 AM, Fox, Linda J. wrote:

> I didn't set this up, so my understanding is a bit fuzzy. But it looks
> like this is controlled by
>   1) the use of the id and name attributes of "screen-only" in the div
> tags (e.g.  <div id="screen-only" name="screen-only"> at the bottom of
> the page)
>   2) the @media print section of the style sheet

Rather than add non-semantically appropriate id tags to your HTML  
[1], you might want to just give them semantically appropriate id or  
class tags. That way, if you ever decide to change what prints and  
what doesn't, you only need to change the CSS and not the CSS and  
HTML both.

(Also, it should be noted that 'div' elements don't take a 'name'  
attribute, so you can strike that.)

So, for instance, you might have a footer in the HTML like so:

---
<div id="footer>
	Content here.
</div>
---

and your CSS would look like so:

---
@media print {
	#footer { display: none; }
}
---

> On the flip side, we also use CSS to suppress screen display but print
> some elements on our pages, like the url for the webmaster contact  
> form
> near the bottom of the page.  For this we use
>   1) the id and name attributes of "print-only" in the div tag
>   2) the @media screen section of the style sheet

And on the flip side, what I said above. :)

I hope this helps!

-Tyson

[1] What I mean by "semantically appropriate" is that the class and  
id attributes of tags should represent what they contain, not what  
they look like. This follows from the separation of content and  
presentation that is one of the goals of HTML and CSS. Giving your  
div a class of "print-only" breaks this barrier between content and  
presentation and introduces presentational markup into your content.  
You can read a bit more here: <http://css-discuss.incutio.com/? 
page=ClassNaming>

--
Tyson Tate
Web Developer
Robert E. Kennedy Library
Cal Poly University