CSS - Is It Possible To Use A Css Code To A Print Preview?

I noticed that in IE6 when I go to print, or even look in print preview, it cuts off the right side of my page. Is there any code to avoid that? Or even any tips?

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?

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;
}

http://typetester.maratz.com/

I am not the author, but this is sweet!

While previewing my project I'm working on in Opera, I can't see the ' Background Color ' . I can see it fine in IE and Firefox, but darn if that Opera isn't giving me a hard time.

I had checked my code twice to see if it's correct, it's seems fine. by the way, I am using Dreamweaver as my editor.

Can anyone help me out on this issue?

Thank you

I am using XAMPP, my project is not online. Here is the following code >>>>>

Code:

<body>
<div id="mainBody-wrap" class="clearfix" >
	<div id="social-container"> 
		<div id="social">
    		<div id="socialNav">
        		<ul id="socialList">
            		<li class="rss" title="Subscribe by RSS"><a href="#" target="_self"></a></li>
                	<li class="delicious" title="Bookmark us using Delicious"><a href="#" target="_blank"></a></li>
                	<li class="facebook" title="Join us on Facebook"><a href="#" target="_blank"></a></li>
                	<li class="twitter" title="Follow us on Twitter"><a href="#" target="_blank"></a></li>
            	</ul>
      		</div>
        	<div id="googlePlus">
        		<!-- Place this tag where you want the +1 button to render -->
				<g:plusone size="small" annotation="none"></g:plusone>

				<!-- Place this render call where appropriate -->
				<script type="text/javascript">
  					(function() {
    					var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   				    	po.src = 'https://apis.google.com/js/plusone.js';
   				    	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 				 	})();
				</script>
        	</div>
        	<div id="infoNav">
        		<ul id="infoList">
            		<li><a href="#" target="_self">Message Board</a></li>
                	<li><a href="#" target="_self">Help FAQ</a></li>
                    <li><span>[&nbsp;</span><a href="#" target="_self">Rules</a><span>&nbsp;]</span></li>
                	<li><a href="#" target="_self">Contact Us</a></li>
            	</ul>
        	</div>
    	</div>
	</div><br style="clear:both" />
    <div id="hdr-container">
    	<div id="hdr">
        	<div id="searchBox">
            	
            </div>
	 	</div>
    </div>    
</div>
</body>

Code:

html, body {
	height: auto;
	width: 100%;
		
}

body {
	background-color: #161616;
	font-family: " Lucida Grande ", " Verdana ", sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;	
}

		/* Begin #mainBody-Wrap */
		
#mainBody-wrap {	
	width: 100%;		
}

		/* begin #social-container */
		
#social-container {		
	width: 100%;
	background-color: #0F0F0F;
	border-bottom: 1px solid #000000;
}		
		
		/* end #social-container */	

		/* begin #social */
				
#social {		
	width: 810px;
	height: 27px;	
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}		
		
		/* end #social */
		
		/* begin #socialNav */
		
#socialNav {
	width: 95px;
	height: 27px;
	float: left;	
}

		/* end #socialNav */
		
		/* begin #socialList */
		
#socialList {
	width: 95px;
	height: 16px;
	position: relative;
	top: 5px;
}

#socialList li {
	position: absolute;
	top: 0;
}

#socialList li, #socialList a {
	height: 16px;
	display: block;
}

.rss {
	background: url(../images/sprite-ln1.png) no-repeat scroll 0 0 transparent;
	width: 16px;
	left: 0;
}

.delicious {
	background: url(../images/sprite-ln1.png) no-repeat scroll -16px 0 transparent;
	width: 16px;
	left: 27px;
}

.facebook {
	background: url(../images/sprite-ln1.png) no-repeat scroll -32px 0 transparent;
	width: 16px;
	left: 52px;
}

.twitter {
	background: url(../images/sprite-ln1.png) no-repeat scroll -48px 0 transparent;
	width: 16px;
	left: 78px;
}

#googlePlus {		
	float:left;
	margin: 6px 0 0 8px;
}						
		
		/* end #socialList */		
		
		/* begin #infoNav */
		
#infoNav {
	width: 370px;
	height: 27px;
	float: right;
}		
		
		/* end #infoNav */
		
		/* begin #infoList */
		
#infoList {
	margin: 5px 0 0 0;
	text-align: right;
}	

#infoList li { 
	display: inline;
	margin: 0 0 0 18px;
		
}

#infoList li a {
	color: #FFFFFF;
}

#infoList li a:hover {
	color: #DDDDDD;
}

#infoList li span {
	font-weight: bold;
	color: #990000;
}
	
		/* end infoList */		
		
		/* begin #hdr-container */
		
#hdr-container {
	width: 810px;
	margin: 0 auto;
}		
		
		/* end #hdr-container */		

		/* begin #hdr */
		
#hdr {
	width: 100%;
	height: 155px;	
}		
		
		/* end #hdr */
		
		/* begin #searchBox */
		
#searchBox {
	width: 421px;
	height: 37px;		
	margin: 5px 0 0 0;	
	display: block;
	float: right;
}




		
		/* end #searchBox */		
		
		/* End #MainBody-Wrap */
		
		/* Begin ClearFix */
		
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix {
	display: inline-table;
}

		/* Hides from IE-mac \*/

* html .clearfix {	
	height: 1%;
}

.clearfix {
	display: block;
}

		/* End hide from IE-mac */	

Hi,

All the content of my web page is in a table which is 760 pixels width.

This is fine on the screen, but when printing, the right part is cut.

I tried to set a new css print stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print"> to avoid this problem, but it is not working.

I tried to change the margin and padding, but there is no change. I still have the same problem.

I tried many different configurations, but none of them worked... I did probably something wrong.

I know that the page is properly printed if I change manually the print setting (file -> page setting) margin to 5mm, but how can I do it with the css, in order than everybody who would like to print the page has the complete page printed?

Could someone help me?

Many thanks

Hello all,

I have been trying to get my website to comply with googles page speed and yahoo's yslow.

I had 2 seperate css files one for print and one for screen and they wanted them combined. I searched and searched for a way to do this and well I am going to post here how I got things to work in hopes it helps someone else.

<link href="style.css" rel="stylesheet" type="text/css" media="screen, print" >

NOTE if I make it media="all" print does not work


here is code for the main css file that combines the 2 into 1. NOTE also the print is NOT loaded until it is needed.

@media screen {
/* all screen CSS goes in here */
}

@media print {
/* all print CSS goes in here */
}



U ask why a print.css file? simple it lets me force page breaks so images don't get cut in half. it lets me set a legable size font or larger than what is displayed on screen.

Ok here is my problem... in the print.css I don't want to print my backround image. I want just a plain white background. I use a "sprite" to call picture frames for screen. These frames use part of my background image... thus they look bad printed.

How do I in the print.css file tell it NOT to print this frame.png file?

I assume I will use .noprint DISPLAY:none or something to that effect but where and how to impliment this is over my head and I cannot find any examples of how to do it.

Thanks in advance for any suggestions or help

whonoes

Hello all,

Not sure if this is a CSS or Javascript question..

I have a page which has an external CSS sheet, with a part for the @media print styling.
On this page I'm also using (throughout my site) a javascript navigation bar.
The idea is that when user clicks on a print-button, the whole navigation bar disappears, before printing.

The Javascript seems however to add additional DIVS when loading the page which are without any ID, class or nametag, so I tried to get to this "navigationbar-div" via CSS selector combinations - just to find out that apparently CSS cannot select these divs (- maybe because they were added by javascript at runtime???). No matter what I try, it's like CSS doesn't "see" there's additional divs there..

I've also tried to select the concerning DIVs through DOM, but apparently this is still buggy even for modern browsers, so I rather not touch it..

Is there anyway I can get rid of the Javascript navigation bar in my print stylesheet?

Thanks for your help!

I put together the following site ... http://www.themax.co/

I am trying to create a style sheet for the PRINT pages, but I ran into some problems (the main site looks fine, but the print page doesn't).

First, go to the page...
http://www.themax.co/?page_id=6
When you go to print, and look at the print preview (in Firefox). most of the content is pushed to the second page. I assume this is because of the style .pagesidebox (which is a column that spans the entire page) ... I think this is causing the rest of the content to go to the next page. Any idea how to fix this?

Second, I have a logo that goes against the black background (on the website) and a white logo that is supposed to appear on the print page. So, in the print.css stylesheet, I called the background-image to point to the new image. However, the new image is not showing up when printing. I assume this is because the image is a BACKGROUND image, and the print settings are set to NOT show backgrounds. Is there a way around this (using CSS)? Since there are two logos (one on white, and one on black), I can't place the image inside the html page (I have to use CSS).

Please let me know. Thanks!

Hiya, theres a website I'm creating a print stylesheet for which includes the company logo in the header, with a footer of contact details. problem is, the website is all static pages and 100 odd pages, so as I'm having to deal with the static state of the site for now, is there a way I can have in the Print stylesheet or in the CSS where the logo can be inserted in a header and a footer created with text? hope this makes sense?

I have a print style sheet which has an undesired result. Apparently by default it prints the url (and the page title) at the top of each page. Can I tell it not to do that or is that a browser preference that can't be overridden with CSS?

Hi

Could someone assist me in making a print stylesheet for this site please!

http://calibrehr.com/new/

What I need is:

just the logo to display (remove nav)
The text in the orange block to span the width of the page
Remove subnav
Some how diplsay the text that is in the purple boxes below the main content text

I am stuck as to what to do and could really appreciate some help

Many thanks!