CSS - Print Issues

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

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

Use relative rather than absolute units in CSS property values. WCAG1 AA 3.4 ,
Absolute units are cm, mm, in, pt and pc, as well as absolute size keywords like x-small. Partially sighted users often use the "large fonts" mode of Windows, which makes each pixel larger than usual. This usually causes problems with pixel based layouts, which also perform badly on handheld and widescreen displays. Percentage values "stretch" according to screen size and work on a large range of display sizes.


hello again folks,

Man I am lost on this warning any help? Below is my print.css file

body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
width: auto;
background-position: center center;

}
a {
text-decoration : underline;
color : #0000ff;
}



Thanks once again for all your help!

whonoes

Hello,

I have tried to make a print page using CSS to set the display to none for areas that I don't want printed. This works fine in Firefox but Exploder always pritnts a blank page first. Has anybody had similar problems?

Thanks

I have to design a site using a 750 pixels table.
Of course, when I print the text, my text get cut off on the right hand side.

Using a Print style sheet, is there any ways to avoid loosing the text on the right. Everywhere I look suggest to design into a 600 pixels table but they really want it to 750.

Thanks for any help.

Hello,

I understand that there are at least 7+ media types for CSS and more may be added later.

http://www.w3.org/TR/REC-CSS2/media.html

I want a special stylesheet for print but all other media should use the same stylesheet. Code:

<style type="text/css" media="print">@import "print.css";</style>
<style type="text/css" media="all except print">@import "main.css";</style>

The following is a bad idea because it does not cover media that may be added in the futu Code:

<style type="text/css" media="aural, braille, embossed, handheld, projection, screen, tty, tv">@import "main.css";
<style type="text/css" media="print">@import "main.css";

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!

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

Hi all.

This is the first time that I am using a print css to define the style of how my web page is printing. However, I am having trouble setting up a style sheet that [IE, Netcsape, (PC) ], [Safari, IE and Netscape (Mac)] all recognised and conform to. Particularly, my div tags for some content seemed to work, while some other div tags do not work. My working file is online: http://www.cfdr.co.uk/kw/examples.htm. My print css file is: http://www.cfdr.co.uk/kw/css/print.css

I have 2 major problem.
Problem 1: Div tags are not recognised
I want to hide the div ids (navigation1, navigation2, navigation3, navigation4, navigation5, navigation6, credit, left content). For example, I have used:
#navigation1 {display:none;} in my print css file. However, none of the browsers recognised this. My menu still keep apprearing on my print preview.

Problem 2:
As a result of the div tags not recognised, I am unable to hide the left columm, which originally contained the logo and image. This has left my text on the right columm to be cut off at the margins. I do not know why this happens.

Please, does anyone know what I am doing wrong?

Joyce

if you check out this website you'll immediately understand what the problem is about.

The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten).

With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed.

Code:

<style type="text/css" media="print"> 

	table {
		page-break-befo  auto;
	}
</style>

When you check the webpage, you'll notice this row gives problems in IE.
When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it.
When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be

Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print.

hey all,

my pages do not print, err they only produce a white page.
i have my css set to all media - maybe there is sth. wrong with my jungle of css?
i hope someone can help me out on that one. the site is: http://www.chocolateriewanders.com

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!

I have a three column layout page which looks fine in IE as well as Firefox. But if I try to print the page, it prints the entire page in one column. Also, backgrounds are not printed.

Searching on google, it seems CSS is the cause behind this. I could not find any solution though.

Here is my CSS.


Code:

html {overflow-y:scroll;} 

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #354963;
	font-size: 8pt;
	font-weight: normal;
	padding: 0;
	margin: 120px 0px 0 0;  
}

#wrapper {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	background:#003333 url(/corporateBanner/corporateBanner.jpg) 0 0px;
	width:100%;
	height:100px;
	font-size:8pt;
}

#bannerWrapper {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}

#bannerTitle {
	position:absolute;
	top:28px;
	left:80px;	
	color:white;
	font-size:26pt;
	width:600px;
	margin:0;
	border:0;
	font-weight:normal;
	z-index:2;
	white-space: nowrap;
}

.hiddenLabel {
	display:none;
}

#topmainMenu {
	position: absolute;
	right: 0;
}
#topmainMenu a:hover {
	text-decoration:underline;
}

#mainTabs {
	position:absolute;
	top:	82px;
	left:	-6px;
	width:	600px;
	margin: 0px;
	padding: 0px;
}
#mainTabs ul li {
	float: left;
	padding: 0;
	margin: 0px;
	list-style-type: none;
}
#mainTabs ul li a, #mainTabs ul li a:visited  {
	font-size:8pt;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	width:105px;
	text-align: center;
	height:19px;
	display:block;
}
#mainTab1 a:link, #mainTab1 a:visited, #mainTab2 a:link, #mainTab2 a:visited, #mainTab3 a:link, #mainTab3 a:visited, #mainTab4 a:link, #mainTab4 a:visited, #mainTab5 a:link, #mainTab5 a:visited, #mainTab6 a:link, #mainTab6 a:visited, #mainTab7 a:link, #mainTab7 a:visited {
	background: transparent url(../images/tabs/primary/tabBG.gif) top left no-repeat;
	color: #FFFFFF;
}
#mainTab1 a:hover, #mainTab2 a:hover, #mainTab3 a:hover, #mainTab4 a:hover,#mainTab5 a:hover,#mainTab6 a:hover, #mainTab7 a:hover {
	color: #000000;
	background-position: left -19px;
	text-decoration: none;
}
#T1 #mainTab1 a:link, #T1 #mainTab1 a:visited, #T2 #mainTab2 a:link, #T2 #mainTab2 a:visited, #T3 #mainTab3 a:link, #T3 #mainTab3 a:visited, #T4 #mainTab4 a:link, #T4 #mainTab4 a:visited, #T5 #mainTab5 a:link, #T5 #mainTab5 a:visited, #T6 #mainTab6 a:link, #T6 #mainTab6 a:visited, #T7 #mainTab7 a:link, #T7 #mainTab7 a:visited {
	color: #000000;
	background-position: left -19px;
}

#subMenu {
	position:absolute;
	top:100px;
	left: 0px;	
	margin: 0;
	padding: 0;
	background: #FFF;
	height:15px;
	width:100%;
}
#subMenu ul {
	border: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}

#subMenu ul li {
	float: left;
	padding: 0;
	margin: 0px 10px 0px 7px;
	list-style-type: none;

}
#subMenu ul li a {
	float: left;
	padding: 0;
	margin: 2px 1px 0px 0px;
	color:#000066;
	text-align: center;
	display: block;
	line-height: 16px;
	font-size: 8pt;
	font-weight:normal;
	text-decoration: none; 
	width:auto;
	height:15px;
	letter-spacing: 0px;
}
#subMenu ul li a:hover {
	text-decoration:underline;
	color:#0A3C91;
}
#subMenu ul li a.current {
	text-decoration:underline;
	font-weight:bold;
	color:#0A3C91;
}

#dateStamp {
	position:absolute;
	right:5px;
	top:83px;
	letter-spacing:0px;
	font-size: 8pt;
	font-weight:bold;
	z-index:2;
}

#subContentWrapper {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width:100%;
	height:auto;
	border-top:1px solid #000;
	background: #fff;
	line-height:normal;
}

/* For the text under column */
#subContentWrapper p {
	padding: 0;
	margin: 5px;
	font-size:8pt;
}

/* IE7 1px rounding error. margin-left:-1px; */
/* 25% + 50% + 25% does not work in IE6. (24.8% + 50% + 24.8% works). Overwrote the code in the Home Page. */
#main3Column  {
	float: left;
	width: 50%;	
}
#leftColumn {
	float:left;
	width:25%;
	margin-left:-1px;
}
#rightColumn {
	float:right;
	width:25%;
}
.columnBoxLeft {
	padding: 0px 0px 0px 6px;
	margin: 5px 0px 5px 0px;
}
.columnBoxMiddle {
	padding: 0px 5px 0px 5px;
	margin: 5px 0px 5px 0px;
}
.columnBoxRight {
	padding: 0px 5px 0px 0px;
	margin: 5px 0px 5px 0px;
}

/* Clears the column floats so the footer can center directly below them. */
.cleaner {
	clear:both;
	height:1px;
	font-size:1px;
	border:none;
	margin:0; 
	padding:0;
	background:transparent;
    margin-top: -1px;
    overflow: hidden;
}
	
#revdate { 
	padding: 0px;
	font-weight: normal;
	font-size: 8pt;
	height: 17px;
	width: 100%;
	text-align: center;
	color: #354963;
}

/* Footer styles */
#mainFooter {
	margin: 0px;
	padding: 0px 0px;
	background-color: #363459;
	color: #fff;
	font-weight: bold;
	font-size: 7pt;
	height: 25px;
	border-top: 1px solid #000066;
	text-align: center;
	float: left;
	clear:both;
	width: 100%;
}

#mainFooter p {
	margin: 0;
	padding:0;
	background: transparent;
	color:#FFFFFF;
	font-size:7pt;
	font-weight:bold;
	width:220px;
}
.rightFloat {
	float:right;
	text-align:right;
}
.leftFloat {
	float:left;
	text-align: left;
}
#mainFooter p.leftFloat {
	margin:6px 0 0 4px;
}
#mainFooter p.rightFloat {
	margin:0px 5px 0;
}
#mainFooter p span {
	visibility: hidden;
}

Here is a simple page that I put up using the above CSS (main.css) which has the issue I described above. Use print preview and you will see all the 3 columns one below another.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="main.css" media="screen"/>
</head>

<body>

<div id="subContentWrapper">

<div id="leftColumn">
<div class="columnBox">
<h2 class="channeltitle">Left Column</h2>
<p>Your Text Here</p>
</div><!--/columnBox-->
</div><!--/leftColumn-->

<div id="main3Column">
<div class="columnBox">
<h2 class="channeltitle">Main Column</h2>
<p>Your Text Here</p>
</div><!--/columnBox-->
</div><!--/main3Column-->

<div id="rightColumn">
<div class="columnBox"> 
<h2 class="channeltitle">Right Column</h2>
<p>Your Text Here</p>
</div><!--/columnBox-->
</div><!--/rightColumn-->

</div>

</body>
</html>