CSS - Print Preview Hiding Text

I have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview.

Help ?

to add:
This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table.

This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.

Code:

<style type="text/css">
   divBlackBox1
   {
     margin: 50px auto;
     padding: 0px;
     width: 400px;
     height: 4px;
     display: block;  /* for IE stupidity (to make height work correctly with the correct pixels)... */
     font-size: 1pt;  /* for IE stupidity (to make the smaller height work due to default font-size)... */
     overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
     background-color: #000000;
   }
</style>

<div class="divBlackBox1"></div>

Thanks,
FletchSOD

My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not.

This is the .css code for the logo div:

#logo {
float: left;
margin-left:1px;
width: 200px;
background:url(../images/mm-logo.jpg) no-repeat;
height:50px;}


Any ideas or suggestions?

I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas?

I have recently seen an article from 2005 stating that using CSS to hide text could lead to flagging from Google and other Search Engines as Spam sites.

My question is, if hidden text is used for certain elements of the page such as branding a logo as an h1 tag, will my site be penalized? I don't want to risk being blacklisted from Google, but If all I have is an image header anyways, would it hurt to use a CSS text indentation to hide the h1 text?

I notice that several of the designs on CSS Zen Garden use this techinique for header images, yet the page has a google page rank of 9. Any knowledgeable advice or references to recent articles would be very helpful including personal experience.

Thanks in advance!

in my site text is appearing correctly in IE but it is hiding in the right site. the site is in N E P A L I language and english. Just below the poll in the site i could not arrange the table the content of table is also hidden in right side. I've tried by reducing the width of the table in the content but could not succeed. the url is janapukar . com.

Please suggest.

What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion.

Code:

#rightnav {
	margin-top:14px;
	background-image:url(../images/loader.gif);
	background-position:center center;
	background-repeat:no-repeat;
	width:282px;
	overflow:hidden;
}
#rightnav hr {
	color:white;
	background-color:white;
	height:1px;
	border:none;
	width: 250px;
	margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
	height:306px;
	float:left;
}
#wslist {
	background-color:#336699;
}

.list {
	width:282px;
	float:left;
}

HTML as follows:

<div id="rightnav">
	<div id="rightbox">
		<div id="wslist">
			<div id="video">
				Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
			</div>
			<hr />

			<div class="list">
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">Why is my family so screwed up?</p>
					<p id="vidSub">What to do when families fight</p>
				</div>
				<div class="clearfix"><!--cleared--></div>
				<hr />
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">This my second Title</p>
					<p id="vidSub">A video on titles</p>
				</div>
				<div class="clearfix"><!--cleared--></div>
				<hr />
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">This is my third title</p>
					<p id="vidSub">Yay for subtitles, esp ESL</p>
				</div><div class="clearfix"><!--cleared--></div>
				<hr />
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">Four titles are great though</p>
					<p id="vidSub">I am full of English SDH</p>
				</div><div class="clearfix"><!--cleared--></div>
				<hr />
			</div>
			<div class="list">
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">I am the outcast of the group</p>
					<p id="vidSub">Mah.. nobody loves me</p>
				</div>
				<div class="clearfix"><!--cleared--></div>
				<hr />		
			</div>
			<div class="clearfix"><!--clear--></div>
		</div>
	</div>
</div>

What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it.

Any suggestions?

I created a print.css for my site, but it still does not work and would appreciate any help.

Here's my site:
http://seniormobility.org/test/actionplan.html

Here's the print.css code:
Code:

body, .maincopy {
	background-color: transparent;
	font-size: 12pt;
	font-family: "Times New Roman", Times, serif;
	color: #000000;
}

#navcontainer, #header, #header_pic, #text_control, #header_breadcrumb #search_box {
	display: none;
}

#container {
	width: 100%;
	margin: 0;
	float: none;
}

#pagename, #main_content, #main_content_home {
	border: 0;
	width: 100%;
	margin: 0 5%;
	padding: 0;
	float: none;
	overflow: auto;
}

When I do a print preview or actually print in both IE8 and FF, all the text gets cut-off on the right. I'm not sure what I'm missing.

Thanks in advance for everyone's help!

Does anyone know if it is possible to get text to print white with CSS when printing a page? I know generally you want text black, but this text will be positioned over a black graphic. It seems even when you set the color to white and set it to important in a print style sheet, the print driver sets it to black. Is there any way with a print style sheet to force it to white?

Hi

I am really struggling to get my print stylesheet as it is.

The site is http://calibrehr.com/new/

and the stylesheet is http://calibrehr.com/new/print.css

If you print preview say the home page in firefox it cuts off the text at the bottom. IE displays this page ok.

Could someone please give me some help with reagrd to this problem, and any advice on making print stylesheets!!

Thanks alot!

Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad!

Please consider the following code:

Code:

<html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;} 
}
</style>
</head>

<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>

This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing.

More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem.

I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help!

Thanks in advance,
Angelos

We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content.

eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle.
This seems to happen in all browsers.


We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear.
One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently.
But this seems to defeat the purpose of using a print stylesheet in the first place.
Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either.

So my question is - What happens when a browser prints a page?
Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable)
Or does the client's browser simple request the CSS file and reformat the page it has already downloaded?

If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded

Hi All,
Is there a site where I can simply type in a URL and have it give me screenshots in multiple browsers for FREE please?
Thanks in advance,

Ziffa27

When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area.

I think this is a css issue, but I can't figure it out.

http://alpineec.com/TEST/index.php

Any thoughts?

CSS
Code:

*
{
padding: 0em;
margin: 0em;
}

body
{
background-color:#999999;
padding: 35px 0px 35px 0px;
}

body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h3 span
{
font-weight: normal;
}

h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images2/db1.gif');
}

h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images2/db2.gif');
}

.contentarea
{
padding-top: 1.3em;
}



img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}



.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}

.post ul.controls
{
clear: both;
}

.post ul.controls li
{
display: inline;
font-size: 0.8em;
}

.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}

.post ul.controls li a.printerfriendly
{
background-image: url('images2/icon-printerfriendly.gif');
}

.post ul.controls li a.comments
{
background-image: url('images2/icon-comments.gif');
}

.post ul.controls li a.more
{
background-image: url('images2/icon-more.gif');
}

.box
{
position: relative;
background: #FDFCF6 url('images2/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}

ul.linklist
{
list-style: none;
}

ul.linklist li
{
line-height: 2.0em;
}

#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background-color:#999999;
z-index: 1;
}

#outer
{
	z-index: 2;
	position: relative;
	/*
	The width value below controls the overall width of the design. By default it's set to 82%
	(so it'll take up 82% of the browser window's width). You can set it to a different percentage
	value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 700px;
	border: solid 1px #fff;
	background-color: #fff;
	margin: 0 auto;
}

#header
{
position: relative;
width: 100%;

background: #5a5a5a;
}

#headercontent
{
	position: absolute;
	bottom: -56px;
	padding: 0em 2.0em 1.3em 2.0em;
	left: 274px;
}

#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}

#headercontent h1 sup
{
color: #777;
}

#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}


#menu
{
position: relative;
background: url('images2/menubg.jpg') repeat-x top left;
height: 20px;
padding: 0em 1.0em 0em 1.0em;
}

#menu ul
{
	position: absolute;
	top: 2px;
}

#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: .5em 1.0em 0.9em 1.0em;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

#menu ul li a:hover
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#menu ul li a.active
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
}

#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}

#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}

#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images2/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
	position: absolute;
	left: 191px;
	bottom: 1.2em;
	z-index: 10;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}


pre {
 padding:10px;
 border: 1px dotted #eee;
 background-color:#f9f9f9;
}


#photodiv {
  background-repeat: no-repeat;
}

#aboutBLOCK{padding-left:40px;}

/* PHOTO GALLERY */
#pg {
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none; 
left: 10px;
padding:0; 
margin:0; 
position:relative; 
float:left;
}
#pg ul li {
display:inline; 
float:left; 
margin:0 0 8px 8px;
}
#pg ul li a {
display:block; 
width:90px; 
height:90px; 
	text-decoration:none; 
border:1px solid #000;
}
#pg ul li a img {
display:block; 
width:90px; 
height:90px;
border:0;
}
#pg ul li a:hover {
white-space:normal; 
border-color:#336600;
background-color:#323E20;
}
#pg ul li a:hover img {
position:absolute; 
left: 290px;
top:110px; 
width:300px; 
height: 300px; 
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute; 
left:9px; 
top:110px; 
width:270px; 
height:auto;
font-size:12px;color: black;
}