CSS - Print Background-image Of Table

Greetings -

My site has a slightly complex structure -- 7 areas over a background image, and the background resizes to fit the browser size. (oldWithoutMoney dot com)

What I'd like to do is create a print.css file that omits the background image when the site is printed.

Can anyone provide sample stub code or point me to a useful tutorial?

And where is the print.css file supposed to reside? public_html? public_html/style? wherever the relevant .htm file is?

Thanks kindly.

- Richard

I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information.

I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what).

URL

The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background.

Could someone solve this, or alternatively reccommend another way.

Is there any way to force a background color to print in all browsers or at least IE & FF? In the past I have just used an actual image; instead of a background color, but I was wondering if there was a 100% sure way to do this. I tried using media="print" and !import - neither of these worked. So if there is a will, place let me know the way.

Hi guys,
I've got both long and wide table to be showed and printed.
Customer would like that for scrolling, some left columns will freeze on the left (when printed, will be printed on every page), same for table header (fixed when scrolling, repeated on top of every page when printing).
For fixed table headers, there are lots of tutorials, like:
http://www.cssplay.co.uk/menu/tablescroll.html
And for printing, good browsers can repeat thead on every page (don't know how to achieve this for IE).
But for columns locking (repeating for print), I'm totally stuck. Yes, some stuff can be found for scrolling, like:
http://web.tampabay.rr.com/bmerkey/...column-csv.html
But these solutions usually use JavaScript or are not cross-browser.

Is there any way how to do this?
Primarily for IE 6.0/7.0

I am developing a PHP/CSS database application built for Safari and have run into a very nasty bug.

(Aside: the web application I am building is sort of browser-specific... we are an all-Mac company, so we want people to use Safari. [I'm not even trying to make it work with IE5/Mac. Screw that.] But having said that, I'd also like it to work in IE6/Win and Firefox [Mac/PC] to give people at least a few more options, like if they're on their PC at home... whatever. Just thought I would explain that before I get flamed by those who think I'm crazy for going that route.)

Anyway, I'd like to have tables with cells/columns that are hidden on the screen but visible on printouts and vice versa. But I've discovered that using display:none for table cells in the print style sheet crashes Safari. It does not affect span tags within table cells.

This will crash Safari.
Code:

td { display: none; }

This is okay.
Code:

td span.printhide { display: none; }

This is also okay, but why do this if it's still going to take up the space on the page? Might as well just leave it.
Code:

td { visibility: hidden; }

Now, I've found a workaround that works, but it's a pain. Basically, instead of setting it up like a normal table, like this:

Code:

<table>
<tr>
<td>Cell</td>
</tr>
</table>

You have to set it up like this:

Code:

<span class="table">
<span class="row">
<span class="cell">Cell</span>
</span>
</span>

As long as you give those span tags their respective display attributes, this works when you set this in your print stylesheet, for example:

Code:

span.cell { display: none; }

But the big problem with doing it this way is that you're now completely handcuffed to the stylesheet. At least if the style sheet bonks the old way, you still have a table with tabular data in it. Plus, say if the next version of Safari fixes this problem, then you'd have to go back and fix it on every page that uses these span tags in order to "unlock" the handcuffs, which kind of nullifies the purpose of style sheets in the first place.

So I guess what I'm asking is if anyone knows of a workaround that I can use that does NOT involve converting my <table><tr><td> to <span><span><span>? Thanks for reading.

i have this in my css....the image is shown on screen, but if print the page, image wont print...

how can i fix this?

i need the iomage to be printed...help please

Code:

}

#recibo {
		BACKGROUND: url(recibo.jpg);
		WIDTH: 600px; 
		HEIGHT: 400px;
}

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work.

You can clearly see the problem here, a gap at the bottom:

http://www.groundedgroup.com/clients/NWR/

Here's the relevant css:
http://www.groundedgroup.com/client...WR-GG/style.css

I've googled and subsequently tried out some solutions, but no luck. Got any ideas?

Thanks in advance.

PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed.

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,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity.

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">

<head>
<title>CLOColors3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
<link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" />

the print css:
Code:

	  @media print {
		 html{
			height:auto;}
		body{
			background-color:#FFF;}
		#header{
			display:none;}
		#body{
			position:relative;
			background-color:#FFF;
			background-image:none;
			height:auto;
			width:auto;
			left:0px;
			top:0px;
			z-index:0;
			padding-bottom:0px;}
		#textbox{
			position:relative;
			overflow:visible;
			float:none;
			margin-left: 0px;
			top: 0px;
			width:auto;
			bottom:0px;
			background-color:#FFF;
			border:hidden;
			border-color:#FFF;
			z-index:0;
			padding:0px;}
		#textbox img{
			display:none;}
		.searchbar{
			display:none;}
		#linkbar{
			display:none;}
		.map{
			display:none;}
		.video{
			display:none;}
		#linktext{
			display:none;}
		#clear_both{
			display:none;}
		#menu{
			display:none;}
		#footer{
			display:none;}
		}
	

Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!!


UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive.

I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page.

This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly?

Hi
I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash?