W3C home > Mailing lists > Public > www-style@w3.org > October 2005

Simple switch screen / print

From: Cristiano Guglielmetti <guglielmetti@tin.it>
Date: Fri, 14 Oct 2005 18:33:50 +0200
To: "ML W3C Style" <www-style@w3.org>
Message-ID: <000201c5d0dd$0f0d0af0$0201a8c0@ghost1>

Hi all,

to print and render in different ways the site logo on my personal web
site I added this little piece of CSS in the site main one.

@media print {
..sitelogo1 {
	text-align: left;
	background: white;
	color: black;
	font: 250% tahoma, verdana, arial, sans-serif
..sitelogo2 {
	display: none

@media screen {
..sitelogo1 {
	display: none
..sitelogo2 {
	display: inline

In the HTML:
<div id="header">
  <span class="sitelogo1">/guglielmetti/ web site ver.11</span><img
width="384" height="150" alt="/guglielmetti/ Site Logo"

The result on the screen is:
- rendering of the image "CG_WebSite_Logo16.gif"
- no rendering of the text "/guglielmetti/ web site ver.11"

The result on the printer is:
- printing the text "/guglielmetti/ web site ver.11"
- no printing of the image "CG_WebSite_Logo16.gif"

The result seems good but I have some doubts about older browser that
could render both at the same type (no @media support), do you see any
other problem with this solution?

To see all the CSS code go here:


No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.12.0/132 - Release Date:
Received on Friday, 14 October 2005 18:18:17 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:21 UTC